@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 step step3"><b>症状</b><br><span style="font-size: 24px;">3</span></li>
                        <li><b>貸用品</b><br><span style="font-size: 24px;">4</span></li>
                        <li><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 class="main-text" style="margin: 60px 10px 0px;"><b>症状を選択してください</b><sup style="color: red;">★</sup></p>

                    <form id="failureForm" method="POST" action="{{ route('smartsupport.agency.repairRequest.step4', ['clinicId' => $clinic->id]) }}" 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

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

                        <div class="row" style="margin: 10px 0px;">
                            @if($failures->isNotEmpty())
                                @foreach($failures as $keys => $failure)
                                    <div class="col-md-4" style="margin-top:20px;">
                                        <div class="btn-group-toggle" data-toggle="buttons">
                                            <label class="btn btn-outline-light btn-block btn-custom-select" style="color: #000; border: 2px solid #DCDCDC; border-radius: 15px;">
                                                <input type="checkbox" id="failures[]" name="failures[{{ $keys }}]" value="{{ $failure->id }}" @if(in_array($failure->id, \Arr::get($request, 'failures', []))) checked @endif>
                                                <div class="d-flex align-items-center justify-content-center" style="height:145px;">
                                                    <b class="medium-heading">{{ $failure->detail }}</b>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        @if(!empty($files))
                            @foreach($files as $id => $file)
                                <input type="hidden" id="file_id{{$id}}" name="files[{{ $id }}][id]" value="{{ \Arr::get($file, 'id') }}">
                                <input type="hidden" id="file_name{{$id}}" name="files[{{ $id }}][name]" value="{{ \Arr::get($file, 'name') }}">
                            @endforeach
                        @endif
                    
                        <p class="main-text" style="margin: 35px 10px 0px;"><b>当てはまる症状がない場合や、その他症状に関する情報があれば記入してください</b></p>

                        <div class="col-md-11" style="margin:15px 0px">
                            <textarea name="failure_remarks" class="form-control main-text" rows="5">{{ \Arr::get($request, 'failure_remarks', '') }}</textarea>
                        </div>
                    </form>

                    <form action="post">  
                        <p class="main-text" style="margin: 35px 10px 0px;"><b>症状箇所の写真や動画がある場合は添付してください</b></p>

                        @php
                        $userAgent = $_SERVER['HTTP_USER_AGENT'];
                        $isDesktop = strpos($userAgent, 'Windows') !== false || strpos($userAgent, 'Macintosh') !== false;
                        @endphp
                      
                        <div class="col-md-11" style="margin:15px 0px">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <div id="dropArea" class="" style="text-align:center">
                                            @if ($isDesktop)
                                                <div class="medium-heading" style="margin: -15px; background-color: #F5F5F5; border-radius: 10px;">
                                                    <br>
                                                    <span class="drag-upload"><b>ここにファイルをドラッグ</b>
                                                    <br><br>または<br><br></span>
                                                    <div>
                                                        <label class="custom-file-upload" style="background-color: #fff;">
                                                            <input type="file" id="file" name="file" multiple style="display:none;">
                                                            ファイルを選択、撮影
                                                        </label>
                                                    </div>
                                                    <br>
                                                </div>
                                            @else
                                                <div style="margin: -15px; background-color: #F5F5F5; border-radius: 10px;">
                                                    <label class="custom-file-upload" style="margin: 15px; background-color: #fff;">
                                                        <input type="file" id="file" name="file" multiple style="display:none;">
                                                        ファイルを選択、撮影
                                                    </label>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div id="uploadFileList">
                                        @if(!empty($files))
                                            @foreach($files as $id => $file)
                                                <p>
                                                    <i class="fas fa-file"></i>
                                                    <span>{{ \Arr::get($file, 'name') }}</span>
                                                    <button type="button" class="delete-button text-danger" data-id={{$id}}>
                                                        [削除]
                                                    </button>
                                                </p>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <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" form="failureForm">
                                    続ける <div class="spinner-border spinner-border-sm text-light none" role="status"><span class="sr-only"></span></div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link href="/css/progressbar.css" rel="stylesheet">
    <link href="/css/fileupload_drag&drop.css" rel="stylesheet">
    <style>
        .none{
            display: none;
        }

        .btn-custom-select.active {
          background-color: #dcdcdc !important;
          color: #000 !important;
        }
    </style>
@stop

@section('js')
    <script>const SFA_AGENCY_ID = {{ \Auth::guard('agency')->user()->sfa_agency_id }}</script>
    <script src="/js/upload/base.js" type="module"></script>
    <script src="/js/upload/ajaxForRepairRequestAgency.js" type="module"></script>

    <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');
            }
        };

        $(function() {
            $("#btn-back").on('click', function(){
                let url = $("#failureForm").attr('action');
                let equipment_id = $('[name^=equipment_id]').val()
                $("#keys").val('back');
                $(this).children().removeClass('none');
                $(this).prop('disabled', true);
                $("#failureForm").attr('action', url.replace("step4", "step2/"+equipment_id));
                $("#failureForm").submit();
            });
        });
    </script>
    <script>
        function validateForm(event) {
            event.preventDefault(); // フォームのデフォルトの送信を防止

            const checkboxes = document.querySelectorAll('input[type="checkbox"]');
            const textInput = document.querySelector('textarea');
            const keys = document.getElementById('keys');

            let isValid = false;
            let selectDetail = false;

            // チェックボックスのいずれかが選択されているか確認
            for (let i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked && checkboxes[i].value != '9999') {
                    isValid = true;
                    break;
                } else if (checkboxes[i].value == '9999') {
                    selectDetail = true;
                    if (textInput.value.trim() !== '') {
                        checkboxes[i].checked = true;
                    }
                }
            }

            // フリーテキストが入力されているか確認
            if (textInput.value.trim() !== '') {
                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('failureForm');
                form.submit();
            } else if (selectDetail) {
                alert('詳細を入力してください');
            } else {
                alert('症状を一つ以上選択するか、詳細を入力してください');
            }
        }
    </script>
@stop