@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('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </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 class="form-sample" action="{{ route('administrator.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row card-header">
                                <h4 class="card-title mt-2 col"><i class="ri-admin-fill me-1"></i>Tambah 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="namaadmin" class="form-label">Nama Admin</label>
                                            <input type="text" class="form-control" placeholder="Masukkan nama admin"
                                                name="name" id="namaadmin" value="{{ old('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="{{ old('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="{{ old('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>
                                    <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="{{ old('join_date') }}" required>
                                        </div>
                                    </div>
                                </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">{{ old('address') }}</textarea>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="provinsi" class="form-label">Provinsi</label>
                                            <select id="provinsi" name="province" class="form-select">
                                                <option selected value="">Pilih Provinsi</option>
                                                @foreach ($provinces as $item)
                                                    <option value="{{ $item->id ?? '' }}">{{ $item->name ?? '' }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="kota" class="form-label">Kab/Kota</label>
                                            <select id="kota" name="regency" class="form-select">
                                                <option selected value="">Pilih Kab/Kota</option>
                                                <option>...</option>
                                            </select>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="kecamatan" class="form-label">Kecamatan</label>
                                            <select id="kecamatan" name="district" class="form-select">
                                                <option selected value="">Pilih Kecamatan</option>
                                                <option>...</option>
                                            </select>
                                        </div>
                                    </div><!--end col-->
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="desa" class="form-label">Desa</label>
                                            <select id="desa" name="village" class="form-select">
                                                <option selected value="">Pilih Desa</option>
                                                <option>...</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </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() {
            $('#provinsi').on('change', function() {
                onChangeSelect('{{ route('cities') }}', $(this).val(), 'kota');
            });
            $('#kota').on('change', function() {
                onChangeSelect('{{ route('districts') }}', $(this).val(), 'kecamatan');
            })
            $('#kecamatan').on('change', function() {
                onChangeSelect('{{ route('villages') }}', $(this).val(), 'desa');
            })
        });
    </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