@extends('adminlte::page')

@section('title', '修理対象外機器PDF編集')

@section('content_header')
    <h5><label class="title-underbar">修理対象外機器PDF編集</label></h5>
@stop
@section('content')
    <x-admin.success-flush-message />
    <x-admin.error-flush-message />
    <x-admin.validation-message />
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <form method="post" action="{{ route('admin.notRepairPdf.update', $medicalCategoryExcludedEquipmentDocument->id) }}">
                @csrf
                    <div class="card-body">
                        <div class="form-group row">
                            <div class="col-2"><label>名称</label></div>
                            <div class="col-10">
                                <span>
                                    {{ $medicalCategoryExcludedEquipmentDocument->department_prefix_ja }}{{ $medicalCategoryExcludedEquipmentDocument->medicalCategory->department_ja }}
                                </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-2"><label class="col-form-label">公開設定</label></div>
                            <div class="col-10">
                                <div class="form-check" style="padding-top:8px;">
                                    <input class="form-check-input" type="checkbox" value="1" name="is_display" id="is_display" {{ $medicalCategoryExcludedEquipmentDocument->is_display ? 'checked="checked"' : '' }}>
                                    <label class="form-check-label" for="is_display">公開する</label>
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-end" style="margin-top:1rem; margin-bottom:0.5rem;">
                            <div class="col-mb-12" style="padding:0px 7.5px;">
                                <button type="button" id="add_row" class="btn btn-sm btn-block button-go rounded-pill" data-toggle="modal" data-target="#add">追加</button>
                            </div>
                        </div>
                        <table class="table">
                            <thead class="thead-light">
                                <tr>
                                    <th style="width: 40%">言語</th>
                                    <th style="width: 45%">修理対象外機器PDF</th>
                                    <th style="width: 15%" align="center">削除</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(!empty($medicalCategoryExcludedEquipmentDocument->medicalCategoryExcludedEquipmentDocumentLanguage) && $medicalCategoryExcludedEquipmentDocument->medicalCategoryExcludedEquipmentDocumentLanguage->count() > 0)
                                    @php
                                        $rowIndex = 1;
                                    @endphp
                                    @foreach($medicalCategoryExcludedEquipmentDocument->medicalCategoryExcludedEquipmentDocumentLanguage as $medicalCategoryExcludedEquipmentDocumentLanguage)
                                        <tr class="row_data" data-index="{{ $rowIndex }}">
                                            <td class="col_language">
                                                <a class="language_id" href="javascript:void(0);">{{ $medicalCategoryExcludedEquipmentDocumentLanguage->language->name_ja }}</a>
                                                <input type="hidden" class="language_id" name="language_id[]" value="{{ $medicalCategoryExcludedEquipmentDocumentLanguage->language_id }}">
                                            </td>
                                            <td class="col_file">
                                                @if(!empty($medicalCategoryExcludedEquipmentDocumentLanguage->file))
                                                    <a class="file_id" href="{{ \App\Models\File::getFileDomain() }}{{ $medicalCategoryExcludedEquipmentDocumentLanguage->file->url }}">{{ $medicalCategoryExcludedEquipmentDocumentLanguage->file->original_file_name }}</a>
                                                    <input type="hidden" class="file_id" name="file_id[]" value="{{ $medicalCategoryExcludedEquipmentDocumentLanguage->file->id }}">
                                                @endif
                                            </td>
                                            <td class="col_delete" align="center">
                                                <button type="button" class="delete_row btn btn-sm btn-block button-go rounded-pill">削除</button>
                                            </td>
                                        </tr>
                                        @php
                                            $rowIndex = $rowIndex + 1;
                                        @endphp
                                    @endforeach
                                @else
                                    <tr class="no_data" data-index="0">
                                        <td colspan="3" align="center">登録されていません。</td>
                                    </tr>
                                @endif 
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-md-6">
                                <button type="button" onclick="location.href='{{ route('admin.notRepairPdf.index') }}'" class="btn btn-sm btn-block button-back rounded-pill">キャンセル</button>
                            </div>
                            <div class="col-md-6">
                                <button id="register" type="submit" class="btn btn-sm btn-block button-go rounded-pill">更新する</button>
                                <input type="hidden" name="updated_at" value="{{ $medicalCategoryExcludedEquipmentDocument->updated_at }}">
                            </div>
                        </div>
                    </div>
                </form>
                <div style="display:none;">
                    <table>
                        <tr id="template_row" class="row_data">
                            <td class="col_language">
                                <a class="link_language_id language_id" href="javascript:void(0);"></a>
                                <input type="hidden" class="language_id" name="language_id[]" value="">
                            </td>
                            <td class="col_file">
                                <a class="link_file_id file_id" href="javascript:void(0);"></a>
                                <input type="hidden" class="file_id" name="file_id[]" value="">
                            </td>
                            <td class="col_delete" align="center">
                                <button type="button" class="delete_row btn btn-sm btn-block button-go rounded-pill">削除</button>
                            </td>
                        </tr>
                        <tr id="template_row_no_data" class="no_data" data-index="0">
                            <td colspan="3" align="center"></td>
                        </tr>
                    </table>
                    <div>
                        <input type="hidden" id="domain" name="domain" value="{{ \App\Models\File::getFileDomain() }}">
                    </div>
                </div>
            </div>
        </div>
    </div>
