@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.store') }}" class="form-group mt-3" enctype='multipart/form-data' onsubmit="$(this).find('button[type=submit]').prop('disabled', true);">
                    @csrf
                    <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="text" name="name" class="form-control main-text" placeholder="機器名を入力してください" value="{{ old('name') }}">
                        </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="text" name="name_en" class="form-control main-text" placeholder="機器名(英語)を入力してください" value="{{ old('name_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">
                            <input type="text" name="caution" class="form-control main-text" placeholder="注意事項を入力してください" value="{{ old('caution') }}">
                        </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="text" name="caution_en" class="form-control main-text" placeholder="注意事項(英語)を入力してください" value="{{ old('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">
                                <option value="">選択してください</option>
                                @foreach (EquipmentGenreHelper::allEquipmentGenres() as $key => $value)
                                    @if (old('equipment_genre_id') && old('equipment_genre_id') === (string) $key)
                                        <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') }}" 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" id="used_order_id"></div>
                    </div>

                    <table class="table">
                        <thead class="thead-light">
                            <tr>
                                <th class="text-center medium-heading">国内歯科向け</th>
                                <th class="text-center medium-heading">海外歯科向け</th>
                                <th class="text-center medium-heading">獣医科向け</th>
                                <th class="text-center medium-heading">その他医科向け</th>
                            </tr>
                        </thead>
                        
                        <tbody>
                            <tr>
                                <td class="text-center main-text">
                                    <input type="checkbox" name="is_domestic_dentist" class="form-check-input" id="is_domestic_dentist" value="1"
                                        {{ old('is_domestic_dentist') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_domestic_dentist">対応する</label>
                                </td>
                                <td class="text-center main-text">
                                    <input type="checkbox" name="is_foreign_dentist" class="form-check-input" id="is_foreign_dentist" value="1"
                                        {{ old('is_foreign_dentist') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_foreign_dentist">対応する</label>
                                </td>
                                <td class="text-center main-text">
                                    <input type="checkbox" name="is_veterinary" class="form-check-input" id="is_veterinary" value="1"
                                        {{  old('is_veterinary') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_veterinary">対応する</label>
                                </td>
                                <td class="text-center main-text">
                                    <input type="checkbox" name="is_other_medical" class="form-check-input" id="is_other_medical" value="1"
                                        {{ old('is_other_medical') ? '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" style="padding-top:6px;">
                          <input type="checkbox" name="is_compatible" class="form-check-input main-text" id="is_compatible" value="1">
                          <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)
            orderIds[{{ $genreId }}].push({{ $orderId }});
        @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(', '));
            // 使用中のものから最大値を選び、+1したものを入力欄にセットする
            $('#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) {
            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);
        }
    }
</script>
@stop

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