@extends('layouts.admin')

@push('styles')
    <link href="{{ asset('assets/build/css/virtual-select.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/build/css/tooltip.min.css') }}" rel="stylesheet">
@endpush

@push('script')
    <script src="{{ asset('assets/build/js/virtual-select.min.js') }}"></script>
    <script src="{{ asset('assets/build/js/tooltip.min.js') }}"></script>
@endpush

@section('content')
    <div>
        <div class="page-title">
            <div class="title_left">
                <h3>Editează Locație</h3>
            </div>

            <div class="title_right">
                <div class="col-md-5 col-sm-5  form-group pull-right top_search">
                    <a href = "{{ url('admin/locations') }}" class= "btn btn-primary float-right"><span
                            class="fa fa-chevron-left"></span>Înapoi la locații</a>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 ">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Administrează Locații <small>Editează Locația</small></h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <br />
                        <form id="demo-form2" data-parsley-validate method="POST"
                            action="{{ route('locations.update', $location->id) }}" class="form-horizontal form-label-left">
                            @csrf
                            @method('PUT')

                            <div class="item form-group">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="mnemonic">Abreviere <span
                                        class="required">*</span>
                                </label>
                                <div class="col-md-6 col-sm-6 ">
                                    <input type="text" id="mnemonic" name="mnemonic" value="{{ $location->mnemonic }}"
                                        class="form-control ">
                                    @error('mnemonic')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="mnemonic">Judetul <span
                                        class="required">*</span>
                                </label>
                                <div class="col-md-6 col-sm-6 ">
                                    <input type="text" id="county" name="county" value="{{ $location->county }}"
                                        class="form-control ">
                                    @error('county')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ip">IP
                                </label>
                                <div class="col-md-6 col-sm-6 ">
                                    <input type="text" id="ip" name="ip" value="{{ $location->ip }}"
                                        class="form-control ">
                                    @error('ip')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ip">IP LED(3)
                                </label>
                                <div class="col-md-6 col-sm-6 ">
                                    <input type="text" id="ip_3" name="ip_3"
                                        value="{{ $location->attr['ip_3'] ?? null }}" class="form-control ">
                                    @error('ip_3')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="ip">IP LED(6)
                                </label>
                                <div class="col-md-6 col-sm-6 ">
                                    <input type="text" id="ip_6" name="ip_6"
                                        value="{{ $location->attr['ip_6'] ?? null }}" class="form-control ">
                                    @error('ip_6')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="email">Email <span
                                        class="required">*</span>
                                </label>
                                <div class="col-md-6 col-sm-6 ">
                                    <input type="email" id="email" name="email" value="{{ $location->email }}"
                                        class="form-control ">
                                    @error('email')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="item form-group">
                                <span class="control-label col-md-3 col-sm-3 label-align" for="languages">Traduceri <span
                                        class="required">*</span></span>

                                <div id="dropdown_container" class="col-md-9 col-sm-9">
                                </div>
                                @error('languages')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="item form-group">
                                <label class="col-form-label col-md-3 col-sm-3 label-align"
                                    for="display_bright">Luminozitate afișoare <span class="required">*</span>
                                </label>
                                <div class="col-md-6 col-sm-6 ">
                                    <input type="number" id="display_bright" name="display_bright" class="form-control"
                                        min="1" max="49" value="{{ $location->display_bright }}">
                                    @error('display_bright')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="ln_solid"></div>
                            <div class="item form-group">
                                <div class="col-md-6 col-sm-6 offset-md-3">
                                    <button style="display:none" class="btn btn-primary" type="reset">Resetează
                                    </button>
                                    <button type="submit" class="btn btn-success">Actualizează </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                const addDropdownDivToDomAndReturnId = () => {
                    const newid = 'div_' + Math.floor(Math.random() * (1000000 - 5000 + 1) + 5000);
                    const containerSelector = 'dropdown_container';
                    const container = document.getElementById(containerSelector);
                    container.replaceChildren();
                    let newDropdownDiv = document.createElement("div");
                    newDropdownDiv.setAttribute('id', newid);
                    newDropdownDiv.style["min-width"] = "50vw";
                    container.appendChild(newDropdownDiv);
                    return newid;
                };
                const divid = addDropdownDivToDomAndReturnId();
                const selector = '#' + divid;
                const languages = {{ Illuminate\Support\Js::from($languages) }};
                let selectedLanguages = {{ Illuminate\Support\Js::from($location->attr['languages']) }};
                VirtualSelect.init({
                    ele: selector,
                    options: languages,
                    multiple: true,
                    search: false,
                    selectedValue: selectedLanguages,
                    placeholder: 'Alege limbile folosite',
                    showValueAsTags: true,
                    silentInitialValueSet: true,
                    emptyValue: [],
                    additionalClasses: 'col-md-6 col-sm-6',
                    noOptionsText: 'Nu mai există limbi disponibile.',
                    search: true,
                    required: true,
                    name: "languages",
                });
            });
        </script>
    </div>
@endsection