@extends('templates.desktop.app')
@push('styles')
    @include('mitra.desktop.account.partials.css')
@endpush
@section('content')
    @php
        $hasPin = Auth::user()->pin !== null;
    @endphp
    <div class="row">
        <!-- Left Sidebar -->
        @include('mitra.desktop.account.partials.sidebar')

        <!-- Main Content Area -->
        <div class="col-md-6">
            <!-- Profile Content Section -->
            <div class="profile-main-content tab-content active" id="profile-content">
                <h5 class="mb-4">Profile</h5>
                <form id="updateProfileForm">
                    <div class="mb-3">
                        <label for="nama" class="form-label">Username</label>
                        <input type="text" class="form-control" id="nama" name="username"
                            value="{{ Auth::user()->username }}">
                    </div>

                    <div class="mb-3">
                        <label for="noTelepon" class="form-label">No Telepon</label>
                        <input type="text" class="form-control" id="noTelepon" name="phone_number"
                            value="{{ Auth::user()->phone_number }}">
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email"
                            value="{{ Auth::user()->email }}">
                    </div>

                    <div class="d-grid gap-2 mb-3">
                        <button type="button" class="btn btn-light border py-2" data-bs-toggle="modal"
                            data-bs-target="#passwordModal">
                            <i class="fas fa-lock me-2"></i> Ganti Password
                        </button>
                        <button type="button" class="btn btn-light border py-2" data-bs-toggle="modal"
                            data-bs-target="#pinModal">
                            <i class="fas fa-key me-2"></i> {{ $hasPin ? 'Ganti PIN' : 'Atur PIN' }}
                        </button>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary-custom d-flex align-items-center gap-2"
                            id="submitBtn">
                            <span id="submitText">Simpan</span>
                            <div id="submitSpinner" class="spinner-border spinner-border-sm text-light d-none"
                                role="status"></div>
                        </button>

                    </div>
                </form>

            </div>
        </div>
    </div>

    <div class="modal fade" id="pinModal" tabindex="-1" aria-labelledby="pinModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="pinForm">
                    <div class="modal-header">
                        <h5 class="modal-title" id="pinModalLabel">
                            {{ $hasPin ? 'Ganti PIN' : 'Atur PIN' }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <i class="fas fa-lock fa-2x mb-3"></i>

                        @if ($hasPin)
                            <div class="mb-3">
                                <label class="form-label">PIN Lama</label>
                                <div class="pin-input-group" id="oldPinGroup">
                                    @for ($i = 0; $i < 6; $i++)
                                        <input type="text" class="pin-input old-pin" maxlength="1" pattern="[0-9]"
                                            inputmode="numeric">
                                    @endfor
                                </div>
                            </div>
                        @endif

                        <div class="mb-3">
                            <label class="form-label">PIN Baru</label>
                            <div class="pin-input-group" id="newPinGroup">
                                @for ($i = 0; $i < 6; $i++)
                                    <input type="text" class="pin-input new-pin" maxlength="1" pattern="[0-9]"
                                        inputmode="numeric">
                                @endfor
                            </div>
                        </div>

                        <div>
                            <label class="form-label">Konfirmasi PIN Baru</label>
                            <div class="pin-input-group" id="confirmPinGroup">
                                @for ($i = 0; $i < 6; $i++)
                                    <input type="text" class="pin-input confirm-pin" maxlength="1" pattern="[0-9]"
                                        inputmode="numeric">
                                @endfor
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary-custom" id="submitPinBtn">
                            <span id="submitPinSpinner" class="spinner-border spinner-border-sm d-none" role="status"
                                aria-hidden="true"></span>
                            <span id="submitPinText">Lanjut</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade modal-password-change" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="passwordModalLabel">Ganti Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="currentPassword" class="form-label">Password Lama</label>
                        <input type="password" class="form-control" id="currentPassword"
                            placeholder="Masukkan password lama Anda">
                    </div>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">Password Baru</label>
                        <input type="password" class="form-control" id="newPassword"
                            placeholder="Masukkan password baru Anda">
                    </div>
                    <div class="mb-3">
                        <label for="confirmNewPassword" class="form-label">Konfirmasi Password Baru</label>
                        <input type="password" class="form-control" id="confirmNewPassword"
                            placeholder="Konfirmasi password baru Anda">
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary-custom" id="submitPasswordBtn">
                        <span id="submitPasswordText">Simpan</span>
                        <span id="submitPasswordSpinner" class="spinner-border spinner-border-sm d-none" role="status"
                            aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute(
            'content');

        document.getElementById('updateProfileForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const btn = document.getElementById('submitBtn');
            const spinner = document.getElementById('submitSpinner');
            const text = document.getElementById('submitText');

            // Tampilkan loading
            btn.disabled = true;
            spinner.classList.remove('d-none');
            text.textContent = 'Menyimpan...';

            const data = {
                username: document.getElementById('nama').value.trim(),
                email: document.getElementById('email').value.trim(),
                phone_number: document.getElementById('noTelepon').value.trim()
            };

            // Validasi dasar client-side
            if (!data.username || !data.email || !data.phone_number) {
                Swal.fire('Gagal', 'Semua field wajib diisi.', 'warning');
                resetButton();
                return;
            }

            axios.post('/mitra/account/profile/update', data)
                .then(response => {
                    if (response.data.status) {
                        Swal.fire('Berhasil', 'Profil berhasil diperbarui.', 'success');
                    } else {
                        Swal.fire('Gagal', response.data.message || 'Gagal memperbarui profil.', 'error');
                    }
                })
                .catch(error => {
                    if (error.response && error.response.status === 422) {
                        const errors = error.response.data.errors;
                        let message = '';
                        let i = 1;
                        for (let key in errors) {
                            message += `${i++}. ${errors[key][0]}<br>`;
                        }
                        Swal.fire({
                            title: 'Validasi Gagal',
                            html: message,
                            icon: 'error'
                        });
                    } else {
                        Swal.fire('Error', 'Terjadi kesalahan. Silakan coba lagi.', 'error');
                    }
                })
                .finally(() => {
                    resetButton();
                });

            function resetButton() {
                btn.disabled = false;
                spinner.classList.add('d-none');
                text.textContent = 'Simpan';
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function setupPinAutoTab(groupSelector) {
                const inputs = document.querySelectorAll(groupSelector + ' .pin-input');
                inputs.forEach((input, index) => {
                    input.addEventListener('input', function() {
                        if (this.value.length === 1 && index < inputs.length - 1) {
                            inputs[index + 1].focus();
                        }
                    });
                    input.addEventListener('keydown', function(e) {
                        if (e.key === 'Backspace' && this.value === '' && index > 0) {
                            inputs[index - 1].focus();
                        }
                    });
                });
            }

            setupPinAutoTab('#oldPinGroup');
            setupPinAutoTab('#newPinGroup');
            setupPinAutoTab('#confirmPinGroup');

            const form = document.getElementById('pinForm');
            const submitBtn = document.getElementById('submitPinBtn');
            const spinner = document.getElementById('submitPinSpinner');
            const btnText = document.getElementById('submitPinText');
            const modalEl = document.getElementById('pinModal');

            form.addEventListener('submit', function(e) {
                e.preventDefault();

                const getPinValue = selector => [...document.querySelectorAll(selector)].map(el => el.value)
                    .join('');

                const oldPinInputs = document.querySelectorAll('.old-pin');
                const oldPin = oldPinInputs.length ? getPinValue('.old-pin') : null;
                const newPin = getPinValue('.new-pin');
                const confirmPin = getPinValue('.confirm-pin');

                if (newPin.length !== 6 || !/^\d{6}$/.test(newPin)) {
                    return Swal.fire({
                        title: 'PIN Tidak Valid',
                        text: 'PIN baru harus terdiri dari 6 digit angka.',
                        icon: 'warning',
                        customClass: {
                            container: 'swal2-zindex'
                        }
                    });
                }

                if (newPin !== confirmPin) {
                    return Swal.fire({
                        title: 'Konfirmasi Tidak Sama',
                        text: 'PIN baru dan konfirmasi harus sama.',
                        icon: 'warning',
                        customClass: {
                            container: 'swal2-zindex'
                        }
                    });
                }

                // Loading state
                submitBtn.disabled = true;
                spinner.classList.remove('d-none');
                btnText.textContent = 'Memproses...';

                axios.post('/mitra/account/pin/update', {
                        old_pin: oldPin,
                        new_pin: newPin,
                        confirm_pin: confirmPin
                    })
                    .then(res => {
                        const r = res.data;
                        Swal.fire({
                            title: r.status ? 'Berhasil' : 'Gagal',
                            text: r.message || (r.status ? 'PIN berhasil diperbarui.' :
                                'Gagal memperbarui PIN.'),
                            icon: r.status ? 'success' : 'error',
                            customClass: {
                                container: 'swal2-zindex'
                            }
                        });

                        if (r.status) {
                            // Reset inputs
                            document.querySelectorAll('.pin-input').forEach(input => input.value = '');

                            // Hide modal
                            const modalInstance = bootstrap.Modal.getInstance(modalEl);
                            modalInstance.hide();

                            // Manual cleanup fix
                            setTimeout(() => {
                                document.querySelectorAll('.modal-backdrop').forEach(el => el
                                    .remove());
                                document.body.classList.remove('modal-open');
                                document.body.style = '';
                                modalEl.classList.remove('show');
                                modalEl.setAttribute('aria-hidden', 'true');
                                modalEl.style.display = 'none';
                            }, 300);
                        }
                    })
                    .catch(err => {
                        let html = 'Terjadi kesalahan.';
                        if (err.response && err.response.data.errors) {
                            const errors = err.response.data.errors;
                            html = Object.values(errors).map((e, i) => `${i + 1}. ${e}`).join('<br>');
                        }
                        Swal.fire({
                            title: 'Error',
                            html: html,
                            icon: 'error',
                            customClass: {
                                container: 'swal2-zindex'
                            }
                        });
                    })
                    .finally(() => {
                        submitBtn.disabled = false;
                        spinner.classList.add('d-none');
                        btnText.textContent = 'Lanjut';
                    });
            });

            // Fix: modal stuck on backdrop if reopened
            const pinModalTrigger = document.querySelector('[data-bs-target="#pinModal"]');
            if (pinModalTrigger) {
                pinModalTrigger.addEventListener('click', () => {
                    const backdrop = document.querySelector('.modal-backdrop');
                    if (backdrop) backdrop.remove();
                    document.body.classList.remove('modal-open');
                    document.body.style = '';
                    modalEl.classList.remove('show');
                    modalEl.setAttribute('aria-hidden', 'true');
                    modalEl.style.display = 'none';
                });
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('passwordModal');
            const submitBtn = document.getElementById('submitPasswordBtn');
            const submitText = document.getElementById('submitPasswordText');
            const submitSpinner = document.getElementById('submitPasswordSpinner');

            const currentPasswordInput = document.getElementById('currentPassword');
            const newPasswordInput = document.getElementById('newPassword');
            const confirmPasswordInput = document.getElementById('confirmNewPassword');

            function resetForm() {
                currentPasswordInput.value = '';
                newPasswordInput.value = '';
                confirmPasswordInput.value = '';
            }

            function hideModal() {
                const modalInstance = bootstrap.Modal.getInstance(modal);
                if (modalInstance) {
                    modalInstance.hide();
                }
                setTimeout(() => {
                    document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
                    document.body.classList.remove('modal-open');
                    document.body.style = '';
                }, 300);
            }

            submitBtn.addEventListener('click', () => {
                const currentPassword = currentPasswordInput.value.trim();
                const newPassword = newPasswordInput.value.trim();
                const confirmPassword = confirmPasswordInput.value.trim();

                if (!currentPassword || !newPassword || !confirmPassword) {
                    return Swal.fire({
                        title: 'Input Tidak Lengkap',
                        text: 'Semua kolom wajib diisi.',
                        icon: 'warning',
                        customClass: {
                            container: 'swal2-zindex'
                        }
                    });
                }

                if (newPassword.length < 6) {
                    return Swal.fire({
                        title: 'Password Terlalu Pendek',
                        text: 'Password baru minimal 6 karakter.',
                        icon: 'warning',
                        customClass: {
                            container: 'swal2-zindex'
                        }
                    });
                }

                if (newPassword !== confirmPassword) {
                    return Swal.fire({
                        title: 'Konfirmasi Tidak Cocok',
                        text: 'Password baru dan konfirmasi tidak sama.',
                        icon: 'warning',
                        customClass: {
                            container: 'swal2-zindex'
                        }
                    });
                }

                // Show loading
                submitBtn.disabled = true;
                submitSpinner.classList.remove('d-none');
                submitText.textContent = 'Menyimpan...';

                axios.post('/mitra/account/password/update', {
                        current_password: currentPassword,
                        new_password: newPassword,
                        confirm_password: confirmPassword
                    })
                    .then(res => {
                        const r = res.data;
                        Swal.fire({
                            title: r.status ? 'Berhasil' : 'Gagal',
                            text: r.message || (r.status ? 'Password berhasil diubah.' :
                                'Gagal mengganti password.'),
                            icon: r.status ? 'success' : 'error',
                            customClass: {
                                container: 'swal2-zindex'
                            }
                        });
                        if (r.status) {
                            resetForm();
                            hideModal();
                        }
                    })
                    .catch(err => {
                        let html = 'Terjadi kesalahan.';
                        if (err.response?.data?.errors) {
                            html = Object.values(err.response.data.errors).map((e, i) =>
                                `${i + 1}. ${e}`).join('<br>');
                        }
                        Swal.fire({
                            title: 'Error',
                            html: html,
                            icon: 'error',
                            customClass: {
                                container: 'swal2-zindex'
                            }
                        });
                    })
                    .finally(() => {
                        submitBtn.disabled = false;
                        submitSpinner.classList.add('d-none');
                        submitText.textContent = 'Simpan';
                    });
            });
        });
    </script>
@endpush