@extends('adminlte::page')

@section('title', __("clinic-repair-request.common.create_title"))

@section('content_header')
    <h5><label class="title-underbar">{!! __("clinic-repair-request.common.create_title") !!}</label></h5>
@stop

@section('content')
    <div class="row stepBar-wrap">
        <div class="col-md-12">
            <div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
                <div class="card-body">

                    <div class="stepBar">
                        <li class="visited"><b>{!! __("clinic-repair-request.common.b_repair_step_1") !!}</b><br><span style="font-size: 24px;">1</span></li>
                        <li class="visited"><b>{!! __("clinic-repair-request.common.b_repair_step_2") !!}</b><br><span style="font-size: 24px;">2</span></li>
                        <li class="visited"><b>{!! __("clinic-repair-request.common.b_repair_step_3") !!}</b><br><span style="font-size: 24px;">3</span></li>
                        <li class="visited"><b>{!! __("clinic-repair-request.common.b_repair_step_4") !!}</b><br><span style="font-size: 24px;">4</span></li>
                        <li class="visited"><b>{!! __("clinic-repair-request.common.b_repair_step_5") !!}</b><br><span style="font-size: 24px;">5</span></li>
                        <li class="visited step step6"><b>{!! __("clinic-repair-request.common.b_repair_step_6") !!}</b><br><span style="font-size: 24px;">6</span></li>
                        <li><b>{!! __("clinic-repair-request.common.b_repair_step_7") !!}</b><br><span style="font-size: 24px;">7</span></li>
                    </div>

                    <p class="main-text stepBar-title"><b>{!! __("clinic-repair-request.create06.p_confirm_and_apply") !!}</b></p>

                    <form id="finishForm" action="{{ route('smartsupport.clinic.repair-request.store') }}" method="post" enctype="multipart/form-data" onsubmit="$(this).find('button#btn-submit').prop('disabled', true);">
                        @csrf

                        @if(!empty($data))
                            @foreach($data as $name => $rows)
                                @if($name == "files")
                                    @if(!empty($rows))
                                        @foreach($rows as $id => $file)
                                            <input type="hidden" name="files[{{ $id }}][id]" value="{{ \Arr::get($file, 'id') }}">
                                            <input type="hidden" name="files[{{ $id }}][name]" value="{{ \Arr::get($file, 'name') }}">
                                        @endforeach
                                    @endif
                                @else
                                    @if(is_array($rows))
                                        @foreach($rows as $index => $row)
                                            <input type="hidden" name="{{ $name }}[{{ $index }}]" value="{{ $row }}">
                                        @endforeach
                                    @else
                                        <input type="hidden" name="{{ $name }}" value="{{ $rows }}">
                                    @endif
                                @endif
                            @endforeach
                        @endif

                        <div class="col-md-8" style="margin-top:50px; margin-left: 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>{!! __("clinic-repair-request.create06.b_name") !!}</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-4 main-text">
                                @if (app()->isLocale('ja'))
                                    {{ \Arr::get($equipment, 'name') }}
                                @else
                                    {{ \Arr::get($equipment, 'name_en') }}
                                @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>{!! __("clinic-repair-request.common.b_type") !!}</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-4 main-text">
                                    @foreach($equipment->equipmentTypes as $equipmentType)
                                        @if (app()->isLocale('ja'))
                                            {{ \Arr::get($equipmentType, 'external_name', '') }}
                                        @else
                                            {{ \Arr::get($equipmentType, 'external_name_en', '') }}
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>{!! __("clinic-repair-request.common.b_serial_number") !!}</b>
                                </div>
                                <div class="col-md-4 main-text">
                                    {{ \Arr::get($data, 'product_number', '') }}
                                </div>
                            </div>
                        </div>

                        @if($failures->isNotEmpty())
                            <div class="col-md-8" style="margin:20px 10px">
                                @foreach($failures as $keys => $failure)
                                    <div class="row mb-2">
                                        @if(!$keys)
                                            <div class="col-md-4">
                                                <b class="main-text">{!! __("clinic-repair-request.common.b_failure") !!}</b><sup style="color: red;">★</sup>
                                            </div>
                                        @endif
                                        @if($failure->id != 9999)
                                        <div class="col-md-8 main-text @if($keys) offset-md-4 @endif">
                                            {{ !app()->getLocale() || app()->isLocale('ja') ? $failure->detail : $failure->detail_en }}
                                        </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        @if(\Arr::has($data, 'failure_remarks') && !empty(\Arr::get($data, 'failure_remarks')))
                            <div class="col-md-8" style="margin:20px 10px">
                                <div class="row">
                                    <div class="col-md-4 medium-heading">
                                        <b>{!! __("clinic-repair-request.create06.b_failure_remarks") !!}</b>
                                    </div>
                                    <div class="col-md-8 main-text">
                                        {{ \Arr::get($data, 'failure_remarks') }}
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>{!! __("clinic-repair-request.create06.b_madia_file") !!}</b>
                                </div>
                                <div class="col-md-8 main-text">
                                    @if($files->isNotEmpty())
                                        @foreach($files as $file)
                                            <div class="row">
                                                <div class="col-md-4" style="margin-top:20px;">
                                                    <img src="{{\App\Models\File::getRepairDomain()}}{{ $file->url }}" class="rounded-3" height="125" width="125"><br><img src="/images/material/clip_icon.png">{{ \Arr::get($file, 'original_file_name') }}
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                    <!-- /.row -->
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>{!! __("clinic-repair-request.common.b_rental_request_flag") !!}</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-8 main-text">
                                    @php($rental_request_flag = \Arr::get($data, 'rental_request_flag'))
                                    @if($rental_request_flag)
                                        {!! __("clinic-repair-request.create06.text_rental_request_flag_on") !!}
                                    @else
                                        {!! __("clinic-repair-request.create06.text_rental_request_flag_off") !!}
                                    @endif
                                    <br>
                                    @php($dropoff_type = \Arr::get($data, 'dropoff_type'))
                                    @if($dropoff_type == "1")
                                        {!! __("clinic-repair-request.create06.text_dropoff_type_1") !!}
                                    @elseif($dropoff_type == "2")
                                        {!! __("clinic-repair-request.create06.text_dropoff_type_2") !!}
                                    @endif
                                </div>
                            </div>
                        </div>

                        @if ( ( $equipmentType->repair_start_type == "1" && Auth::guard('clinic')->user()->clinic->country_id === \App\Models\Country::ID_JAPAN )
                            || ( $equipmentType->repair_start_type_foreign == "1" && Auth::guard('clinic')->user()->clinic->country_id !== \App\Models\Country::ID_JAPAN ) )
                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>{!! __("clinic-repair-request.create06.b_on_site") !!}</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-8 main-text">
                                    {!! __("clinic-repair-request.create06.text_on_site") !!}&emsp;
                                </div>
                            </div>
                            <input type="hidden" name="is_on_site_repair" value="1" />
                        </div>
                        @else
                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>{!! __("clinic-repair-request.common.b_method") !!}</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-8 main-text">
                                    {{ DeliveryMethodHelper::getMethodText((int) $data['delivery_method']) }}&emsp;
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>{!! __("clinic-repair-request.create06.b_checkin_datetime") !!}</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-8 main-text">
                                    {!! __("clinic-repair-request.create06.text_checkin_datetime") !!}
                                </div>
                            </div>
                        </div>
                        @endif

                        @if ($simpleEstimate[0] > 0)
                        <!--<div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4">
                                    <b style="color: red;">簡易見積もり</b>
                                </div>
                                <div class="col-md-8">
                                    <div class="col-md-8">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        修理費
                                                    </div>
                                                    <div class="col-md-6">
                                                        ￥{{ number_format($simpleEstimate[0]) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @if ($simpleEstimate[1] > 0)
                                        <div class="text-center">
                                            {{ '＋' }}
                                        </div>
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        貸用品貸出料金
                                                    </div>
                                                    <div class="col-md-6">
                                                        ￥{{ number_format($simpleEstimate[1]) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        @if ($simpleEstimate[2] > 0)
                                        <div class="text-center">
                                            {{ '＋' }}
                                        </div>
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        オサダ対応料金
                                                    </div>
                                                    <div class="col-md-6">
                                                        ￥{{ number_format($simpleEstimate[2]) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        <div class="text-center">
                                            {{ '＝' }}
                                        </div>
                                        <div class="card" style="background-color: lightyellow;">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        合計費用
                                                    </div>
                                                    <div class="col-md-6">
                                                        <b style="color: red;">￥{{ number_format($simpleEstimate[3]) }}</b>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <a style="color: red;">
                                        <input type="hidden" name="estimated_price" value="{{ $simpleEstimate[3] }}">
                                        ＊参考価格となります。実際の請求額とは異なる場合があります。
                                    </a>
                                </div>
                            </div>
                        </div>-->
                        @endif

                        <div class="col-md-11 mt-2 main-text" style="margin:30px 0px;">
                            ＊{!! __("clinic-repair-request.create06.text_note_1") !!}<br>
                            ＊{!! __("clinic-repair-request.create06.text_note_2") !!}<br>
                            ＊{!! __("clinic-repair-request.create06.text_note_3") !!}<br>
                            @foreach ($equipment->getProcedureFile as $file)
                            ＊{!! __("clinic-repair-request.create06.text_note_4") !!}<br>
                            @endforeach
                        </div>

                        <div class="col-md-11 mt-2 main-text" style="margin:20px 0px;color: red;">
                            @if ( Auth::guard('clinic')->user()->clinic->country_id !== \App\Models\Country::ID_JAPAN )
                            ＊{!! __("clinic-repair-request.create06.text_note_5") !!}<br>
                            @endif
                            ＊{!! __("clinic-repair-request.create06.text_cancel_charge_1") !!}<b>
                                @if ($equipment->equipmentTypes->count() == 0)
                                {!! __("clinic-repair-request.create06.text_cancel_charge_2") !!}
                                @else
                                {{ number_format($equipment->equipmentTypes[0]->getCancelPrice()) }}{!! __("clinic-repair-request.create06.text_cancel_charge_3") !!}
                                @endif
                            </b>{!! __("clinic-repair-request.create06.text_cancel_charge_4") !!}<br>
                        </div>
                        @if (app()->isLocale('ja') && $equipment["caution"])
                            <b><p class="ml-4 medium-heading" style="color: red;">　{{ $equipment["caution"] }}</p></b>
                        @elseif (!app()->isLocale('ja') && $equipment["caution_en"])
                            <b><p class="ml-4 medium-heading" style="color: red;">　{{ $equipment["caution_en"] }}</p></b>
                        @endif


                        <div class="col-md-8" style="margin:30px 10px">
                            @if($isTermNeedAgree)
                            <div id="article" class="col-12" style="font-size: 12px; margin:20px 0px; height: 350px; overflow: auto; border: 2px solid #DCDCDC;">
                                @include('clinic.signup.modal.article')
                            </div>
                            <div class="form-check medium-heading">
                                <input  type="checkbox" class="form-check-input" id="agreeCheck" name="agreeCheck" value="1" disabled="disabled">
                                <label class="form-check-label" for="agreeCheck">
                                    <b>{!! __("clinic-repair-request.create06.b_agree") !!}</b><sup style="color: red;">★</sup>
                                </label>
                            </div>
                        @else
                            <div class="col-md-4" style="margin: 20px 0;">
                                <u><a target="_blank"
                                    href="{{  route('clinic.information.terms')  }}"
                                >{!! __("clinic-repair-request.create06.button_terms") !!}</a></u>
                            </div>
                            <div class="medium-heading"><b>{{$TermAgreedDatetime}}&nbsp;{{__('clinic-repair-request.create06.b_agreed')}}</b></div>
                        @endif
                        </div>

                        <div class="col-md-8 btn-area" style="margin:50px 0px">
                            <div class="row btn-wrap">
                                <div class="col-md-4">
                                    <button type="button" id="btn-back" class="btn btn-block button-back btn-lg rounded-pill">
                                        {!! __("clinic-repair-request.common.button_back") !!} <div class="spinner-border spinner-border-sm text-light none" role="status"><span class="sr-only"></span></div>
                                    </button>
                                </div>
                                <div class="col-md-8">
                                    <button type="submit" id="btn-submit" class="btn btn-block @if($isTermNeedAgree) btn-secondary @else button-go @endif btn-lg rounded-pill" style="font-size: 16px;" @if($isTermNeedAgree) disabled @endif>
                                        {!! __("clinic-repair-request.create06.button_go") !!} <div class="spinner-border spinner-border-sm text-light none" role="status"><span class="sr-only"></span></div>
                                    </button>
                                </div>
                            </div>
                            @if($isTermNeedAgree)
                            <small>＊{!! __("clinic-repair-request.create06.small") !!}</small>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link href="/css/progressbar.css" rel="stylesheet">
    <style>
        .none{
            display: none;
        }
    </style>
@stop

@section('js')
<script>
    //ブラウザバックした時の処理
    window.onpageshow = function(event) {
        if (event.persisted) {
            // submitを活性化
            $('#btn-submit').prop('disabled', false);

            // submitのスピナーを非表示
            $('#btn-submit').find('.spinner-border').addClass('none');

            //「戻る」ボタンを活性化
            $('#btn-back').prop('disabled', false);

            //「戻る」ボタンのスピナーを非表示
            $('#btn-back').find('.spinner-border').addClass('none');
        }
    };
    @if($isTermNeedAgree)
        // 規約を全表示したらボタンを押下可能に
        var btnAbled = false;
        const articleElement = document.getElementById('article');
        const clientHeight = articleElement.clientHeight;
        const scrollHeight = articleElement.scrollHeight;
        articleElement.onscroll = function() {
            if (scrollHeight - (clientHeight + this.scrollTop) <= 20) {
                $("#agreeCheck").prop('disabled', false);
                btnAbled = true;
                if($("#agreeCheck").is(':checked') && btnAbled){
                    $("button[type^=submit]").removeClass('btn-secondary');
                    $("button[type^=submit]").addClass('button-go');
                    $("button[type^=submit]").prop('disabled', false);
                }else{
                    $("button[type^=submit]").addClass('btn-secondary');
                    $("button[type^=submit]").removeClass('button-go');
                    $("button[type^=submit]").prop('disabled', true);
                }
            }
        };
    @endif

    $(function(){
        @if($isTermNeedAgree)
            $("#agreeCheck").on('change', function(){
                if($(this).is(':checked') && btnAbled){
                    $("button[type^=submit]").removeClass('btn-secondary');
                    $("button[type^=submit]").addClass('button-go');
                    $("button[type^=submit]").prop('disabled', false);
                }else{
                    $("button[type^=submit]").addClass('btn-secondary');
                    $("button[type^=submit]").removeClass('button-go');
                    $("button[type^=submit]").prop('disabled', true);
                }
            });
        @endif

        $("#btn-back").on('click', function(){
            $(this).children().removeClass('none');
            $(this).prop('disabled', true);
            $("#finishForm").attr('action', '{{ route('smartsupport.clinic.repair-request.step4') }}');
            $("#finishForm").submit();
        });

        $("#btn-submit").on('click', function(){
            $(this).children().removeClass('none');
            $(this).prop('disabled', true);
            $("#finishForm").submit();
        });

        @if ($alert)
            $('#repairAlert').modal('show');
        @endif
    });
</script>
@stop