@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') Create Application @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                <h4 class="card-title">Pre-Factoring Payee</h4>
                <p class="card-title-desc">
                    Please provide details of the payee(s) information. This section is required only if you are applying for a <strong>Pre-Factoring</strong> or <strong>Post-Factoring</strong> facility.
                    The information will be used to verify payee legitimacy, assess financial obligations, and determine eligibility for Payee-based financing or factoring facilities.
                </p>

                <div class="row">
                    <div class="col-lg-3 mb-4">
                        <div class="step-sidebar">
                            <a href="{{ route('application.edit', ['section' => 'init', 'leadSN' => $leadSN]) }}">
                                <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' => $leadSN]) }}">
                                <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' => $leadSN]) }}">
                                <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' => $leadSN]) }}">
                                <div class="step-item">
                                    <div class="step-number">4</div>
                                    <div class="step-label">Contract(s)</div>
                                </div>
                            </a>
                            <div class="step-item active">
                                <div class="step-number">5</div>
                                <div class="step-label">Pre-Factoring Payee(s)</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">6</div>
                                <div class="step-label">Documents</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">7</div>
                                <div class="step-label">Declarations</div>
                            </div>
                            <div class="step-item">
                                <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
                        <form class="repeater" method="POST" action="{{ route('application.save', ['section' => 'payee', 'leadSN' => $leadSN ?? null]) }}">
                            @csrf
                            <div data-repeater-list="payees">
                                <!-- Existing payees -->
                                @if (!empty($payees) && $payees->count() > 0)
                                @foreach ($payees as $payee)
                                <div data-repeater-item class="row border-bottom mb-3">
                                    <!-- Hidden ID Field -->
                                    <input type="hidden" name="serial_no" value="{{ $payee->serial_no }}" />

                                    <div class="mb-3 col-lg-12">
                                        <label for="company">Company Name <span class="text-danger">*</span></label>
                                        <input required type="text" id="company" name="company" class="form-control" placeholder="Enter company name" value="{{ $payee->company }}">
                                        @error('payees.*.company')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="mb-3 col-lg-6">
                                        <label for="address_1">Address (Line 1) <span class="text-danger">*</span></label>
                                        <input required type="text" id="address_1" name="address_1" class="form-control" value="{{ $payee->address_1 }}">
                                        @error('payees.*.address_1')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-lg-6">
                                        <label for="address_2">Address (Line 2)</label>
                                        <input type="text" id="address_2" name="address_2" class="form-control" value="{{ $payee->address_2 }}">
                                        @error('payees.*.address_2')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-lg-4">
                                        <label for="postcode">Postcode <span class="text-danger">*</span></label>
                                        <input required type="text" id="postcode" name="postcode" class="form-control postcode-input" value="{{ old('payees.' . $loop->index . '.postcode', $payee->postcode ?? '') }}" pattern="[0-9]{5}" maxlength="5" onblur="getCityState(this)">
                                        @error('payees.*.postcode')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-lg-4">
                                        <label for="city">City <span class="text-danger">*</span></label>
                                        <input required type="text" id="city" name="city" class="form-control city-input" value="{{ old('payees.' . $loop->index . '.city', $payee->city ?? '') }}">
                                        @error('payees.*.city')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-lg-4">
                                        <label for="state">State <span class="text-danger">*</span></label>
                                        <select required id="state" name="state" class="form-select state-input">
                                            <option value="">State</option>
                                            @foreach ($states as $state)
                                            <option value="{{ $state->code }}" {{ old('payees.' . $loop->index . '.state', $payee->state ?? '') == $state->code ? 'selected' : '' }}>
                                                {{ $state->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('payees.*.state')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="mb-3 col-lg-8">
                                        <label for="purpose">Purpose <span class="text-danger">*</span></label>
                                        <input required type="text" id="purpose" name="purpose" class="form-control" value="{{ $payee->purpose }}">
                                        @error('payees.*.purpose')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-lg-3 mb-3">
                                        <label for="amount" class="form-label">Amount <span class="text-danger">*</span></label>
                                        <div required class="input-group">
                                            <span class="input-group-text">RM</span>
                                            <input type="number" id="amount" name="amount" class="form-control" value="{{ old('amount', $payee->amount ?? '') }}" inputmode="numeric" step="0.01" min="1000">
                                            @error('amount')
                                            <small class=" text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-1 align-self-center">
                                        <button data-repeater-delete type="button" class="btn btn-danger">
                                            Delete
                                        </button>
                                    </div>
                                </div>
                                @endforeach
                                @endif

                                {{-- Empty Repeater Item for Adding New Payee --}}
                                @if (empty($payees) || $payees->count() == 0)
                                <div data-repeater-item class="row border-bottom mb-3">
                                    <input type="hidden" name="serial_no" value="" />

                                    <div class="mb-3 col-lg-12">
                                        <label>Company Name <span class="text-danger">*</span></label>
                                        <input required type="text" name="company" class="form-control" placeholder="Enter company name">
                                        @error('payees.*.company')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="mb-3 col-lg-6">
                                        <label>Address (Line 1) <span class="text-danger">*</span></label>
                                        <input required type="text" name="address_1" class="form-control">
                                        @error('payees.*.address_1')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-lg-6">
                                        <label>Address (Line 2)</label>
                                        <input type="text" name="address_2" class="form-control">
                                        @error('payees.*.address_2')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-lg-4">
                                        <label>Postcode <span class="text-danger">*</span></label>
                                        <input required type="text" name="postcode" class="form-control postcode-input" onblur="getCityState(this)">
                                        @error('payees.*.postcode')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-lg-4">
                                        <label>City <span class="text-danger">*</span></label>
                                        <input required type="text" name="city" class="form-control city-input">
                                        @error('payees.*.city')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-lg-4">
                                        <label>State <span class="text-danger">*</span></label>
                                        <select required name="state" class="form-select state-input">
                                            <option value="">State</option>
                                            @foreach ($states as $state)
                                            <option value="{{ $state->code }}">{{ $state->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('payees.*.state')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="mb-3 col-lg-8">
                                        <label>Purpose <span class="text-danger">*</span></label>
                                        <input required type="text" name="purpose" class="form-control">
                                        @error('payees.*.purpose')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-lg-3 mb-3">
                                        <label>Amount <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text">RM</span>
                                            <input required type="number" name="amount" class="form-control" min="0" step="0.01">
                                        </div>
                                        @error('payees.*.amount')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-lg-1 align-self-center">
                                        <button data-repeater-delete type="button" class="btn btn-danger">
                                            Delete
                                        </button>
                                    </div>
                                </div>
                                @endif
                            </div>

                            <!-- Add New Payee Button -->
                            <input data-repeater-create type="button" class="btn btn-success mt-3" value="Add Payee" />

                            <!-- Submit Button -->
                            <div class="text-end mt-3">
                                <a class="btn btn-light me-2" href="{{ route('application.edit', ['section' => 'contract', 'leadSN' => $leadSN]) }}">Previous</a>
                                <button type="submit" class="btn btn-primary">Save & Continue</button>
                            </div>
                        </form>
                    </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>

<!-- form repeater js -->
<script src="{{ URL::asset('build/libs/jquery.repeater/jquery.repeater.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/form-repeater.int.js') }}"></script>

<script>
    function getCityState(input) {
        var $row = $(input).closest('[data-repeater-item]');
        var postcode = $(input).val();

        if (!postcode) return;

        $.ajax({
            url: '/lookup/postcode/' + postcode
            , type: 'GET'
            , success: function(response) {
                // Update city and state in the same repeater row
                $row.find('.city-input').val(response.city);
                $row.find('.state-input').val(response.state_code).trigger('change');
            }
            , error: function() {
                alert('Invalid postcode or data not found.');
            }
        });
    }

</script>

@endsection