@extends('layouts.app')

@section('title')
Application
@endsection

@section('css')
<link href="{{ asset('build/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Sweet Alert-->
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

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

<div class="row">
    <div class="col-12">
        <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>

                <div class="row">
                    <div class="col-lg-3 mb-4">
                        <div class="step-sidebar">
                            <a href="{{ route('application.edit', ['section' => 'init', 'leadSN' => $lead->serial_no]) }}">
                                <div class="step-item">
                                    <div class="step-number">1</div>
                                    <div class="step-label">Create Application</div>
                                </div>
                            </a>
                            <a href="{{ route('application.edit', ['section' => 'applicant', 'leadSN' => $lead->serial_no]) }}">
                                <div class="step-item">
                                    <div class="step-number">2</div>
                                    <div class="step-label">Applicant Information</div>
                                </div>
                            </a>
                            <a href="{{ route('application.edit', ['section' => 'bank', 'leadSN' => $lead->serial_no]) }}">
                                <div class="step-item">
                                    <div class="step-number">3</div>
                                    <div class="step-label">Bank Details</div>
                                </div>
                            </a>
                            <a href="{{ route('application.edit', ['section' => 'contract', 'leadSN' => $lead->serial_no]) }}">
                                <div class="step-item">
                                    <div class="step-number">4</div>
                                    <div class="step-label">Contract(s)</div>
                                </div>
                            </a>
                            <a href="{{ route('application.edit', ['section' => 'payee', 'leadSN' => $lead->serial_no]) }}">
                                <div class="step-item">
                                    <div class="step-number">5</div>
                                    <div class="step-label">Pre-Factoring Payee(s)</div>
                                </div>
                            </a>
                            <a href="{{ route('application.edit', ['section' => 'document', 'leadSN' => $lead->serial_no]) }}">
                                <div class="step-item">
                                    <div class="step-number">6</div>
                                    <div class="step-label">Documents</div>
                                </div>
                            </a>
                            <a href="{{ route('application.edit', ['section' => 'confirm', 'leadSN' => $lead->serial_no]) }}">
                                <div class="step-item">
                                    <div class="step-number">7</div>
                                    <div class="step-label">Declarations</div>
                                </div>
                            </a>
                            <div class="step-item active">
                                <div class="step-number">8</div>
                                <div class="step-label">Pay Application Fee</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        @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 (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="mdi mdi-block-helper me-2"></i>
                            {{ session('error') }}
                            <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>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif

                        @if ($lead->payments()->where('type','P1002')->where('status','paid')->where('method','FPX')->exists())
                        <div class="alert alert-success">
                            <i class="mdi mdi-check-circle-outline me-2"></i>
                            Payment has been made through FPX. Thank you!
                        </div>
                        <form action="{{ route('application.save', ['section' => 'submit_application', 'leadSN' => $lead->serial_no ?? null]) }}" method="POST" class="text-end">
                            @csrf
                            <button type="submit" class="btn btn-success">
                                Submit Application
                            </button>
                        </form>
                        @elseif($lead->payments()->where('type','P1002')->where('status','manual')->where('method','manual')->exists())
                        @php
                            $manualFile = $lead->payments()->where('type','P1002')->where('status','manual')->where('method','manual')->first();
                        @endphp
                        <div class="alert alert-success">
                            <i class="mdi mdi-check-circle-outline me-2"></i>
                            Payment receipt has been uploaded. Thank you!
                        </div>
                        <div class="mb-3">
                            Uploaded file:
                            <a href="{{ Storage::disk('supportingdoc')->url($manualFile->file_path) }}" target="_blank">
                                {{ $manualFile->file_name }}
                            </a>
                        </div>
                        {{-- @else --}}

                        <form autocomplete="off" class="form" method="POST" action="{{ route('application.save', ['section' => 'fee', 'leadSN' => $lead->serial_no ?? null]) }}" enctype="multipart/form-data">
                            @csrf
                            
                            <div class="row mb-4">
                                <div class="col-lg-4 mb-3">
                                    <label>Fee Amount (RM)</label>
                                    <input type="text" class="form-control" name="amount" value="{{ number_format($amount, 2) }}" readonly>
                                </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="manual" class="card-radio-input">
                                        <div class="card-radio">
                                            <i class="mdi mdi-file-upload-outline font-size-30 text-primary align-middle me-2"></i>
                                            <span>Upload Payment Receipt</span>
                                        </div>
                                    </label>
                                </div>
                                <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 d-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 mb-3">
                                <a class="btn btn-light me-2" href="{{ route('application.edit', ['section' => 'document', 'leadSN' => $lead->serial_no]) }}">Previous</a>
                                <button type="submit" class="btn btn-primary">Proceed to Payment</button>
                            </div>

                        </form>

                        <form action="{{ route('application.save', ['section' => 'submit_application', 'leadSN' => $lead->serial_no ?? null]) }}" method="POST" class="text-end">
                            @csrf
                            <button type="submit" class="btn btn-success">
                                Submit Application
                            </button>
                        </form>
                        @else
                        <form autocomplete="off" class="form" method="POST" action="{{ route('application.save', ['section' => 'fee', 'leadSN' => $lead->serial_no ?? null]) }}" enctype="multipart/form-data">
                            @csrf
                            
                            <div class="row mb-4">
                                <div class="col-lg-4 mb-3">
                                    <label>Fee Amount (RM)</label>
                                    <input type="text" class="form-control" name="amount" value="{{ number_format($amount, 2) }}" readonly>
                                </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="manual" class="card-radio-input">
                                        <div class="card-radio">
                                            <i class="mdi mdi-file-upload-outline font-size-30 text-primary align-middle me-2"></i>
                                            <span>Upload Payment Receipt</span>
                                        </div>
                                    </label>
                                </div>
                                <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 d-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 mb-3">
                                <a class="btn btn-light me-2" href="{{ route('application.edit', ['section' => 'document', 'leadSN' => $lead->serial_no]) }}">Previous</a>
                                <button type="submit" class="btn btn-primary">Proceed to Payment</button>
                            </div>

                        </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- end col -->
</div>
<!-- end row -->

@endsection
@section('script')

{{-- select2 --}}
<script src="{{ asset('build/libs/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('build/js/pages/form-advanced.init.js') }}"></script>

<!-- Sweet Alerts js -->
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const section = document.getElementById('manual-payment-section');
        const file = document.getElementById('payment_docs');

        document.querySelectorAll('input[name="payment_method"]').forEach(radio => {
            radio.addEventListener('change', function () {
                if (this.value === 'manual' && this.checked) {
                    section.classList.remove('d-none');
                    file.required = true;
                } else if (this.checked) {
                    section.classList.add('d-none');
                    file.required = false;
                    file.value = ''; // optional
                }
            });
        });
    });

</script>


@endsection