@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"><b>配送手続方法</b><br><span style="font-size: 24px;">5</span></li>
                        <li class="visited step step6"><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 class="main-text" style="margin: 60px 15px 0px;"><b>下記の内容をご確認の上、ご同意頂ける場合には、「修理を申し込む」ボタンより次の画面へお進みください。</b></p>

                    <form id="finishForm" action="{{ route('smartsupport.agency.repairRequest.equipment.store', ['clinicId' => $clinic->id, 'id' => $id]) }}" 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>機器</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-4 main-text">
                                {{ \Arr::get($equipment, 'name') }}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>形式</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-4 main-text">
                                {{ \Arr::get($equipmentType, 'external_name', '') }}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>製造番号</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">症状</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">
                                            {{ $failure->detail }}
                                        </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>その他症状</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>写真・動画添付</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="{{ $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>貸用品</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)
                                        あり
                                    @else
                                        なし
                                    @endif
                                    <br>
                                    @php($dropoff_type = \Arr::get($data, 'dropoff_type'))
                                    @if($dropoff_type == "1")
                                        貸用品のお届け日以降に修理品を発送する
                                    @elseif($dropoff_type == "2")
                                        修理品を先にオサダに預ける
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8" style="margin:20px 10px">
                            <div class="row">
                                <div class="col-md-4 medium-heading">
                                    <b>お預かり＆お届け方法</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>お預かり日時</b><sup style="color: red;">★</sup>
                                </div>
                                <div class="col-md-8 main-text">
                                    土日祝除く２日後以降のご設定いただいたお時間に、<br>預かりにお伺いいたします
                                </div>
                            </div>
                        </div>

                        @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;">
                            ＊修理品をお預かり後、お見積もりをお送りいたします。<br>
                            ＊異常がない場合は無償で返却いたします。<br>
                            ＊貸用品の貸出期間は最大3ヶ月です。期限を過ぎないようご注意ください。<br>
                            @foreach ($equipment->fileProcedureJa as $file)
                            ＊取り外し、取り付け方法については、ご登録後にご確認できます。<br>
                            @endforeach
                        </div>

                        <div class="col-md-11 mt-2 main-text" style="margin:20px 0px;color: red;">
                            @if ( $clinic->country_id !== \App\Models\Country::ID_JAPAN )
                            ＊運送にかかる費⽤はお客様ご負担となります<br>
                            @endif
                            ＊修理をキャンセルした場合、見積キャンセル料として、点検料金<b>
                                {{ number_format($equipmentType->getCancelPrice()) }}円
                            </b>（税抜）をご負担いただきます。<br>
                        </div>
                            <b><p class="ml-4 medium-heading" style="color: red;">　{{ $equipment["caution"] }}</p></b>


                        <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('agency.information.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>同意する</b><sup style="color: red;">★</sup>
                                </label>
                            </div>
                        @else
                            <div class="col-md-4" style="margin: 20px 0;">
                                <u><a target="_blank"
                                    href="{{  route('agency.information.terms')  }}"
                                >利用規約はこちら</a></u>
                            </div>
                            <div class="medium-heading"><b>{{$TermAgreedDatetime}}&nbsp;同意済</b></div>
                        @endif
                        </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-8">
                                    <button type="submit" id="btn-submit" class="btn btn-block btn-secondary btn-lg rounded-pill" style="font-size: 16px;" @if($isTermNeedAgree) disabled @endif>
                                        続ける <div class="spinner-border spinner-border-sm text-light none" role="status"><span class="sr-only"></span></div>
                                    </button>
                                </div>
                            </div>
                            @if($isTermNeedAgree)
                            <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);
            let url = $("#finishForm").attr('action');
            $("#finishForm").attr('action', url.replace("store", "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