@extends('adminlte::page')

@section('title', '対象消耗品選択')

@section('content_header')
    <h5><label class="title-underbar">{{$ownOsadaEquipment->equipmentType->internal_name}}用消耗品選択</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">

                    <div class="form-group row">
                        <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:0px">
                            <input type="search" class="form-control" id="search" placeholder="絞り込み...">
                        </div>
                    </div>

                    @if ($typeConsumables->count() > 0)
                    <form method="POST" action="{{ route('productpromotion.admin.purchased-equipment.storeConsumable', ['clinic_id' => $clinic_id, 'own_osada_equipment_id' => $ownOsadaEquipment->id]) }}" class="form-group mt-3" enctype='multipart/form-data' onsubmit="$(this).find('button[type=submit]').prop('disabled', true);">
                        @csrf
                        <input type="hidden" name="own_osada_equipment_id" value="{{$ownOsadaEquipment->id}}" />
                        <div class="items-collection form-group row">
                            @foreach ($typeConsumables as $typeConsumable)
                                <div class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
                                    <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                        <label class="btn btn-default" id="consumable{{$typeConsumable->consumable->id}}">
                                            <input type="radio" name="consumable_id" autocomplete="off" value="{{$typeConsumable->consumable->id}}" style="display:none"  id="c{{$typeConsumable->consumable->id}}" onchange="setValue(this)">
                                            <h5>{{$typeConsumable->consumable->external_name}}</h5>
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <a href="{{ route('productpromotion.admin.purchased-equipment.consumable', ['clinic_id' => $clinic_id, 'own_osada_equipment_id' => $ownOsadaEquipment->id]) }}" class="btn btn-secondary btn-lg rounded-pill">キャンセル</a>
                        <button type="submit" class="btn button-go btn-lg rounded-pill">登録する</button>
                    </form>
                    @else
                    <div class="form-group row">
                        <div class="main-text col-md-12">
                            追加できる消耗品がありません。<br>
                            形式に追加したい消耗品を登録してください。
                        </div>
                        <div class="col-mb-4">
                            <a href="{{ route('productpromotion.admin.equipments.types.createConsumables', ['id' => $ownOsadaEquipment->equipment_type_id]) }}" class="btn btn-block btn-outline-primary rounded-pill">形式で利用できる消耗品追加</a>
                        </div>
                    </div>
                    @endif

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

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <style>
        #search {
            width:90%;
        }
        .items-collection{
            margin:20px 0 0 0;
        }
        .items-collection label.btn-default.active{
            background-color:#007ba7;
            color:#FFF;
        }
        .items-collection label.btn-default{
            width:90%;
            border:1px solid #305891;
            margin:5px; 
            border-radius: 17px;
            color: #305891;
        }
        .items-collection label .itemcontent{
            width:100%;
        }
        .items-collection .btn-group{
            width:90%
        }
        .items-collection .active{
            background-color: #3058b1;
            color: #fff !important;
        }
    </style>
@stop

@section('js')
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script>
    $(function () {
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

        $('#search').on('keyup', function () {
            var pattern = $(this).val();
            $('.items-collection .items').hide();
            $('.items-collection .items').filter(function () {
                return $(this).text().match(new RegExp(pattern, 'i'));
            }).show();
        });
    });
    var selected_id = 0;
    function setValue(element) {
        $('#consumable' + element.value).addClass('active');
        if (selected_id != 0) {
            $('#consumable' + selected_id).removeClass('active');
        }
        selected_id = element.value;
    }
</script>
@stop