@extends('adminlte::page')

@section('title', '機器編集')

@section('content_header')
<h5><label class="title-underbar">機器編集</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" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
            <div class="card-body">
                <form method="POST" action="{{ route('productpromotion.admin.equipments.update', ['id' => $equipment->id]) }}" class="form-group mt-3" enctype='multipart/form-data'>
                    @csrf
                    <div class="form-group row">
                        <label for="name" class="col-sm-2 col-form-label medium-heading">機器名</label>
                        <div class="col-sm-4">
                            <input type="text" id="name" name="name" class="form-control main-text" placeholder="機器名を入力してください" value="{{ old('name') ?? $equipment->name}}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name_en" class="col-sm-2 col-form-label medium-heading">機器名(英語)</label>
                        <div class="col-sm-4">
                            <input type="text" id="name_en" name="name_en" class="form-control main-text" placeholder="機器名(英語)を入力してください" value="{{ old('name_en') ?? $equipment->name_en}}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="caution" class="col-sm-2 col-form-label medium-heading">注意事項</label>
                        <div class="col-sm-4">
                            <input type="text" id="caution" name="caution" class="form-control main-text" placeholder="注意事項を入力してください" value="{{ old('caution') ?? $equipment->caution}}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="caution_en" class="col-sm-2 col-form-label medium-heading">注意事項(英語)</label>
                        <div class="col-sm-4">
                            <input type="text" id="caution_en" name="caution_en" class="form-control main-text" placeholder="注意事項(英語)を入力してください" value="{{ old('caution_en') ?? $equipment->caution_en}}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="internal_name" class="col-sm-2 col-form-label medium-heading">ジャンル</label>
                        <div class="col-sm-4">
                            <select name="equipment_genre_id" class="form-control main-text">
                                @foreach (EquipmentGenreHelper::allEquipmentGenres() as $key => $value)
                                    @if (old('equipment_genre_id') && old('equipment_genre_id') === (string) $key)
                                        <option value="{{ $key }}" selected>{{ $value }}</option>
                                    @elseif (isset($equipment->equipment_genre_id) && $key === $equipment->equipment_genre_id)
                                        <option value="{{ $key }}" selected>{{ $value }}</option>
                                    @else
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="internal_name" class="col-sm-2 col-form-label medium-heading">並び順</label>
                        <div class="col-sm-4">
                            <input type="number" id="order_id" name="order_id" class="form-control main-text" placeholder="並び順を入力してください" value="{{ old('order_id') ?? $equipment->order_id}}" min="0">
                        </div>
                        <div class="col-sm-6 col-form-label">
                            <b id="notice_order_id" class="medium-heading" style="color: #FF0000"></b>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label medium-heading">現在の並び順</label>
                        <div class="col-sm-10 col-form-label">{{ $equipment->order_id }}(ジャンル：{{ EquipmentGenreHelper::allEquipmentGenres()[$equipment->equipment_genre_id] }})</div>
                        <input type="hidden" id="current_genre_id" value="{{ $equipment->equipment_genre_id }}" />
                        <input type="hidden" id="current_order_id" value="{{ $equipment->order_id }}" />
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label medium-heading">使用中の並び順</label>
                        <div class="col-sm-10 col-form-label" id="used_order_id"></div>
                    </div>

                    <table class="table">
                        <thead class="thead-light medium-heading">
                            <tr>
                                <th class="text-center">国内歯科向け</th>
                                <th class="text-center">海外歯科向け</th>
                                <th class="text-center">獣医科向け</th>
                                <th class="text-center">その他医科向け</th>
                            </tr>
                        </thead>
                        
                        <tbody class="main-text">
                            <tr>
                                <td class="text-center">
                                    <input type="checkbox" name="is_domestic_dentist" class="form-check-input" id="is_domestic_dentist" value="1"
                                        {{ old('is_domestic_dentist') || $equipment->is_domestic_dentist == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_domestic_dentist">対応する</label>
                                </td>
                                <td class="text-center">
                                    <input type="checkbox" name="is_foreign_dentist" class="form-check-input" id="is_foreign_dentist" value="1"
                                        {{ old('is_foreign_dentist') || $equipment->is_foreign_dentist == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_foreign_dentist">対応する</label>
                                </td>
                                <td class="text-center">
                                    <input type="checkbox" name="is_veterinary" class="form-check-input" id="is_veterinary" value="1"
                                        {{  old('is_veterinary') || $equipment->is_veterinary == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_veterinary">対応する</label>
                                </td>
                                <td class="text-center">
                                    <input type="checkbox" name="is_other_medical" class="form-check-input" id="is_other_medical" value="1"
                                        {{ old('is_other_medical') || $equipment->is_other_medical == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_other_medical">対応する</label>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <!--ファイルアップロード -->
                    <div class="form-group row">
                        <label for="internal_name" class="col-sm-2 col-form-label medium-heading">機器アイコン</label>
                        <div class="col-sm-4">
                            <input type="file" name="equipment_icon" class="custom-file-input main-text" id="inputFile">
                            <label class="custom-file-label main-text" for="inputFile" data-browse="参照">ファイルを選択(ここにドロップすることもできます)</label>
                            <sup>機器アイコンは.png形式のファイルを指定して下さい。</sup>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="internal_name" class="col-sm-2 col-form-label medium-heading">修理対応</label>
                        <div class="col-sm-4 sm-pl-3" style="padding-top:6px;">
                          <input type="checkbox" name="is_compatible" class="form-check-input" id="is_compatible" value="1"
                              {{ old('is_compatible') || $equipment->is_compatible == 1 ? 'checked' : '' }}>
                          <label class="form-check-label main-text" for="is_compatible" style="width:100%">対応する</label>
                        </div>
                    </div>

                    <a href="{{ route('productpromotion.admin.equipments.index') }}" class="btn btn-secondary btn-lg rounded-pill">キャンセル</a>
                    <button type="submit" class="btn button-go btn-lg rounded-pill">登録する</button>
                </form>

            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script>
    let orderIds = [];
    @foreach ($orderIdsByGenre as $genreId => $orderIds)
        orderIds[{{ $genreId }}] = [];
        @foreach ($orderIds as $orderId)
            @if (
                // 編集中の機器の並び順は別で持っているため格納しない
                $genreId != $equipment->equipment_genre_id
                || $orderId != $equipment->order_id
            )
                orderIds[{{ $genreId }}].push({{ $orderId }});
            @endif
        @endforeach
    @endforeach
	setOrderIds();
	validateOrderId();

    $('.custom-file-input').on('change',function(){
        $(this).next('.custom-file-label').html($(this)[0].files[0].name);
    });

    $('select[name="equipment_genre_id"]').on('change', function() {
        setOrderIds();
        validateOrderId();
        return false;
    })

    $('#order_id').on('keyup', function() {
        validateOrderId();
        return false;
    });

    function setOrderIds() {
        let genreId = $('select[name="equipment_genre_id"]').val();
        if (genreId) {
            // 使用中のものを表示
            $('#used_order_id').text(orderIds[genreId].join(', '));
            let val = $('#order_id').val();
            if (!val || isChanged()) {
                // 並び順が空欄の場合か現在値と違う値が入力されている場合のみ推奨値を設定する
                $('#order_id').val(orderIds[genreId].reduce((a, b) => Math.max(a, b), -Infinity) + 1);
            }
        } else {
            $('#used_order_id').empty();
        }
    }

    function validateOrderId() {
        let val = $('#order_id').val();
        let genreId = $('select[name="equipment_genre_id"]').val();
        if (val && genreId && isChanged()) {
            if ($.inArray(Number(val), orderIds[genreId]) !== -1) {
                $('#notice_order_id').text("使用されている値です。他の値を設定してください。");
                $('button[type="submit"]').prop('disabled', true);
            } else {
                $('#notice_order_id').empty();
                $('button[type="submit"]').prop('disabled', false);
            }
        } else {
            $('#notice_order_id').empty();
            $('button[type="submit"]').prop('disabled', false);
        }
    }

    function isChanged() {
        let val = $('#order_id').val();
        let genreId = $('select[name="equipment_genre_id"]').val();
        let currentGenreId = $('#current_genre_id').val();
        let currentOrderId = $('#current_order_id').val();
        return (genreId !== currentGenreId || val !== currentOrderId);
    }
</script>
@stop


@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop