@extends('layouts.app')
@section('title')
 RACK EDIT
@endsection
@section('button')
<a type="button" class="btn btn-info" href="{{ route('area_rack.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_rack.update', $area_rack->id) }}">
        @csrf
        <div class="card-body">
            <div class="row mb-2">
                <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="level_name">Rack Name:</label>
                        <div class="col-6">
                            <input type="text" class="form-control rounded-4" id="name" name="name"
                                value="{{ $area_rack->name }}" placeholder="Enter Name" style="border-radius: 10px;">
                        </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">Rack Code:</label>
                        <div class="col-6">
                            <input type="text" class="form-control rounded-4" id="code" name="code"
                                value="{{ $area_rack->code }}" placeholder="Enter Code" style="border-radius: 10px;">
                        </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="area_level">Level:</label>
                        <div class="col-6">
                                @php
                                    $levelIds = json_decode($area_rack->level_id, true);
                                    $levels = \App\Models\Arealevel::whereIn('id', $levelIds)->get();
                                @endphp
                            
                            <select class="form-select" id="area_level" name="area_level[]" multiple style="width: 100% !important;">
                                @foreach($levels as $level)
                                    <option value="{{ $level->id }}" selected>{{ $level->name }}</option>
                                @endforeach
                            </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_level', 'Select Level', '{{ route("area_level.search") }}');
        });
</script>
@endsection