@extends('front')

@section('content')
<div class="page-wrapper">
    <div class="content container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-8">

                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0">{{ __('Pagamento') }} – {{ $booking->order_id }}</h4>
                    </div>
                    <div class="card-body">

                        {{-- Summary --}}
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <h6 class="fw-bold">{{ __('Serviço') }}</h6>
                                <p class="mb-1">{{ $booking->product->source_name ?? 'N/A' }}</p>
                                <p class="text-muted mb-0">{{ __('Data') }}: {{ $booking->booking_date }}</p>
                            </div>
                            <div class="col-md-6 text-md-end">
                                <h6 class="fw-bold">{{ __('Valor a Pagar') }}</h6>
                                <h3 class="text-primary mb-0">{{ $currency }}{{ number_format($booking->total_amount, 2) }}</h3>
                            </div>
                        </div>

                        <hr>

                        <form id="payment-form" action="{{ route('user.booking.process_payment') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="booking_id" value="{{ $booking->id }}">

                            <h5 class="mb-3">{{ __('Escolha o Método de Pagamento') }}</h5>

                            <div class="row g-3 mb-4">

                                @if($codStatus)
                                <div class="col-md-6">
                                    <label for="pay_cash" class="payment-option-card w-100 h-100 border rounded-3 p-3 d-flex align-items-center gap-3 cursor-pointer" style="cursor:pointer;">
                                        <input class="form-check-input mt-0 payment-radio" type="radio" name="payment_type" id="pay_cash" value="cash">
                                        <div>
                                            <i class="ti ti-cash fs-28 text-success me-1"></i>
                                            <span class="fw-bold fs-15">{{ __('Dinheiro (Cash)') }}</span>
                                            <p class="mb-0 text-muted small">{{ __('Paga no local aquando da prestação do serviço.') }}</p>
                                        </div>
                                    </label>
                                </div>
                                @endif

                                @if($bankStatus)
                                <div class="col-md-6">
                                    <label for="pay_bank" class="payment-option-card w-100 h-100 border rounded-3 p-3 d-flex align-items-center gap-3 cursor-pointer" style="cursor:pointer;">
                                        <input class="form-check-input mt-0 payment-radio" type="radio" name="payment_type" id="pay_bank" value="bank_transfer">
                                        <div>
                                            <i class="ti ti-building-bank fs-28 text-primary me-1"></i>
                                            <span class="fw-bold fs-15">{{ __('Transferência Bancária') }}</span>
                                            <p class="mb-0 text-muted small">{{ __('Transfira o valor e envie o comprovativo.') }}</p>
                                        </div>
                                    </label>
                                </div>
                                @endif

                                @if(!$codStatus && !$bankStatus)
                                    <div class="col-12">
                                        <div class="alert alert-warning">{{ __('Nenhum método de pagamento disponível de momento. Contacte o suporte.') }}</div>
                                    </div>
                                @endif

                            </div>

                            {{-- Bank details panel --}}
                            @if($bankStatus && $bankDetails)
                            <div id="bank-details-panel" class="card bg-light border-0 p-3 mb-4" style="display:none;">
                                <h6 class="fw-bold mb-3"><i class="ti ti-info-circle me-1"></i>{{ __('Dados Bancários') }}</h6>
                                <table class="table table-sm table-borderless mb-3">
                                    <tr><th class="w-50">{{ __('Banco') }}</th><td>{{ $bankDetails['bank_name'] ?? '–' }}</td></tr>
                                    <tr><th>{{ __('Titular') }}</th><td>{{ $bankDetails['account_name'] ?? '–' }}</td></tr>
                                    <tr><th>{{ __('NIB / IBAN') }}</th><td><strong>{{ $bankDetails['account_number'] ?? '–' }}</strong></td></tr>
                                    <tr><th>{{ __('Código Balcão') }}</th><td>{{ $bankDetails['branch_code'] ?? '–' }}</td></tr>
                                </table>
                                <div class="mb-2">
                                    <label class="form-label fw-bold">{{ __('Comprovativo de Pagamento') }} <span class="text-danger">*</span></label>
                                    <input type="file" name="payment_receipt" id="payment_receipt" class="form-control" accept="image/*,.pdf">
                                    <div class="form-text">{{ __('Aceita imagens (JPG, PNG) ou PDF.') }}</div>
                                </div>
                            </div>
                            @endif

                            @if($codStatus || $bankStatus)
                            <div class="d-grid mt-4">
                                <button type="submit" id="pay-now-btn" class="btn btn-primary btn-lg">
                                    {{ __('Confirmar Pagamento') }}
                                </button>
                            </div>
                            @endif

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

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

<style>
.payment-option-card {
    transition: border-color .2s, box-shadow .2s;
}
.payment-option-card:has(.payment-radio:checked) {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 3px rgba(13,110,253,.15);
    background: #f0f6ff;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const radios = document.querySelectorAll('.payment-radio');
    const bankPanel = document.getElementById('bank-details-panel');

    radios.forEach(function(radio) {
        radio.addEventListener('change', function () {
            if (bankPanel) {
                bankPanel.style.display = (this.value === 'bank_transfer') ? 'block' : 'none';
            }
        });
    });

    document.getElementById('payment-form').addEventListener('submit', function(e) {
        const selected = document.querySelector('.payment-radio:checked');
        if (!selected) {
            e.preventDefault();
            alert('{{ __("Por favor selecione um método de pagamento.") }}');
            return;
        }
        const btn = document.getElementById('pay-now-btn');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("A processar...") }}';
    });
});
</script>
@endsection