@extends('layouts.master')
@section('title')
    @lang('translation.dashboards')
@endsection
@section('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
        crossorigin="" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        #map {
            height: 500px;
        }
    </style>
    <link href="{{ URL::asset('build/libs/jsvectormap/css/jsvectormap.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
    @if (session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
    <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <!-- Info Alert -->
                    <div class="alert alert-info alert-dismissible alert-label-icon label-arrow fade show material-shadow"
                        role="alert">
                        <i class="ri-airplay-line label-icon"></i><strong>Informasi</strong> - Pastikan seluruh kolom data
                        terisi!
                    </div>

                    <div class="card">
                        <form action="{{ route('administrator.update', $administrator) }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row card-header">
                                <h4 class="card-title mt-2 col"><i class="ri-admin-fill me-1"></i>Edit Administrator</h4>
                                <div class="col-auto align-content-center">
                                    <div class="text-end">
                                        <button type="submit" class="btn btn-primary"><i
                                                class="ri-save-3-line me-1"></i>Submit</button>
                                    </div>
                                </div><!--end col-->
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="namapelanggan" class="form-label">Nama Pelanggan</label>
                                            <input type="text" class="form-control" placeholder="Masukkan nama pelanggan"
                                                name="name" id="namapelanggan" value="{{ $administrator->name }}"
                                                maxlength="25" required>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="telp" class="form-label">Nomor Telepon</label>
                                            <input type="tel" class="form-control"
                                                placeholder="Masukkan nomor telepon (contoh: 081234567890)" id="telp"
                                                name="telp" value="{{ $administrator->telp }}" required>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="email" class="form-label">Email</label>
                                            <input type="email" class="form-control"
                                                placeholder="Masukkan email lengkap (contoh: example@gamil.com)"
                                                id="email" name="email" value="{{ $administrator->email }}"
                                                maxlength="30" required>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="password-input">Password</label>
                                            <div class="position-relative auth-pass-inputgroup mb-3">
                                                <input name="password" type="password" class="form-control"
                                                    placeholder="Enter password" id="password-input">
                                                <button
                                                    class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-toggle"
                                                    type="button" id="password-addon"
                                                    style="height: 100%; width: 40px; z-index: 10;"><i
                                                        class="ri-eye-fill align-middle"></i></button>
                                            </div>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="autoSizingSelect" class="form-label">Status</label>
                                            <select name="status" class="form-select" data-choices
                                                data-choices-sorting="true" id="autoSizingSelect" required>
                                                <option value="Aktif" {{ old('status') == 'Aktif' ? 'selected' : '' }}>
                                                    Aktif</option>
                                                <option value="Tidak Aktif"
                                                    {{ old('status') == 'Tidak Aktif' ? 'selected' : '' }}>Tidak
                                                    Aktif</option>
                                            </select>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="join_date" class="form-label">Tanggal Registrasi</label>
                                            <input type="date" class="form-control" id="join_date" name="join_date"
                                                value="{{ $administrator->join_date }}" required>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="images">Foto customer</label><br>
                                            {{-- <img id="previewImage" class="mb-2" src="{{ $administrator->getImage() }}"
                                                width="100%" alt=""> --}}
                                            <input type="file" name="images"
                                                class="form-control @error('images') is-invalid @enderror" id="images">
                                            @error('images')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div><!--end col-->
                                </div><!--end row-->
                            </div>
                            <div class="card-footer bg-transparent border-top">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="address" class="form-label">Alamat Lengkap</label>
                                            <textarea class="form-control" id="address" name="address" rows="3" placeholder="Masukkan alamat lengkap">{{ $administrator->address }}</textarea>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="province" class="form-label">Provinsi</label>
                                            @php
                                                $provinces = new App\Http\Controllers\LocationController();
                                                $provinces = $provinces->provinces();
                                            @endphp
                                            <select id="province" name="province" class="form-select">
                                                <option value="{{ $administrator->province }}" selected>
                                                    {{ \Indonesia::findProvince($administrator->province)?->name ?? 'Pilih province' }}
                                                </option>
                                                @foreach ($provinces as $item)
                                                    <option value="{{ $item->id }}"
                                                        {{ $administrator->customer == $item->id ? 'selected' : '' }}>
                                                        {{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="regency" class="form-label">Kab/Kota</label>
                                            <select id="regency" name="regency" class="form-select">
                                                <option value="{{ $administrator->regency }}" selected>
                                                    {{ \Indonesia::findCity($administrator->regency)?->name ?? '-' }}
                                                </option>
                                            </select>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="district" class="form-label">Kecamatan</label>
                                            <select id="district" name="district" class="form-select">
                                                <option value="{{ $administrator->district }}" selected>
                                                    {{ \Indonesia::findDistrict($administrator->district)?->name ?? '-' }}
                                                </option>
                                            </select>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="village" class="form-label">Desa</label>
                                            <select id="village" name="village" class="form-select">
                                                <option value="{{ $administrator->village }}" selected>
                                                    {{ \Indonesia::findVillage($administrator->village)?->name ?? '-' }}
                                                </option>
                                            </select>
                                        </div>
                                    </div><!--end col-->
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endsection

        @section('script')
            <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
            <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
                integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
                crossorigin=""></script>
            <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

            <script>
                function onChangeSelect(url, id, name) {
                    // send ajax request to get the cities of the selected province and append to the select tag
                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: {
                            id: id
                        },
                        success: function(data) {
                            $('#' + name).empty();
                            $('#' + name).append('<option>==Pilih Salah Satu==</option>');

                            $.each(data, function(key, value) {
                                $('#' + name).append('<option value="' + key + '">' + value + '</option>');
                            });
                        }
                    });
                }
                $(function() {
                    $('#province').on('change', function() {
                        onChangeSelect('{{ route('cities') }}', $(this).val(), 'regency');
                    });
                    $('#regency').on('change', function() {
                        onChangeSelect('{{ route('districts') }}', $(this).val(), 'district');
                    })
                    $('#district').on('change', function() {
                        onChangeSelect('{{ route('villages') }}', $(this).val(), 'village');
                    })
                });
            </script>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const passwordToggle = document.getElementById('password-addon');
                    const passwordField = document.getElementById('password-input');

                    passwordToggle.addEventListener('click', function(e) {
                        console.log("Toggle password button clicked!");
                        e.preventDefault();
                        e.stopPropagation();

                        const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
                        passwordField.setAttribute('type', type);

                        const iconElement = this.querySelector('i');
                        if (type === 'text') {
                            iconElement.classList.remove('ri-eye-fill');
                            iconElement.classList.add('ri-eye-off-fill');
                        } else {
                            iconElement.classList.remove('ri-eye-off-fill');
                            iconElement.classList.add('ri-eye-fill');
                        }

                        // Hilangkan fokus/kursor dari field password
                        passwordField.blur();
                    });

                    passwordToggle.addEventListener('mousedown', function(e) {
                        e.preventDefault();
                    });
                });
            </script>
        @endsection