{{-- Form Pengajuan Refund Customer --}}
<x-layouts.app :title="'Ajukan Refund'">

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-money-bill-wave me-2" style="color:#F59E0B;"></i>Ajukan Refund</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0" style="font-size:0.8rem;">
            <li class="breadcrumb-item"><a href="{{ route('customer.history.index') }}" style="color:var(--sw-primary);text-decoration:none;">Riwayat</a></li>
            <li class="breadcrumb-item"><a href="{{ route('customer.history.show', $booking) }}" style="color:var(--sw-primary);text-decoration:none;">{{ $booking->booking_code }}</a></li>
            <li class="breadcrumb-item active">Refund</li>
        </ol></nav>
    </div>
</div>

<div class="row justify-content-center">
<div class="col-lg-7">

    {{-- Info Booking Hangus --}}
    <div class="card mb-4" style="border-left:4px solid #F59E0B;">
        <div class="card-body p-4">
            <div class="d-flex align-items-start gap-3">
                <div style="width:48px;height:48px;border-radius:12px;background:#FFF3E0;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i class="fas fa-triangle-exclamation" style="color:#F59E0B;font-size:1.3rem;"></i>
                </div>
                <div>
                    <h6 class="fw-700 mb-1" style="color:var(--sw-dark);">Booking Hangus — Refund 70%</h6>
                    <p class="mb-0" style="font-size:0.875rem;color:var(--sw-gray);">
                        Booking <strong>{{ $booking->booking_code }}</strong> dinyatakan hangus.
                        Sesuai kebijakan SparkWash, Anda berhak mendapatkan pengembalian dana sebesar
                        <strong style="color:#16A34A;">{{ 'Rp ' . number_format($refundAmount, 0, ',', '.') }}</strong>
                        (70% dari {{ $booking->formatted_price }}).
                    </p>
                    <div class="mt-2 p-2 rounded-sw d-inline-block" style="background:#FFF3E0;font-size:0.8rem;color:#92400E;">
                        <i class="fas fa-clock me-1"></i>
                        Batas pengajuan: <strong>{{ $expiresAt->locale('id')->isoFormat('D MMM Y, HH:mm') }} WIB</strong>
                        ({{ $expiresAt->diffForHumans() }})
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Form Refund --}}
    <div class="card">
        <div class="card-body p-4">
            <h6 class="fw-700 mb-4" style="color:var(--sw-dark);">
                <i class="fas fa-university me-2" style="color:var(--sw-primary);"></i>
                Data Rekening Tujuan Refund
            </h6>

            @if ($errors->any())
            <div class="alert border-0 mb-4" style="background:#FFEBEE;color:#C62828;border-radius:10px;">
                <i class="fas fa-circle-exclamation me-2"></i>
                <ul class="mb-0 mt-1 ps-3">
                    @foreach ($errors->all() as $e)
                    <li style="font-size:0.875rem;">{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form method="POST" action="{{ route('customer.refund.store', $booking) }}" id="refundForm">
            @csrf

            <div class="mb-3">
                <label class="form-label fw-600" style="font-size:0.85rem;">Nama Bank</label>
                <select name="bank_name" class="form-select @error('bank_name') is-invalid @enderror" required>
                    <option value="">-- Pilih bank --</option>
                    @foreach(['BCA','BRI','BNI','Mandiri','BSI','CIMB Niaga','Danamon','Permata','BTN','GoPay','OVO','DANA','ShopeePay','LinkAja'] as $bank)
                    <option value="{{ $bank }}" {{ old('bank_name') == $bank ? 'selected' : '' }}>{{ $bank }}</option>
                    @endforeach
                </select>
                @error('bank_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
                <label class="form-label fw-600" style="font-size:0.85rem;">Nomor Rekening</label>
                <input type="text" name="account_number"
                       class="form-control font-monospace @error('account_number') is-invalid @enderror"
                       placeholder="Contoh: 1234567890"
                       value="{{ old('account_number') }}" required
                       style="letter-spacing:1px;font-size:1rem;">
                @error('account_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mb-4">
                <label class="form-label fw-600" style="font-size:0.85rem;">Nama Pemilik Rekening</label>
                <input type="text" name="account_name"
                       class="form-control @error('account_name') is-invalid @enderror"
                       placeholder="Sesuai nama di rekening"
                       value="{{ old('account_name', auth()->user()->name) }}" required>
                @error('account_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                <div style="font-size:0.78rem;color:var(--sw-gray);margin-top:4px;">
                    <i class="fas fa-info-circle me-1"></i>Pastikan nama sesuai agar proses transfer tidak gagal.
                </div>
            </div>

            {{-- Ringkasan --}}
            <div class="p-3 rounded-3 mb-4" style="background:#F0FDF4;border:1px solid #BBF7D0;">
                <div class="fw-600 mb-2" style="font-size:0.875rem;color:#15803D;">
                    <i class="fas fa-circle-check me-2"></i>Ringkasan Pengajuan Refund
                </div>
                <div class="d-flex justify-content-between mb-1" style="font-size:0.85rem;">
                    <span style="color:var(--sw-gray);">Harga Layanan</span>
                    <span class="fw-600">{{ $booking->formatted_price }}</span>
                </div>
                <div class="d-flex justify-content-between mb-1" style="font-size:0.85rem;">
                    <span style="color:var(--sw-gray);">Persentase Refund</span>
                    <span class="fw-600">70%</span>
                </div>
                <hr style="border-color:#BBF7D0;margin:8px 0;">
                <div class="d-flex justify-content-between">
                    <span class="fw-700" style="font-size:0.9rem;">Total Refund</span>
                    <span class="fw-700" style="color:#16A34A;font-size:1.1rem;">{{ 'Rp ' . number_format($refundAmount, 0, ',', '.') }}</span>
                </div>
            </div>

            <div class="alert border-0 mb-4" style="background:#FFF3E0;color:#92400E;border-radius:10px;font-size:0.83rem;">
                <i class="fas fa-triangle-exclamation me-2"></i>
                Pengajuan refund hanya dapat dilakukan <strong>satu kali</strong> dan tidak dapat diubah setelah dikirim.
                Proses transfer akan dilakukan dalam <strong>1–3 hari kerja</strong> setelah admin menyetujui.
            </div>

            <div class="d-flex gap-2">
                <a href="{{ route('customer.history.show', $booking) }}" class="btn btn-outline-secondary flex-grow-1">
                    <i class="fas fa-arrow-left me-2"></i>Batal
                </a>
                <button type="submit" id="submitRefundBtn" class="btn btn-warning flex-grow-1 fw-600">
                    <i class="fas fa-paper-plane me-2"></i>Kirim Pengajuan Refund
                </button>
            </div>

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

</div>
</div>

@push('scripts')
<script>
document.getElementById('refundForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var f = this;
    if (window.SwAlert) {
        window.SwAlert.confirm(
            'Kirim Pengajuan Refund?',
            'Pastikan data rekening sudah benar. Pengajuan tidak dapat diubah setelah dikirim.'
        ).then(function(r) { if (r.isConfirmed) f.submit(); });
    } else {
        if (confirm('Kirim pengajuan refund? Data tidak dapat diubah setelah dikirim.')) f.submit();
    }
});
</script>
@endpush

</x-layouts.app>