@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 step step5"><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>

                    <p class="stepBar-title"><b>{!! __("clinic-repair-request.create05.p_select_method") !!}</b><sup style="color: red;">★</sup></p>

                    <form id="deliveryMethodForm" action="{{ route('smartsupport.clinic.repair-request.confirm') }}" method="post" enctype="multipart/form-data" onsubmit="validateForm(event)">
                        @csrf

                        @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
                        @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

                        <input type="hidden" id="keys" value="submit">

                        <div class="col-md-11" style="margin: 25px 20px;">
                            @foreach (DeliveryMethodHelper::methodsForRepairRequestsForm() as $i => $deliveryMethod)
                                <div class="row" style="margin-top: 20px;">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <div class="custom-control custom-radio">
                                                <input class="custom-control-input" type="radio" id="customRadio{{$deliveryMethod['id']}}"
                                                       name="delivery_method" 
                                                       value="{{$deliveryMethod['id']}}"
                                                       {{ (isset($request, $request['delivery_method']) && $request['delivery_method'] ==  $deliveryMethod['id']) ? 'checked' : '' }}
                                                       required>
                                                <label for="customRadio{{$deliveryMethod['id']}}" class="custom-control-label">{{ !app()->getLocale() || app()->isLocale('ja') ? $deliveryMethod['method'] : $deliveryMethod['method_en'] }}</label>
                                            </div>
                                        </div>
                                    </div>
                                    @if (!app()->getLocale() || app()->isLocale('ja'))
                                    <div class="col-md-8">{{ $deliveryMethod['detail'] ? '※'.$deliveryMethod['detail'] : ''}}</div>
                                    @else
                                    <div class="col-md-8">{{ $deliveryMethod['detail_en'] ? '※'.$deliveryMethod['detail_en'] : ''}}</div>
                                    @endif
                                </div>
                            @endforeach
                        </div>

                        <div class="col-md-8" style="margin:50px 0px">
                            <div class="row">
                                <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-4">
                                    <button type="submit" id="btn-submit" class="btn btn-block button-go btn-lg rounded-pill">
                                        {!! __("clinic-repair-request.common.button_go") !!} <div class="spinner-border spinner-border-sm text-light none" role="status"><span class="sr-only"></span></div>
                                    </button>
                                </div>
                            </div>
                        </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>
        $(function(){
            $("#btn-back").on('click', function(){
                let url = $("#deliveryMethodForm").attr('action');
                $("#keys").val('back');
                $(this).children().removeClass('none');
                $(this).prop('disabled', true);
                $("#deliveryMethodForm").attr('action', url.replace("confirm", "step4"));
                $("#deliveryMethodForm").submit();
            });
        });
    </script>
    <script>
        function validateForm(event) {
            event.preventDefault(); // フォームのデフォルトの送信を防止

            let isValid = false;
            const keys = document.getElementById('keys');

            // 配送方法によるバリデーションはstep1では不使用
            if (keys.value !== 'back') {
                let methods = @json(DeliveryMethodHelper::methodsForRepairRequestsForm(), JSON_PRETTY_PRINT);
                let checkedMethod = document.querySelectorAll("input[name='delivery_method']:checked").item(0);
        
                // スケジュールが必要な配送メソッドのIDを取得
                let needsScheduleMethodIds = [];
                for (let i = 0; i < methods.length; i++) {
                    if (methods[i].needsScheduleSelect) {
                        needsScheduleMethodIds.push(methods[i].id);
                    }
                }
                if (!needsScheduleMethodIds.includes(parseInt(checkedMethod.value))) {
                    isValid = true;
                }
            }
            

            if(keys.value == "back"){
                isValid = true;
            } else if(keys.value == "submit" && isValid){
                let btn = document.getElementById('btn-submit');
                btn.children[0].classList.remove('none')
                btn.setAttribute("disabled", "true");
            }

            if (isValid) {
                var form = document.getElementById('deliveryMethodForm');
                form.submit();
            // } else {
            //     alert('指定の日時に回収を選択された際には設定した空き時間も選択してください');
            }
        }
    </script>
@stop