@extends('layouts.app')

@section('title') Pay Application Fee @endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Application @endslot
@slot('title') Pay Application Fee @endslot
@endcomponent

<div class="row">
    <div class="col-lg-2">
        <a href="{{ route('application.edit', ['section' => 'init', 'encryptedLeadId' => encrypt($lead->id)]) }}">
            <div class="card border border-primary">
                <div class="card-body text-center text-primary">
                    <h3><i class="bx bxs-book-content"></i></h3>
                    <h6>Create Application</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-2">
        <a href="{{ route('application.edit', ['section' => 'details', 'encryptedLeadId' => encrypt($lead->id)]) }}">
            <div class="card border border-primary">
                <div class="card-body text-center text-primary">
                    <h3><i class="bx bxs-detail"></i></h3>
                    <h6>Details</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-2">
        <a href="{{ route('application.edit', ['section' => 'funding', 'encryptedLeadId' => encrypt($lead->id)]) }}">
            <div class="card border border-primary">
                <div class="card-body text-center text-primary">
                    <h3><i class="bx bxs-calculator"></i></h3>
                    <h6>Funding Requirement</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-2">
        <a href="{{ route('application.edit', ['section' => 'docs', 'encryptedLeadId' => encrypt($lead->id)]) }}">
            <div class="card border border-primary">
                <div class="card-body text-center text-primary">
                    <h3><i class="bx bxs-file-doc"></i></h3>
                    <h6>Documents</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-2">
        <a href="{{ route('application.edit', ['section' => 'confirm', 'encryptedLeadId' => encrypt($lead->id)]) }}">
            <div class="card border border-primary">
                <div class="card-body text-center text-primary">
                    <h3><i class="bx bxs-check-circle"></i></h3>
                    <h6>Confirmation</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-2">
        <div class="card bg-primary">
            <div class="card-body text-center">
                <h3><i class="bx bx-money-withdraw"></i></h3>
                <h6>Pay Application Fee</h6>
            </div>
        </div>
    </div>
</div>

@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="mdi mdi-check-all me-2"></i>
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@if ($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Pay Application Fee</h4>
        <p class="card-title-desc"> Please pay the application fee to proceed. Upload your payment slip as proof. </p>

        <form action="{{ route('application.save', ['section' => 'fee', 'encryptedLeadId' => encrypt($lead->id)]) }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row mb-4">

                <div class="col-lg-3 mb-3">
                    <label>Fee Amount (RM)</label>
                    <input type="text" class="form-control" name="amount" value="{{ number_format($amount, 2) }}" readonly>
                </div>
                {{-- <div class="col-md-3">
                    <label class="card-radio-label mb-2">
                        <input type="radio" name="payment_method" value="manual" class="card-radio-input" checked>

                        <div class="card-radio">
                            <i class="mdi mdi-file-upload-outline font-size-24 text-primary align-middle me-2"></i>
                            <span>Manual Upload</span>
                        </div>
                    </label>
                </div> --}}
                <label>Choose Payment Method</label>
                <div class="col-md-3">
                    <label class="card-radio-label mb-2">
                        <input type="radio" name="payment_method" value="FPX" class="card-radio-input">

                        <div class="card-radio">
                            <img src="{{ asset('build/images/brands/fpx.png') }}" alt="FPX" height="45" class="me-2">
                            <span>Online FPX</span>
                        </div>
                    </label>
                </div>
            </div>

            {{-- Manual Upload Fields --}}
            <div id="manual-payment-section" class="mt-3" style="display: none;">
                <div class="mb-3">
                    <label for="payment_docs">Upload Payment Receipt</label>
                    <input type="file" class="form-control" name="payment_docs" id="payment_docs" accept="image/*,.pdf">
                </div>
                <div class="mb-3">
                    <label for="payment_notes">Notes (Optional)</label>
                    <textarea class="form-control" name="payment_notes" id="payment_notes" rows="3"></textarea>
                </div>
            </div>

            <div class="text-end mt-4">
                <button type="submit" class="btn btn-primary">Proceed Payment</button>
            </div>
        </form>

    </div>
</div>

@endsection

@section('script')
<script>
    // document.querySelectorAll('input[name="payment_method"]').forEach(function(radio) {
    //     radio.addEventListener('change', function() {
    //         const manualSection = document.getElementById('manual-payment-section');
    //         if (this.value === 'manual') {
    //             manualSection.style.display = 'block';
    //         } else {
    //             manualSection.style.display = 'none';
    //         }
    //     });
    // });

    // // Trigger initial toggle based on pre-selected option
    // document.querySelector('input[name="payment_method"]:checked').dispatchEvent(new Event('change'));

</script>

@endsection