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

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

                    <form id="rentalRequestForm" method="post" action="{{ route('smartsupport.clinic.repair-request.confirm') }}" 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">

                        @if ($isRentalSupported)
                        <div class="col-md-11 mt-4" style="margin:0px 0px">
                            <div class="form-group">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input main-text" type="radio" id="customRadio2" name="rental_request_flag" value="0" required checked>
                                    <label for="customRadio2" class="custom-control-label main-text">{!! __("clinic-repair-request.create04.label_not_request") !!}</label>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin: 25px 0px;">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input main-text" type="radio" id="customRadio1" name="rental_request_flag" value="1"
                                            {{ (array_key_exists('rental_request_flag', $request) && $request['rental_request_flag'] === '1') ? 'checked' : '' }}
                                            {{ $hasItemsToRend ? '' : 'disabled'}} required>
                                        <label for="customRadio1" class="custom-control-label main-text">{{ $hasItemsToRend ? __("clinic-repair-request.create04.label_in_stock") : __("clinic-repair-request.create04.label_out_stock") }}</label>
                                    </div>

                                    @php($dropoff_type = \Arr::get($request, 'dropoff_type', ''))
                                    @if ($hasItemsToRend)
                                        <!--<div style="margin: 20px 0px;">
                                            <div class="custom-control custom-radio">
                                                <input class="custom-control-input" type="radio" id="customRadio3" name="dropoff_type" value="1" @if($dropoff_type == "1") checked @endif>
                                                <label for="customRadio3" class="custom-control-label">貸用品のお届け日以降に修理品を発送する</label>
                                            </div>
                                            <br>
                                            <div class="custom-control custom-radio">
                                                <input class="custom-control-input" type="radio" id="customRadio4" name="dropoff_type" value="2" @if($dropoff_type == "2") checked @endif>
                                                <label for="customRadio4" class="custom-control-label">修理品を先にオサダに預ける</label>
                                            </div>
                                        </div>-->
                                    @endif
                                </div>
                            </div>
                            @if ($hasItemsToRend)
                            <div class="col-md-5">
                                <div class="card">
                                    <div class="card-body main-text">
                                        <p>{!! __("clinic-repair-request.create04.p_rental_fee_prefix") !!}<b style="color:red;">{{number_format($equipmentType->getRentalPrice())}}{!! __("clinic-repair-request.create04.p_rental_fee_unit") !!}</b>{!! __("clinic-repair-request.create04.p_rental_fee_postfix") !!}</p>
                                        <p>{!! __("clinic-repair-request.create04.p_rental_period") !!}</p>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                        @endif
                        <!-- /.row -->

                        @if (!$isRentalSupported)
                        <div class="col-md-11" style="margin:0px -20px">
                            <div class="form-group">
                                <div class="custom-control custom-radio">
                                    <p class="main-text">{!! __("clinic-repair-request.create04.p_rental_not_support") !!}</p>
                                    <input class="custom-control-input" type="hidden" id="customRadio2" name="rental_request_flag" value="0">
                                </div>
                            </div>
                        </div>
                        @endif

                        <input type="hidden" name="delivery_method" value="1"><!-- step5を飛ばすことになったため -->
                        <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-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>
        //ブラウザバックした時の処理
        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');
            }
        };
        
        $("#btn-back").on('click', function(){
            let url = $("#rentalRequestForm").attr('action');
            $("#keys").val('back');
            $(this).children().removeClass('none');
            $(this).prop('disabled', true);
            $("#rentalRequestForm").attr('action', url.replace("confirm", "step3"));
            $("#rentalRequestForm").submit();
        });
    </script>
    <script>
        function validateForm(event) {
            event.preventDefault(); // フォームのデフォルトの送信を防止

            // 貸出品対応が行われていない機器の場合はバリデーションを行わない
            if (! Boolean({{$isRentalSupported}})) {
                document.getElementById('rentalRequestForm').submit();
                return;
            }

            let keys = document.getElementById('keys');
            let rentalRequestFlag = document.getElementsByName('rental_request_flag');
            let dropoffType = document.getElementsByName('dropoff_type');
            let rentalRequestFlagLen = rentalRequestFlag.length;
            let dropoffTypeLen = dropoffType.length;
            let isRentalRequestFlag = '';
            let isdropoffType = '';
            let isValid = false;

            for (let i = 0; i < rentalRequestFlagLen; i++){
                if (rentalRequestFlag.item(i).checked){
                    isRentalRequestFlag = rentalRequestFlag.item(i).value;
                    if(isRentalRequestFlag !== "1"){
                        isValid = true;
                    }
                }
            }

            if(isRentalRequestFlag == true){
                for (let i = 0; i < dropoffTypeLen; i++){
                    if (dropoffType.item(i).checked){
                        isdropoffType = dropoffType.item(i).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('rentalRequestForm');
                form.submit();
            //} else {
            //    alert('貸用品の希望する場合、修理品のお預けするタイミングを選択してください');
            //}
        }
    </script>
@stop