@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 step step2"><b>{!! __("clinic-repair-request.common.b_repair_step_2") !!}</b><br><span style="font-size: 24px;">2</span></li>
                        <li><b>{!! __("clinic-repair-request.common.b_repair_step_3") !!}</b><br><span style="font-size: 24px;">3</span></li>
                        <li><b>{!! __("clinic-repair-request.common.b_repair_step_4") !!}</b><br><span style="font-size: 24px;">4</span></li>
                        <li><b>{!! __("clinic-repair-request.common.b_repair_step_5") !!}</b><br><span style="font-size: 24px;">5</span></li>
                        <li><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>

                    <form id="step2" method="post" action="{{ route('smartsupport.clinic.repair-request.step3') }}" enctype="multipart/form-data">
                        @csrf
                    <div class="row">
                        <div class="col-md-9 sm-pd-0" style="padding-left:20px;">
                            <p class="stepBar-title"><b class="main-text">{!! __("clinic-repair-request.create02.p_input_type_and_number") !!}</b><sup style="color: red;">★</sup>
                            </p>

                            @if(!empty($data))
                                @foreach($data as $name => $rows)
                                    @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
                                @endforeach
                            @else
                                <input type="hidden" name="equipment_id" value="{{ $equipment->id }}">
                            @endif
                            @if(!empty($files))
                                @foreach($files 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

                            <div class="row mt-3">
                                <div class="col-md-5">
                                    <div class="card" style="border: 2px solid #DCDCDC; border-radius: 15px;">
                                        <div class="card-body">
                                            <div class="row row-1">
                                                <div class="col-md-4" style="margin-top:10px;">
                                                    <img src="{{\App\Models\File::getImageDomain()}}/equipment_icon/{{ $equipment->id }}.png" class="rounded-3" height="45" width="45">
                                                </div>
                                                <div class="col-md-6 medium-heading" style="margin-top:10px;">
                                                    <b>@if (app()->isLocale('ja')){{ $equipment->name }}@else{{ $equipment->name_en }}@endif</b><br>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-2">
                                    <b class="medium-heading">形式</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-10 stepBar-form">
                                    <select id="equipment_type_id" name="equipment_type_id" class="form-control main-text" required>
                                        {{-- 「不明」は一番初めに表示する --}}
                                        @foreach($equipment->equipmentTypes as $equipmentType)
                                            @php
                                                $externalName = '';
                                                if(app()->isLocale('ja')){
                                                    $externalName = $equipmentType->external_name;
                                                }else{
                                                    $externalName = $equipmentType->external_name_en;
                                                }
                                            @endphp
                                            @if($externalName == Modules\ProductPromotion\Entities\EquipmentType::EXTERNAL_NAME_UNKNOWUN_JA || $externalName == Modules\ProductPromotion\Entities\EquipmentType::EXTERNAL_NAME_UNKNOWUN_EN)
                                                <option value="{{ $equipmentType->id }}" data-number="{{ $equipmentType->product_number }}" @if($equipmentType->id == \Arr::get($request, 'equipment_type_id', "")) selected @endif >
                                                    {{ $externalName }}
                                                </option>
                                            @endif
                                        @endforeach

                                        @foreach($equipment->equipmentTypes as $equipmentType)
                                            @php
                                                $externalName = '';
                                                if(app()->isLocale('ja')){
                                                    $externalName = $equipmentType->external_name;
                                                }else{
                                                    $externalName = $equipmentType->external_name_en;
                                                }
                                            @endphp
                                            @if($externalName != Modules\ProductPromotion\Entities\EquipmentType::EXTERNAL_NAME_UNKNOWUN_JA && $externalName != Modules\ProductPromotion\Entities\EquipmentType::EXTERNAL_NAME_UNKNOWUN_EN)
                                                <option value="{{ $equipmentType->id }}" data-number="{{ $equipmentType->product_number }}" @if($equipmentType->id == \Arr::get($request, 'equipment_type_id', "")) selected @endif >
                                                    {{ $externalName }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12 mb-4">
                                    <p class="main-text" style="margin: 20px 0px;">{!! __("clinic-repair-request.create02.p_not_publish") !!}</p>
                                    @foreach ( $equipment->getExplainFile as $files => $file)
                                        <a class="main-text" href="{{\App\Models\File::getFileDomain()}}{{$file->url}}" target="_blank">{!! __("clinic-repair-request.create02.a_how_to_check") !!}</a>
                                    @endforeach
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-2 medium-heading">
                                    <b>{!! __("clinic-repair-request.common.b_serial_number") !!}</b>
                                </div>
                                <div class="col-md-10 stepBar-form">
                                    <input type="text" id="product_number" name="product_number" class="form-control main-text" value="{{ \Arr::get($request, 'product_number', "") }}" placeholder="">
                                </div>
                            </div>
                        </div>

                        <!--<div class="col-md-5">
                            <div class="card" style="margin: 60px 0px 0px;">
                                <div class="card-body">
                                    <p>修理依頼を登録される前にご確認ください</p>
                                    @foreach ($equipment->equipmentCheckpoints as $cp)
                                    <div class="row">
                                        <div class="col-md-1"><i class="far fa-check-circle"></i></div>
                                        <div class="col-md-10">{{ $cp->name }}</div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>-->

                        <div class="col-md-8 btn-area" style="margin:50px 0px">
                            <div class="row btn-wrap">
                                <div class="col-md-4">
                                    <a id="page-back" href="/smartsupport/clinic/repair-request/step1/{{ $equipment->equipment_genre_id }}" class="btn btn-block button-back btn-lg rounded-pill">
                                        {!! __("clinic-repair-request.common.button_back") !!}
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <button type="submit" id="btn-submit" class="btn btn-block button-go btn-lg rounded-pill">{!! __("clinic-repair-request.common.button_go") !!}</button>
                                </div>
                            </div>
                        </div>


                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="unknownType" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
                <div class="text-center" style="margin-top: 20px;">
                    <h5 class="modal-title" id="alertModalLabel"><b>{!! __('clinic-repair-request.create02.unknown_type_modal.title') !!}</b></h5>
                    <hr style="margin-bottom:0px;">
                </div>
                <div class="modal-body">
                    <div class="row" style="margin-bottom: 5px">
                        <div id="body" class="col-md-12">{!! __('clinic-repair-request.create02.unknown_type_modal.message') !!}</div>
                    </div>
                </div>
                <div style="margin-bottom: 20px;">
                    <div class="col-md-12 d-flex justify-content-center">
                        <div class="col-md-5">
                            <button id="btn-submit-modal" type="submit" form="step2" class="btn btn-block button-go btn-lg rounded-pill">{!! __("clinic-repair-request.common.button_go") !!}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link href="/css/progressbar.css" rel="stylesheet">
    <style>
    .not-allowed{
        cursor: not-allowed;
    }
    .not-pointer-events{
        pointer-events: none;
    }
    </style>
@stop

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

                //「戻る」ボタンのスピナーを削除
                $('#page-back').find('.spinner-border').remove();
            }
        };
        
        $(function(){
            
            $("#page-back").on('click', function(){
                $(this).append('<div class="spinner-border spinner-border-sm text-light" role="status"><span class="sr-only"></span></div>');
            });

            $("#btn-submit").on('click', function(){
                var equipmentTypeId = $('[name^=equipment_type_id]').val()

                if(equipmentTypeId){
                    let txt = $('select#equipment_type_id option[value="' + equipmentTypeId + '"]').text();
                    if(txt.indexOf('{!! __('clinic-repair-request.create02.equipment_name_unknown', [], 'ja') !!}') > -1 || txt.indexOf('{!! __('clinic-repair-request.create02.equipment_name_unknown', [], 'en') !!}') > -1){
                        $('#unknownType').modal();
                        return false;
                    }else{
                        $(this).append('<div class="spinner-border spinner-border-sm text-light" role="status"><span class="sr-only"></span></div>');
                    }
                }
            });

            $('form').submit(function () {
                $(this).find(':submit').prop('disabled', 'true');
                $('#btn-submit-modal').prop('disabled', 'true');
            });
        });
    </script>
@stop