@extends('adminlte::page')

@section('title', '修理依頼新規登録')

@section('content_header')
    <h5><label class="title-underbar">修理依頼新規登録</label></h5>
@stop

@section('content')
    <div class="row">
        <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>機器選択</b><br><span style="font-size: 24px;">1</span></li>
                        <li class="visited"><b>形式・製造番号</b><br><span style="font-size: 24px;">2</span></li>
                        <li class="visited"><b>症状</b><br><span style="font-size: 24px;">3</span></li>
                        <li class="visited"><b>貸用品</b><br><span style="font-size: 24px;">4</span></li>
                        <li class="visited step step5"><b>配送手続方法</b><br><span style="font-size: 24px;">5</span></li>
                        <li><b>利用規約確認</b><br><span style="font-size: 24px;">6</span></li>
                        <li><b>修理依頼登録完了</b><br><span style="font-size: 24px;">7</span></li>
                    </div>

                    <p style="margin: 60px 30px 0px;"><b>お預かり＆お届け方法を選択してください</b><sup style="color: red;">★</sup></p>

                    <form id="deliveryMethodForm" action="{{ route('smartsupport.agency.repair-request.confirm', ['clinicId' => $clinic->id]) }}" 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">{{ $deliveryMethod['method'] }}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-8">{{ $deliveryMethod['detail'] ? '※'.$deliveryMethod['detail'] : ''}}</div>
                                </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">
                                        戻る <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">
                                        続ける <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