@extends('layout.main')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header border-bottom mb-4 d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Tambah User Baru</h5>
            <a href="{{ route('users.index') }}" class="btn btn-sm btn-label-secondary">
                <i class="ti tabler-arrow-left me-1"></i> Kembali
            </a>
        </div>

        <div class="card-body">
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <form id="formAddUser" action="{{ route('users.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <h6 class="mb-3">Informasi Akun</h6>
                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-nama">Nama Lengkap<span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('nama') is-invalid @enderror" id="add-profile-nama" name="nama" value="{{ old('nama') }}" />
                        @error('nama')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-email">Email<span class="text-danger">*</span></label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="add-profile-email" name="email" value="{{ old('email') }}" />
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-username">Nama Akun<span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('username') is-invalid @enderror" id="add-profile-username" name="username" value="{{ old('username') }}" />
                        @error('username')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-role">Role<span class="text-danger">*</span></label>
                        <select id="add-profile-role" name="role" class="select2 form-select @error('role') is-invalid @enderror" data-placeholder="Pilih Role">
                            <option value="">Pilih Role</option>
                            @foreach($roles as $roleEnum)
                                <option value="{{ $roleEnum->value }}" {{ old('role', \App\Enums\Role::PETANI->value) === $roleEnum->value ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $roleEnum->value)) }}
                                </option>
                            @endforeach
                        </select>
                        @error('role')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-telepon">No. Telepon<span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('telepon') is-invalid @enderror" id="add-profile-telepon" name="telepon" value="{{ old('telepon') }}" />
                        @error('telepon')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation form-password-toggle">
                        <label class="form-label" for="add-profile-password">Password<span class="text-danger">*</span></label>
                        <div class="input-group input-group-merge">
                            <input type="password" id="add-profile-password" name="password" class="form-control @error('password') is-invalid @enderror" />
                            <button type="button" class="input-group-text cursor-pointer password-toggle" aria-label="Lihat password">
                                <i class="ti tabler-eye-off"></i>
                            </button>
                        </div>
                        @error('password')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6 mb-4 form-control-validation form-password-toggle">
                        <label class="form-label" for="add-profile-password-confirm">Konfirmasi Password<span class="text-danger">*</span></label>
                        <div class="input-group input-group-merge">
                            <input type="password" id="add-profile-password-confirm" name="password_confirmation" class="form-control" />
                            <button type="button" class="input-group-text cursor-pointer password-toggle" aria-label="Lihat konfirmasi password">
                                <i class="ti tabler-eye-off"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <hr class="my-4">
                <h6 class="mb-3">Lokasi & Alamat</h6>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label" for="add-profile-provinsi">Provinsi</label>
                        <select id="add-profile-provinsi" class="select2 form-select" data-placeholder="Pilih Provinsi">
                            <option value="">Pilih Provinsi</option>
                            @foreach($provinsi as $prov)
                                <option value="{{ $prov->id }}">{{ $prov->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6 mb-4">
                        <label class="form-label" for="add-profile-kabupaten">Kabupaten/Kota</label>
                        <select id="add-profile-kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota">
                            <option value="">Pilih Kabupaten/Kota</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label" for="add-profile-kecamatan">Kecamatan</label>
                        <select id="add-profile-kecamatan" class="select2 form-select" data-placeholder="Pilih Kecamatan">
                            <option value="">Pilih Kecamatan</option>
                        </select>
                    </div>

                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-desa">Desa/Kelurahan<span class="text-danger">*</span></label>
                        <select id="add-profile-desa" name="desa_kelurahan_id" class="select2 form-select @error('desa_kelurahan_id') is-invalid @enderror" data-placeholder="Pilih Desa/Kelurahan">
                            <option value="">Pilih Desa/Kelurahan</option>
                        </select>
                        @error('desa_kelurahan_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="mb-4">
                    <label class="form-label" for="add-profile-alamat">Alamat Lengkap</label>
                    <textarea class="form-control" id="add-profile-alamat" name="alamat" rows="2">{{ old('alamat') }}</textarea>
                </div>

                <hr class="my-4">
                <h6 class="mb-3">Dokumen Pribadi</h6>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-no-ktp">NIK (KTP)</label>
                        <input type="text" class="form-control @error('ktp') is-invalid @enderror" id="add-profile-no-ktp" name="ktp" value="{{ old('ktp') }}" />
                        @error('ktp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-no-kk">No. KK</label>
                        <input type="text" class="form-control @error('kk') is-invalid @enderror" id="add-profile-no-kk" name="kk" value="{{ old('kk') }}" />
                        @error('kk')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-file-ktp">File KTP</label>
                        <input type="file" class="form-control @error('file_ktp') is-invalid @enderror" id="add-profile-file-ktp" name="file_ktp" accept="image/*,.pdf" />
                        @error('file_ktp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <div id="add-preview-container-ktp" class="mt-3 d-none">
                            <img id="add-preview-image-ktp" src="" alt="Preview KTP" class="img-thumbnail d-none" style="width: 100%; max-height: 250px; object-fit: contain; background-color: #f8f9fa;">
                            <div id="add-preview-pdf-ktp" class="badge bg-label-danger p-2 w-100 d-none"><i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF (Baru Terpilih)</div>
                        </div>
                    </div>

                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-profile-file-kk">File KK</label>
                        <input type="file" class="form-control @error('file_kk') is-invalid @enderror" id="add-profile-file-kk" name="file_kk" accept="image/*,.pdf" />
                        @error('file_kk')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <div id="add-preview-container-kk" class="mt-3 d-none">
                            <img id="add-preview-image-kk" src="" alt="Preview KK" class="img-thumbnail d-none" style="width: 100%; max-height: 250px; object-fit: contain; background-color: #f8f9fa;">
                            <div id="add-preview-pdf-kk" class="badge bg-label-danger p-2 w-100 d-none"><i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF (Baru Terpilih)</div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 text-end">
                    <a href="{{ route('users.index') }}" class="btn btn-label-secondary me-2">Batal</a>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    'use strict';
    $(document).ready(function () {
        $('.select2').select2();

        $(document).on('click', '.password-toggle', function () {
            const input = this.closest('.input-group').querySelector('input');
            const icon = this.querySelector('i');
            const isHidden = input.type === 'password';

            input.type = isHidden ? 'text' : 'password';
            icon.className = isHidden ? 'ti tabler-eye' : 'ti tabler-eye-off';
            this.setAttribute('aria-label', isHidden ? 'Sembunyikan password' : 'Lihat password');
        });

        function handleFilePreview(inputId, containerId, imageId, pdfId) {
            $(`#${inputId}`).on('change', function(event) {
                const file = event.target.files[0];
                const $container = $(`#${containerId}`);
                const $image = $(`#${imageId}`);
                const $pdf = $(`#${pdfId}`);

                if (!file) {
                    $container.addClass('d-none');
                    return;
                }

                $container.removeClass('d-none');
                if (file.type.match('image.*')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $image.attr('src', e.target.result).removeClass('d-none');
                        $pdf.addClass('d-none');
                    };
                    reader.readAsDataURL(file);
                } else if (file.type === 'application/pdf') {
                    $image.addClass('d-none').attr('src', '');
                    $pdf.removeClass('d-none');
                } else {
                    $container.addClass('d-none');
                }
            });
        }

        function setupCascadingDropdown() {
            $('#add-profile-provinsi').on('change', function () {
                const provinsiId = $(this).val();
                const $kabupaten = $('#add-profile-kabupaten');
                const $kecamatan = $('#add-profile-kecamatan');
                const $desa = $('#add-profile-desa');

                $kabupaten.empty().append('<option value="">Pilih Kabupaten/Kota</option>').trigger('change');
                $kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').trigger('change');
                $desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');

                if (provinsiId) {
                    $.get(`/kabupatenkotabyprovinsi/${provinsiId}`, function (res) {
                        const dataList = Array.isArray(res) ? res : (res.data || []);
                        $.each(dataList, function (key, val) {
                            $kabupaten.append(`<option value="${val.id}">${val.nama}</option>`);
                        });
                    });
                }
            });

            $('#add-profile-kabupaten').on('change', function () {
                const kabupatenId = $(this).val();
                const $kecamatan = $('#add-profile-kecamatan');
                const $desa = $('#add-profile-desa');

                $kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').trigger('change');
                $desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');

                if (kabupatenId) {
                    $.get(`/kecamatanbykabupatenkota/${kabupatenId}`, function (res) {
                        const dataList = Array.isArray(res) ? res : (res.data || []);
                        $.each(dataList, function (key, val) {
                            $kecamatan.append(`<option value="${val.id}">${val.nama}</option>`);
                        });
                    });
                }
            });

            $('#add-profile-kecamatan').on('change', function () {
                const kecamatanId = $(this).val();
                const $desa = $('#add-profile-desa');

                $desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');

                if (kecamatanId) {
                    $.get(`/desakelurahanbykecamatan/${kecamatanId}`, function (res) {
                        const dataList = Array.isArray(res) ? res : (res.data || []);
                        $.each(dataList, function (key, val) {
                            $desa.append(`<option value="${val.id}">${val.nama}</option>`);
                        });
                    });
                }
            });
        }

        handleFilePreview('add-profile-file-ktp', 'add-preview-container-ktp', 'add-preview-image-ktp', 'add-preview-pdf-ktp');
        handleFilePreview('add-profile-file-kk', 'add-preview-container-kk', 'add-preview-image-kk', 'add-preview-pdf-kk');
        setupCascadingDropdown();
    });
</script>
@endpush