@extends('layouts.sales')

@section('title', 'Pengaturan')

@section('content')

{{-- ── PAGE HEADER ─────────────────────────────────── --}}
<div class="mb-5">
    <h1 class="page-title">Pengaturan</h1>
    <p class="page-subtitle">Kelola profil, rekening bank, dan keamanan akun Anda</p>
</div>

<div class="row g-4">

    {{-- ── PROFIL SALES ───────────────────────────── --}}
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-person-circle me-2" style="color:var(--primary);"></i>
                Profil Sales
            </div>
            <div class="card-body">
                <form action="{{ route('sales.profile.update') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name" value="{{ $user->name }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" name="email" value="{{ $user->email }}" required>
                    </div>
                    <div class="mb-4">
                        <label class="form-label">No HP <span class="text-danger">*</span></label>
                        <input type="tel" class="form-control" name="phone" value="{{ $user->phone }}" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-check-lg me-1"></i>
                        Simpan Profil
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- ── REKENING BANK ──────────────────────────── --}}
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-bank me-2" style="color:var(--secondary);"></i>
                Rekening Bank
            </div>
            <div class="card-body">
                <div class="alert alert-info d-flex align-items-start gap-2 mb-4" role="alert">
                    <i class="bi bi-info-circle-fill mt-1" style="font-size:1.1rem; flex-shrink:0;"></i>
                    <div>
                        <strong>Penting!</strong>
                        <div class="small mt-1">Pastikan rekening aktif dan sesuai nama Anda untuk mempermudah pencairan komisi.</div>
                    </div>
                </div>
                <form action="{{ route('sales.bank.update') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Bank <span class="text-danger">*</span></label>
                        <select class="form-select" name="bank" required>
                            <option value="">Pilih Bank</option>
                            @foreach([
                                'bca'      => 'BCA – Bank Central Asia',
                                'bri'      => 'BRI – Bank Rakyat Indonesia',
                                'bni'      => 'BNI – Bank Negara Indonesia',
                                'mandiri'  => 'Mandiri',
                                'bsi'      => 'BSI – Bank Syariah Indonesia',
                                'danamon'  => 'Danamon',
                                'cimb'     => 'CIMB Niaga',
                                'muamalat' => 'Bank Muamalat',
                            ] as $val => $label)
                                <option value="{{ $val }}" {{ $sales->bank == $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nomor Rekening <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-credit-card"></i></span>
                            <input type="text" class="form-control" name="account_number"
                                   value="{{ $sales->account_number }}" required>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label">Atas Nama <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="account_name"
                               value="{{ $sales->account_name }}" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100" style="background:linear-gradient(135deg,var(--secondary),#1E40AF); box-shadow:0 3px 12px rgba(30,58,138,0.3);">
                        <i class="bi bi-check-lg me-1"></i>
                        Simpan Rekening
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- ── UBAH PASSWORD ──────────────────────────── --}}
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-shield-lock me-2" style="color:var(--accent);"></i>
                Ubah Password
            </div>
            <div class="card-body">
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <form action="{{ route('sales.password.update') }}" method="POST" id="passwordForm">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Password Lama <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-key"></i></span>
                            <input type="password" class="form-control" name="current_password"
                                   id="current_password" placeholder="Password lama" required>
                            <span class="input-group-text toggle-password" data-target="current_password">
                                <i class="bi bi-eye"></i>
                            </span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password Baru <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-key-fill"></i></span>
                            <input type="password" class="form-control" name="new_password"
                                   id="new_password" placeholder="Min. 8 karakter" required>
                            <span class="input-group-text toggle-password" data-target="new_password">
                                <i class="bi bi-eye"></i>
                            </span>
                        </div>
                        <div id="passwordLengthError" class="text-danger small mt-1" style="display:none;">
                            Password baru minimal 8 karakter!
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label">Konfirmasi Password Baru <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-key-fill"></i></span>
                            <input type="password" class="form-control" name="new_password_confirmation"
                                   id="new_password_confirmation" placeholder="Ulangi password baru" required>
                            <span class="input-group-text toggle-password" data-target="new_password_confirmation">
                                <i class="bi bi-eye"></i>
                            </span>
                        </div>
                        <div id="passwordMatchError" class="text-danger small mt-1" style="display:none;">
                            Konfirmasi password tidak sama!
                        </div>
                    </div>
                    <button type="submit" class="btn btn-warning w-100">
                        <i class="bi bi-key-fill me-1"></i>
                        Ubah Password
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- ── ZONA BAHAYA / LOGOUT ───────────────────── --}}
    <div class="col-lg-6">
        <div class="card h-100" style="border-color:#FEE2E2;">
            <div class="card-header" style="background:#FFF5F5; border-color:#FEE2E2;">
                <i class="bi bi-exclamation-triangle me-2" style="color:var(--danger);"></i>
                <span style="color:var(--danger);">Zona Berbahaya</span>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
                <p class="text-muted mb-4" style="font-size:0.92rem;">
                    Setelah logout, Anda harus masuk kembali menggunakan email dan password Anda.
                </p>
                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-danger w-100">
                        <i class="bi bi-box-arrow-right me-2"></i>
                        Logout dari Akun
                    </button>
                </form>
            </div>
        </div>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form     = document.getElementById('passwordForm');
    const newPw    = document.getElementById('new_password');
    const confPw   = document.getElementById('new_password_confirmation');
    const lenErr   = document.getElementById('passwordLengthError');
    const matchErr = document.getElementById('passwordMatchError');

    newPw?.addEventListener('input', () => {
        const show = newPw.value.length > 0 && newPw.value.length < 8;
        lenErr.style.display = show ? 'block' : 'none';
        newPw.classList.toggle('is-invalid', show);
    });

    confPw?.addEventListener('input', () => {
        matchErr.style.display = 'none';
        confPw.classList.remove('is-invalid');
    });

    form?.addEventListener('submit', e => {
        if (newPw.value.length < 8) {
            e.preventDefault();
            lenErr.style.display = 'block';
            newPw.classList.add('is-invalid');
            return;
        }
        if (newPw.value !== confPw.value) {
            e.preventDefault();
            matchErr.style.display = 'block';
            confPw.classList.add('is-invalid');
        }
    });

    document.querySelectorAll('.toggle-password').forEach(btn => {
        btn.addEventListener('click', function() {
            const input = document.getElementById(this.dataset.target);
            const icon  = this.querySelector('i');
            const show  = input.type === 'password';
            input.type  = show ? 'text' : 'password';
            icon.classList.toggle('bi-eye', !show);
            icon.classList.toggle('bi-eye-slash', show);
        });
    });
});
</script>
@endsection