@extends('adminlte::page')

@section('title', $title)

@section('content_header')
<h5><label class="title-underbar">{{ $title }}</label></h5>
@stop

@section('content')
<x-admin.success-flush-message />
<x-admin.error-flush-message />
<x-admin.validation-message />
@if ($errors->any())
    @foreach ($errors->all() as $error)
        <div class="alert alert-danger">{{ $error }}</div>
    @endforeach
@endif
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="stepBar" style="margin-bottom:60px;">
                    <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>
                </div>
                @if(Gate::forUser(\Auth::user())->allows('employeeOperation', 'event|2'))
                <form id="step2Form" method="POST" action="{{ route('admin.event.' . \Arr::get($request, 'save_mode', ''), \Arr::get($request, 'group_id', '')) }}" class="form-group mt-3" enctype="multipart/form-data" onsubmit="$(this).find('button#btn-submit').prop('disabled', true);">
                    @csrf
                    <div class="form-group row" style="margin: 10px 0px;">
                        <label for="internal_name" class="col-sm-1 col-form-label">対象</label>
                        <div class="col-sm-8">
                            @php
                                $isDomesticDentistry = \Arr::get($request, 'is_domestic_dentistry', '');
                                $isDomesticVeterinary = \Arr::get($request, 'is_domestic_veterinary', '');
                                $isDomesticMedical = \Arr::get($request, 'is_domestic_medical', '');
                                $isDomesticOthers = \Arr::get($request, 'is_domestic_others', '');
                            @endphp
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                              <input type="checkbox" class="form-check-input target_clinic" name="is_domestic_dentistry" id="is_domestic_dentistry" value="1" {{ $isDomesticDentistry ? 'checked="checked"' : '' }}>
                              <label class="form-check-label " for="is_domestic_dentistry">国内歯科</label>
                            </div>
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                              <input type="checkbox" class="form-check-input target_clinic" name="is_domestic_veterinary" id="is_domestic_veterinary" value="1" {{ $isDomesticVeterinary ? 'checked="checked"' : '' }}>
                              <label class="form-check-label " for="is_domestic_veterinary">国内獣医科</label>
                            </div>
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                              <input type="checkbox" class="form-check-input target_clinic" name="is_domestic_medical" id="is_domestic_medical" value="1" {{ $isDomesticMedical ? 'checked="checked"' : '' }}>
                              <label class="form-check-label " for="is_domestic_medical">国内医科</label>
                            </div>
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                              <input type="checkbox" class="form-check-input target_clinic" name="is_domestic_others" id="is_domestic_others" value="1" {{ $isDomesticOthers ? 'checked="checked"' : '' }}>
                              <label class="form-check-label " for="is_domestic_others">国内その他</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row" style="margin: 10px 0px;">
                        <div class="col-sm-1"></div>
                        <div class="col-sm-8">
                            @php
                                $isOversea = \Arr::get($request, 'is_oversea', '');
                            @endphp
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                              <input type="checkbox" class="form-check-input target_clinic" name="is_oversea" id="is_oversea" value="1" {{ $isOversea ? 'checked="checked"' : '' }}>
                              <label class="form-check-label " for="is_oversea">海外</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row" style="margin: 10px 0px;">
                        <div class="col-sm-1"></div>
                        <div class="col-sm-8">
                            @php
                                $isOverseaIsrael = \Arr::get($request, 'is_oversea_israel', '');
                                $isOverseaIndonesia = \Arr::get($request, 'is_oversea_indonesia', '');
                                $isOverseaOther = \Arr::get($request, 'is_oversea_other', '');
                            @endphp
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                              <input type="checkbox" class="form-check-input target_clinic is_oversea" name="is_oversea_israel" id="is_oversea_israel" value="1" {{ $isOverseaIsrael ? 'checked="checked"' : '' }}>
                              <label class="form-check-label " for="is_oversea_israel">イスラエル</label>
                            </div>
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                              <input type="checkbox" class="form-check-input target_clinic is_oversea" name="is_oversea_indonesia" id="is_oversea_indonesia" value="1" {{ $isOverseaIndonesia ? 'checked="checked"' : '' }}>
                              <label class="form-check-label " for="is_oversea_indonesia">インドネシア</label>
                            </div>
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                              <input type="checkbox" class="form-check-input target_clinic is_oversea" name="is_oversea_other" id="is_oversea_other" value="1" {{ $isOverseaOther ? 'checked="checked"' : '' }}>
                              <label class="form-check-label " for="is_oversea_other">その他海外</label>
                            </div>
                        </div>
                    </div>

                    <p style="margin: 35px 10px 0px;"><b>対象医院</b></p>
                    <div class="form-group row" style="margin: 10px 0px;">
                        <div class="col-sm-10">
                            <select id="target_clinic_id" name="target_clinic_id[]" multiple>
                            @php
                                $aryTargetClinicId = \Arr::get($request, 'target_clinic_id', '');
                            @endphp
                            @if(!empty($aryTargetClinicId))
                                @foreach($aryTargetClinicId as $index => $targetClinicInfo)
                                    @php
                                        $targetClinicInfo = explode('_', $targetClinicInfo);
                                    @endphp
                                    <option value="{{$targetClinicInfo[0] . '_' . $targetClinicInfo[1]}}">{{$targetClinicInfo[1]}}</option>
                                @endforeach
                            @endif
                            </select>
                            @if (isset($repairRequest))
                                <input type="hidden" name="repair_request_id" value="{{ $repairRequest->id }}">
                            @endif
                        </div>
                    </div>

                    <div class="form-group row" style="margin: 10px 0px;">
                        <label for="is_video_chat" class="col-sm-1 col-form-label">動画通話予定</label>
                        <div class="col-sm-8">
                            @php
                                $isVideoChat = \Arr::get($request, 'is_video_chat', '');
                            @endphp
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                              <input type="checkbox" class="form-check-input" name="is_video_chat" id="is_video_chat" value="1" {{ $isVideoChat ? 'checked="checked"' : '' }}>
                              <label class="form-check-label " for="is_video_chat">あり</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row" style="margin: 10px 0px;">
                        <label for="employee_id" class="col-sm-1 col-form-label">担当者</label>
                        <div class="col-sm-8">
                            @php
                                $employeeId = \Arr::get($request, 'employee_id', '');
                                $employeeId = $employeeId ? $employeeId : Auth::id();
                            @endphp
                            <div class="form-check form-check-inline" style="padding-top:5px;">
                                <select id="employee_id" name="employee_id" class="form-control">
                                    @foreach (EmployeeHelper::employeesForForm() as $key => $value)
                                        @if ($employeeId == $key)
                                            <option value="{{ $key }}" selected>{{ $value }}</option>
                                        @else
                                            <option value="{{ $key }}" >{{ $value }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="group_id" name="group_id" value="{{ \Arr::get($request, 'group_id', '') }}">
                    <input type="hidden" name="title" value="{{ \Arr::get($request, 'title', '') }}">
                    <input type="hidden" name="start_at_date" value="{{ \Arr::get($request, 'start_at_date', '') }}">
                    <input type="hidden" name="start_at_time" value="{{ \Arr::get($request, 'start_at_time', '') }}">
                    <input type="hidden" name="end_at_date" value="{{ \Arr::get($request, 'end_at_date', '') }}">
                    <input type="hidden" name="end_at_time" value="{{ \Arr::get($request, 'end_at_time', '') }}">
                    <input type="hidden" name="is_all_day" value="{{ \Arr::get($request, 'is_all_day', '') }}">
                    <input type="hidden" name="edit_mode" value="{{ \Arr::get($request, 'edit_mode', '') }}">
                    <input type="hidden" name="save_mode" value="{{ \Arr::get($request, 'save_mode', '') }}">
                    @if(!empty($files))
                        @foreach($files as $id => $file)
                            <input type="hidden" name="files[{{$id}}][id]" value="{{ \Arr::get($file, 'id') }}" id="file_id{{$id}}">
                            <input type="hidden" name="files[{{$id}}][name]" value="{{ \Arr::get($file, 'name') }}" id="file_name{{$id}}">
                        @endforeach
                    @endif
                    <input type="hidden" name="is_designated_clinic_org" value="{{ \Arr::get($request, 'is_designated_clinic_org', '') }}">
                    <input type="hidden" name="target_clinic_id_org" value="{{ \Arr::get($request, 'target_clinic_id_org', '') }}">
                    <input type="hidden" name="files_id_org" value="{{ \Arr::get($request, 'files_id_org', '') }}">
                </form>
                <form action="post">  
                    <p 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-12" 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 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}}>
                                                    [{!! __("clinic-repair-request.create03.button_file_delete") !!}]
                                                </button>
                                            </p>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="col-md-8" style="margin:50px 0px">
                    @if(Gate::forUser(\Auth::user())->allows('employeeOperation', 'event|3') && \Arr::get($request, 'save_mode', '') == 'update')
                        <div class="row">
                            <div class="col-md-3">
                                <button type="button" id="btn-back" class="btn btn-block button-back btn-lg rounded-pill">戻る</button>
                            </div>
                            <div class="col-md-3">
                                <button type="submit" id="btn-submit" class="btn btn-block button-go btn-lg rounded-pill" form="step2Form">登録する</button>
                            </div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3">
                                <button type="button" class="btn btn-block button-red btn-lg rounded-pill" data-toggle="modal" data-target="#delete">削除する</button>
                            </div>
                        </div>
                    @else
                        <div class="row">
                            <div class="col-md-4">
                                <button type="button" id="btn-back" class="btn btn-block button-back btn-lg rounded-pill">戻る</button>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" id="btn-submit" class="btn btn-block button-go btn-lg rounded-pill" form="step2Form">登録する</button>
                            </div>
                        </div>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@if(Gate::forUser(\Auth::user())->allows('employeeOperation', 'event|2') && \Arr::get($request, 'save_mode', '') == 'update')
    @include('admin.event.modal.delete', ['group_id' => \Arr::get($request, 'group_id', '')])
@endif
@stop

@section('js')
<script type="text/javascript" src="/vendor/select2/select2.min.js"></script>
<script type="text/javascript" src="/vendor/select2/ja.js"></script>
<script src="/js/upload/base.js" type="module"></script>
<script src="/js/upload/ajaxForEvent.js" type="module"></script>
<script type="module">
import AjaxForEvent from '/js/upload/ajaxForEvent.js';
const ajaxUpload = new AjaxForEvent('file', 'dropArea', 'uploadFileList','step2Form', false);
</script>
<script>
$(function() {
    // お知らせ対象選択変更(チェックボックス押下)イベント
    $('.target_clinic').on('change', function(){
        // イスラエル/インドネシア/その他海外押下時の処理
        let checkedIsOverseaIsrael = $('#is_oversea_israel:checked').val();
        let checkedIsOverseaIndonesia = $('#is_oversea_indonesia:checked').val();
        let checkedIsOverseaOther = $('#is_oversea_other:checked').val();
        if(
            $(this).hasClass('is_oversea') &&
            !checkedIsOverseaIsrael &&
            !checkedIsOverseaIndonesia &&
            !checkedIsOverseaOther
        ){
            $('#is_oversea').prop('checked', false);
            $('.is_oversea').prop('disabled', true);
        }
        let checkedIsdomesticDentistry = $('#is_domestic_dentistry:checked').val();
        let checkedIsdomesticVeterinary = $('#is_domestic_veterinary:checked').val();
        let checkedIsdomesticMedical = $('#is_domestic_medical:checked').val();
        let checkedIsdomesticOthers = $('#is_domestic_others:checked').val();
        let checkedIsOversea = $('#is_oversea:checked').val();
        // 対象医院欄の有効/無効化
        if(
            !checkedIsdomesticDentistry &&
            !checkedIsdomesticVeterinary &&
            !checkedIsdomesticMedical &&
            !checkedIsdomesticOthers &&
            !checkedIsOversea
        ){
            $('#target_clinic_id').prop('disabled', false);
        }else{
            $('#target_clinic_id').prop('disabled', true);
            $('#target_clinic_id').val(null).trigger('change');
        }
        // お知らせ対象(海外)関連チェックボックスの状態変更
        if(!$(this).hasClass('is_oversea')){
            if(checkedIsOversea){
                $('.is_oversea').prop('disabled', false);
                $('.is_oversea').prop('checked', true);
            }else{
                $('.is_oversea').prop('disabled', true);
                $('.is_oversea').prop('checked', false);
            }
        }
        if($('.target_clinic:checked').length == 0 && $('#target_clinic_id').val().length == 1){
            $('#is_video_chat').prop('disabled', false);
        }else{
            $('#is_video_chat').prop('disabled', true);
        }
    });

    // 対象医院イベント
    $('#target_clinic_id').on('change', function(){
        if($(this).val().length == 1 && $('.target_clinic:checked').length == 0){
            $('#is_video_chat').prop('disabled', false);
        }else{
            $('#is_video_chat').prop('disabled', true);
        }
    });

    // [戻る]ボタン押下時イベント処理
    $("#btn-back").on('click', function(){
        let url = $("#step2Form").attr('action');
        $("#keys").val('back');
        $(this).prop('disabled', true);
        $("#step2Form").attr('action', url.replace("{{\Arr::get($request, 'save_mode', '')}}", "{{\Arr::get($request, 'edit_mode', '')}}/step1"));
        $("#step2Form").submit();
    });

    // 対象医院選択欄初期化
    $('#target_clinic_id').select2({
        width: '100%',
        multiple: true, //複数選択可能
        maximumSelectionLength: 50,
        minimumInputLength: 1,
        placeholder: "選択してください", //プレースホルダーを設定
        allowClear: true, //下矢印を消去
        closeOnSelect: false, //選択するたびに閉じないよう設定
        language: 'ja' // Select2のメッセージに使用する言語を指定
        ,ajax: {
            url: "{{ route('admin.news.clinicSearch') }}",
            type:'POST',
            headers: {
              "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            dataType: 'json',
            delay: 250, //# 入力から検索開始までの待ち時間
            data: function(params) {
              return {
                  q: params.term,
              }
            },
            processResults: function(data, params){
              var results = [];
              data.forEach(function(val){
                results.push({id: val['id'] + '_' + val['name'] , text: val['name']});
              });
              return {
                results: results
              };
            }
         },
    });

    // 対象医院選択内容の設定
    let checkedIsdomesticDentistry = $('#is_domestic_dentistry:checked').val();
    let checkedIsdomesticVeterinary = $('#is_domestic_veterinary:checked').val();
    let checkedIsdomesticMedical = $('#is_domestic_medical:checked').val();
    let checkedIsdomesticOthers = $('#is_domestic_others:checked').val();
    let checkedIsOversea = $('#is_oversea:checked').val();
    if(
        !checkedIsdomesticDentistry &&
        !checkedIsdomesticVeterinary &&
        !checkedIsdomesticMedical &&
        !checkedIsdomesticOthers &&
        !checkedIsOversea
    ){
        $('#target_clinic_id').prop('disabled', false);
        let results = [];
        @php
            $aryTargetClinicId = \Arr::get($request, 'target_clinic_id', '');
        @endphp
        @if(!empty($aryTargetClinicId))
            @foreach($aryTargetClinicId as $targetClinicInfo)
                @php
                    $targetClinicInfo = explode('_', $targetClinicInfo);
                @endphp
                results.push('{{$targetClinicInfo[0] . '_' . $targetClinicInfo[1]}}');
            @endforeach
        @endif
        $('#target_clinic_id').val(results);
        $('#target_clinic_id').trigger('change');
    }else{
        $('#target_clinic_id').prop('disabled', true);
    }

    // イスラエル/インドネシア/その他海外、対象医院欄の有効/無効初期化
    if(checkedIsOversea){
        $('.is_oversea').prop('disabled', false);
    }else{
        $('.is_oversea').prop('disabled', true);
        $('.is_oversea').prop('checked', false);
    }

    // ビデオ通話チェックボックス有効/無効初期化
    if($('#target_clinic_id').val().length == 1 && $('.target_clinic:checked').length == 0){
        $('#is_video_chat').prop('disabled', false);
    }else{
        $('#is_video_chat').prop('disabled', true);
    }
});
</script>
@stop

@section('css')
<link rel="stylesheet" href="/vendor/select2/select2.min.css">
<link rel="stylesheet" href="/vendor/select2/select2-bootstrap4.min.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>
.select2-container--default .select2-dropdown .select2-search__field:focus,
.select2-container--default .select2-search--inline .select2-search__field:focus {
    outline: 0;
    border: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #0d6efd;
}
</style>
@stop