@include('admin.notRepairPdf.modal.add')
@include('admin.notRepairPdf.modal.edit')
@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
<link rel="stylesheet" href="/css/fileupload_drag&drop.css">
<link rel="stylesheet" href="/vendor/select2/select2.min.css">
<link rel="stylesheet" href="/vendor/select2/select2-bootstrap4.min.css">
<style>
    .select2-selection__rendered {
        line-height: 28px !important;
    }
    .select2-container .select2-selection--single {
        height: 38px !important;
    }
    .select2-selection__arrow {
        height: 34px !important;
    }
</style>
@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 type="module" src="/js/upload/base.js"></script>
<script type="module" src="/js/upload/ajaxForNotRepairPdf.js"></script>
<script type="module">
    // ファイルアップロード/削除に関するイベント処理を予定登録/編集ダイアログの画面部品にアタッチ
    import AjaxForNotRepairPdf from '/js/upload/ajaxForNotRepairPdf.js';
    document.addEventListener("DOMContentLoaded", () => {
        const ajaxUploadStore = new AjaxForNotRepairPdf('fileStore', 'dropAreaStore', 'uploadFileListStore','pdfStoreForm');
        const ajaxUploadUpdate = new AjaxForNotRepairPdf('fileUpdate', 'dropAreaUpdate', 'uploadFileListUpdate','pdfUpdateForm');
    });

    $(function() {
        $('button.delete_row').click(deleteRow);
        $('a.language_id').click(updateRow);

        $('#btn_add').click(function(){
            $('input#file_id_add').val($('button.delete-button').first().attr('data-id'));
            $('div.add_error_msg').empty().hide();
            $.ajax({
                type: $('form#addRowForm').attr('method'),
                url: $('form#addRowForm').attr('action'),
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                dataType: "json",
                data: $('form#addRowForm').serialize(),
            }).done(function(results) {
                if(results.isError){
                    if(results.language_id){
                        results.language_id.forEach(errorMsg => {
                            $('#add_error_language_id').append(errorMsg + '<br>');
                        });
                        $('#add_error_language_id').show();
                    }

                    if(results.file_id){
                        results.file_id.forEach(errorMsg => {
                            $('#add_error_file_id').append(errorMsg + '<br>');
                        });
                        $('#add_error_file_id').show();
                    }
                }else{
                    let selectedLanguageId = $('select#add_language_id').val();
                    if($('input.language_id[value="' + selectedLanguageId + '"]').length > 0){
                        $('#add_error_language_id').append('同じ言語の修理対象外機器PDFが既に存在します。' + '<br>');
                        $('#add_error_language_id').show();
                        return false;
                    }

                    let row = $('tr#template_row').clone();
                    let lastTrElement = $('table.table tbody tr.row_data:last');
                    let indexLastRow = 0;
                    if(lastTrElement.length > 0){
                        indexLastRow = $(lastTrElement).attr('data-index');
                    }
                    if(!indexLastRow){
                        $('table.table tbody').empty();
                    }
                    $(row).attr('data-index', Math.trunc(indexLastRow) + 1).attr('id', '');

                    $(row).find('a.link_language_id').text($('select#add_language_id option[value="' + selectedLanguageId + '"]').text());
                    $(row).find('a.link_language_id').click(updateRow);
                    $(row).find('input.language_id').val(selectedLanguageId).removeClass('link_language_id');

                    $(row).find('a.link_file_id').attr('href', $('input#domain').val() + $('input[id^="file_url"]').first().val());
                    $(row).find('a.link_file_id').text($('div#uploadFileListStore span').first().text()).removeClass('link_file_id');
                    $(row).find('input.file_id').val($('input#file_id_add').val());

                    $(row).show().appendTo('table.table tbody');
                    $('button.delete_row').off();
                    $('button.delete_row').click(deleteRow);

                    $('#add').modal('hide');
                }
            }).fail(function(results) {
                console.log(results);
            });
        });

        $('#btn_update').click(function(){
            $('input#file_id_update').val($('button.delete-button').first().attr('data-id'));
            $('div.update_error_msg').empty().hide();
            $.ajax({
                type: $('form#updateRowForm').attr('method'),
                url: $('form#updateRowForm').attr('action'),
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                dataType: "json",
                data: $('form#updateRowForm').serialize(),
            }).done(function(results) {
                if(results.isError){
                    if(results.language_id){
                        results.language_id.forEach(errorMsg => {
                            $('#update_error_language_id').append(errorMsg + '<br>');
                        });
                        $('#update_error_language_id').show();
                    }

                    if(results.file_id){
                        results.file_id.forEach(errorMsg => {
                            $('#update_error_file_id').append(errorMsg + '<br>');
                        });
                        $('#update_error_file_id').show();
                    }
                }else{
                    let selectedLanguageId = $('select#update_language_id').val();
                    let rowIndex = $('input#update_row_index').val();
                    if($('tr[data-index!="' + rowIndex + '"] input.language_id[value="' + selectedLanguageId + '"]').length > 0){
                        $('#update_error_language_id').append('同じ言語の修理対象外機器PDFが既に存在します。' + '<br>');
                        $('#update_error_language_id').show();
                        return false;
                    }
                    let rowElement = $('tr[data-index="' + $('input#update_row_index').val() + '"]');
                    $(rowElement).find('a.language_id').text($('select#update_language_id option[value="' + selectedLanguageId + '"]').text());
                    $(rowElement).find('input.language_id').val(selectedLanguageId);
                    $(rowElement).find('a.file_id').attr('href', $('input#domain').val() + $('form#pdfUpdateForm input[id^="file_url"]').first().val());
                    $(rowElement).find('a.file_id').text($('div#uploadFileListUpdate span').first().text());
                    $(rowElement).find('input.file_id').val($('input#file_id_update').val());
                    $('#update').modal('hide');
                }
            }).fail(function(results) {
                console.log(results);
            });
        });

        $('#add').on('hidden.bs.modal', function (e) {
            $('div#add div.alert').empty().hide();
            $('select#add_language_id').val('');
            $('#add div#uploadFileListStore').empty();
            $('form#pdfStoreForm input[id^="file_"]').remove();
        });

        $('#update').on('hidden.bs.modal', function (e) {
            $('div#update div.alert').empty().hide();
            $('div#update select#update_language_id').val('');
            $('div#update div#uploadFileListUpdate').empty();
            $('form#pdfUpdateForm input[id^="file_"]').remove();
        });

        // 行編集ボタン押下時処理
        function updateRow(){
            let rowIndex = $(this).parents('tr.row_data').attr('data-index');
            // update_row_index
            $('input#update_row_index').val(rowIndex);


            $('select#update_language_id').val($(this).next().val());
            $('#update').modal('show');
        }

        // 行削除ボタン押下時処理
        function deleteRow(){
            $(this).parents('tbody tr').remove();
            let lastTrElement = $('table.table tbody tr.row_data:last');
            if(lastTrElement.length == 0){
                let row = $('tr#template_row_no_data').clone();
                $(row).show().appendTo('table.table tbody');
            }
        }
    });
</script>
@stop