@extends('layouts.app')
@section('title')
    AREA EDIT
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('area.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
<style>
    .tooltip-arrow{
   display: none !important;
   width: 0px !important;
   height: 0px !important;

}
 .tooltip-inner{
   display: none !important;
   width: 0px !important;
   height: 0px !important;
}

</style>
    <div class="card">
        <form method="post" action="{{ route('area.update', $area->id) }}">
            @csrf
            <div class="card-body">
                <div class="row mb-4">
                     <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="name">Area Name</label>
                            <div class="col-5">
                                <input type="text" class="form-control rounded-4" id="name" name="name"
                                    value="{{ $area->name }}" placeholder="Enter Name">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="code">Area Code</label>
                            <div class="col-5">
                                <input type="text" class="form-control rounded-4" id="code" name="code"
                                    value="{{ $area->code }}" placeholder="Enter Code">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                       <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            @php
                                 $rackIds = json_decode($area->rack_id, true);
                                 $racks = \App\Models\AreaRack::whereIn('id', $rackIds)->get();
                            @endphp
                            <label class="form-label col-4" for="area_rack">Rack</label>
                            <div class="col-5">
                                <select class="form-select" id="area_rack" name="area_rack[]" multiple style="width: 100% !important;">
                                @foreach ($racks as $rack)
                                    <option value="{{ $rack->id }}" selected>
                                        {{ $rack->name }}</option>
                                @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="department">Department</label>
                            <div class="col-5">
                                <select class="form-select" id="department" name="department" style="width: 100% !important;">
                                    <option value="" selected disabled>Select Department</option>
                                    <option value="Warehouse" @selected($area->department == 'Warehouse')>Warehouse</option>
                                    <option value="Production" @selected($area->department == 'Production')>Production</option>
                                    <option value="Finish Good" @selected($area->department == 'Finish Good')>Finish Good</option>
                                    <option value="Maintenance" @selected($area->department == 'Maintenance')>Maintenance</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>


                </div>
            <div class="card-footer">
                <div class="d-flex gap-2 justify-content-end">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function(){
            function initSelect2WithAjax(selector, placeholder, route) {
                $(selector).select2({
                    placeholder: placeholder,
                    ajax: {
                        url: route,
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                                page: params.page || 1
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;

                            return {
                                results: $.map(data.items, function(item) {
                                    return {
                                        text: item.name,
                                        id: item.id,
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
            initSelect2WithAjax('#area_rack', 'Select Rack', '{{ route("area-rack.search") }}');
        });
    </script>
@endsection