@extends('layouts.app')

@section('title') New Lead @endsection

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

@section('content')

@component('components.breadcrumb')
@slot('li_1') Leads @endslot
@slot('title') New Lead @endslot
@endcomponent

@php
    use App\Models\Info\FactoringCategory;

    $factoring = $facilities->where('code', FactoringCategory::CODE_FACTORING)->first();
    $pre_factoring = $facilities->where('code', FactoringCategory::CODE_PRE_FACTORING)->first();
@endphp

{{-- Alert Messages --}}
@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-alert-circle-outline 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 alert-dismissible fade show" role="alert">
    <i class="mdi mdi-alert-circle-outline me-2"></i> Please fix the errors below.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<ul class="list-group mb-3">
    @foreach ($errors->all() as $error)
    <li class="list-group-item list-group-item-danger">{{ $error }}</li>
    @endforeach
</ul>
@endif

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Lead Details</h4>
                {{-- <form action="{{ route('lead.store') }}" method="POST">
                    @csrf
                    <!-- All form fields removed as requested -->
                    <div class="row">
                        <div class="col-lg-6 mb-3">
                            <label for="vendor_id" class="form-label">Vendor <span class="text-danger">*</span></label>
                            <select class="form-select select2" id="vendor_id" name="vendor_id" required>
                                <option disabled {{ old('vendor_id') ? '' : 'selected' }}>Choose...</option>
                                @foreach($vendors as $vendor)
                                <option value="{{ $vendor->id }}" {{ old('vendor_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                                @endforeach
                            </select>
                            @error('vendor_id')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label for="originator" class="form-label">Originator <span class="text-danger">*</span></label>
                            <select class="form-select select2" id="originator" name="originator" required>
                                <option disabled {{ old('originator') ? '' : 'selected' }}>Choose...</option>
                                @foreach($originators as $originator)
                                <option value="{{ $originator->id }}" {{ old('originator') == $originator->id ? 'selected' : '' }}>{{ $originator->name }}</option>
                                @endforeach
                            </select>
                            @error('originator')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label for="facility_id" class="form-label">Facility <span class="text-danger">*</span></label>
                            <select class="form-select select2" id="facility_id" name="facility_id" required>
                                <option disabled {{ old('facility_id') ? '' : 'selected' }}>Choose...</option>
                                @foreach($factoringCategories as $facility)
                                <option value="{{ $facility->id }}" {{ old('facility_id') == $facility->id ? 'selected' : '' }}>{{ $facility->label }}</option>
                                @endforeach
                            </select>
                            @error('facility_id')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label for="purpose_id" class="form-label">Purpose <span class="text-danger">*</span></label>
                            <select class="form-select select2" id="purpose_id" name="purpose_id" required>
                                <option disabled {{ old('purpose_id') ? '' : 'selected' }}>Choose...</option>
                                @foreach($factoringTypes as $purpose)
                                <option value="{{ $purpose->id }}" {{ old('purpose_id') == $purpose->id ? 'selected' : '' }}>{{ $purpose->description }}</option>
                                @endforeach
                            </select>
                            @error('purpose_id')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-12 mb-3">
                            <label for="title_summary" class="form-label">Loan Purpose/Summary <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="title_summary" name="title_summary" rows="3" required>{{ old('title_summary') }}</textarea>
                            @error('title_summary')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label for="fund_amount" class="form-label">Funding Amount <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">RM</span>
                                <input type="number" class="form-control" id="fund_amount" name="fund_amount" min="0" step="0.01" required value="{{ old('fund_amount') }}">
                                @error('fund_amount')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label">Contract Duration <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="tenure_period" name="tenure_period" min="1" required placeholder="Duration" value="{{ old('tenure_period') }}">
                                <select class="form-select" id="tenure_unit" name="tenure_unit" required>
                                    <option disabled {{ old('tenure_unit') ? '' : 'selected' }}>Choose...</option>
                                    @foreach($durationUnits as $unit)
                                    <option value="{{ $unit->code }}" {{ old('tenure_unit') == $unit->code ? 'selected' : '' }}>{{ $unit->description }}</option>
                                    @endforeach
                                </select>

                            </div>
                            @error('tenure_period')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                            @error('tenure_unit')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-md">Save</button>
                    <a href="{{ route('lead.index') }}" class="btn btn-secondary">Cancel</a>
                </form> --}}
                <form class="form" autocomplete="off" method="POST" action="{{ route('lead.store') }}">
                    @csrf
                    <div class="row p-2">
                        <div class="col mb-3">
                            {{-- Factoring --}}
                            <fieldset class="row border rounded p-1 h-100">
                                <legend class="float-none w-auto px-2 fs-6 fw-bold">{{ $factoring->description }}</legend>

                                <label for="purpose_code">Purpose <span class="text-danger">*</span></label>
                                <div class="input-group mb-2">
                                    <input type="hidden" name="facility_code" id="facility_code" value="{{ FactoringCategory::CODE_FACTORING }}"/>
                                    <select class="form-select @error('purpose_code') is-invalid @enderror" id="purpose_code" name="purpose_code" required>
                                        <option value="">Select Purpose</option>
                                        @foreach ($facilities_types as $facilities_type)
                                            @if ($facilities_type->facility_code == $factoring->code)
                                                <option value="{{ $facilities_type->code }}" {{ ($lead->purpose_code ?? '') == $facilities_type->code ? 'selected' : '' }}>{{ $facilities_type->description }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>

                                <label for="fund_amount" class="form-label">Fund Amount <span class="text-danger">*</span></label>
                                <div class="input-group mb-2">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" id="fund_amount" name="fund_amount" class="form-control @error('fund_amount') is-invalid @enderror" value="{{ $lead->fund_amount ?? '' }}" inputmode="numeric" step="0.01" min="1000" required>
                                </div>
                            </fieldset>
                        </div>
                        <div class="col mb-3 d-none" id="pre_factoring_section">
                            {{-- Pre-Factoring --}}
                            <fieldset class="row border rounded p-1 h-100">
                                <legend class="float-none w-auto px-2 fs-6 fw-bold">{{ $pre_factoring->description }}</legend>

                                <label for="pre_purpose_code">Purpose <span class="text-danger">*</span></label>
                                <div class="input-group mb-2">
                                    <input type="hidden" name="pre_facility_code" id="pre_facility_code" value="{{ FactoringCategory::CODE_PRE_FACTORING }}"/>
                                    <select class="form-select @error('pre_purpose_code') is-invalid @enderror" id="pre_purpose_code" name="pre_purpose_code" required>
                                        <option value="">Select Purpose</option>
                                        @foreach ($facilities_types as $facilities_type)
                                            @if ($facilities_type->facility_code == $pre_factoring->code)
                                                <option value="{{ $facilities_type->code }}" {{ ($lead->pre_purpose_code ?? '') == $facilities_type->code ? 'selected' : '' }}>{{ $facilities_type->description }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                
                                <label for="pre_fund_amount" class="form-label">Fund Amount <span class="text-danger">*</span></label>
                                <div class="input-group mb-2">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" id="pre_fund_amount" name="pre_fund_amount" class="form-control @error('pre_fund_amount') is-invalid @enderror" value="{{ $lead->pre_fund_amount ?? '' }}" inputmode="numeric" step="0.01" min="1000" required>
                                </div>
                            </fieldset>
                        </div>
                        <div class="col-md-12 mb-3">
                            {{-- Checkbox Require Pre-factoring --}}
                            <fieldset class="row border rounded p-1 h-100">
                                <legend class="float-none w-auto px-2 fs-6 fw-bold">Require Additional Facility?</legend>
                                <div class="input-group mb-2">
                                    <input type="checkbox" id="pre_checkbox" name="pre_checkbox" value="1" class="me-2" {{ !empty($lead->pre_facility_code) ? 'checked' : '' }}>{{ $pre_factoring->description }}</input>
                                </div>
                            </fieldset>
                        </div>
                                                                
                        <div class="col-md-12 mb-3">
                            {{-- Loan Details --}}
                            <fieldset class="row border rounded p-1 h-100">
                                {{-- Summary --}}
                                <legend class="float-none w-auto px-2 fs-6 fw-bold">Loan Details</legend>
                                <div class="col-md-12 mb-3">
                                    <label for="title_summary">Loan Purpose / Summary <span class="text-danger">*</span></label>
                                    <div class="input-group mb2">
                                        <textarea class="form-control @error('title_summary') is-invalid @enderror" rows="3" id="title_summary" name="title_summary" required>{{ $lead->title_summary ?? '' }}</textarea>
                                    </div>
                                </div>
                                {{-- Tenure --}}
                                <div class="col-lg-4 mb-3">
                                    <label for="tenure_period" class="form-label">Contract Duration <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="number" name="tenure_period" id="tenure_period" class="form-control @error('tenure_period') is-invalid @enderror" value="{{ $lead->tenure_period ?? '' }}" required>
                                        <select name="tenure_unit" id="tenure_unit" class="form-select @error('tenure_unit') is-invalid @enderror" required>
                                            <option value="">Select Unit</option>
                                            @foreach ($tenure_units as $unit)
                                            <option value="{{ $unit->code }}" {{ ($lead->tenure_unit ?? '') == $unit->code ? 'selected' : '' }}>
                                                {{ $unit->description }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                {{-- Originator --}}
                                <div class="col-lg-4 mb-3">
                                    <label for="originator" class="form-label">Originator <span class="text-danger">*</span></label>
                                    <select class="form-select @error('originator') is-invalid @enderror" id="originator" name="originator" required>
                                        <option value="">Select Originator</option>
                                        {{-- @php
                                            $selectedOriginator = $lead->originator ?? '';
                                            $exists = $originators->pluck('id')->contains($selectedOriginator);
                                        @endphp
                                        @if ($selectedOriginator && !$exists)
                                            <option value="{{ $selectedOriginator }}" selected>{{ $selectedOriginator }}</option>
                                        @endif --}}
                                        @foreach ($originators as $originator)
                                            <option value="{{ $originator->id }}" {{ ($lead->originator ?? '') == $originator->id ? 'selected' : '' }}>
                                                {{ $originator->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="vendor_id" class="form-label">Vendor <span class="text-danger">*</span></label>
                                    <select class="form-select @error('vendor_id') is-invalid @enderror" id="vendor_id" name="vendor_id" required>
                                        <option value="">Select Vendor</option>
                                        {{-- @php
                                            $selectedVendor = $lead->vendor ?? '';
                                            $exists = $vendors->pluck('id')->contains($selectedVendor->id);
                                        @endphp
                                        @if ($selectedVendor && !$exists)
                                            <option value="{{ $selectedVendor->id }}" selected>{{ $selectedVendor->id }}</option>
                                        @endif --}}
                                        @foreach ($vendors as $vendor)
                                            <option value="{{ $vendor->id }}">
                                                {{ $vendor->name }} - {{ $vendor->email }}
                                            </option>
                                        @endforeach
                                        
                                    </select>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary float-end">Save & Continue</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="{{ asset('build/libs/select2/js/select2.min.js') }}"></script>

<script>
    // $(document).ready(function() {
    //     $('.select2').select2();

    //     // When a vendor is selected
    //     $("#vendor_id").on("change", function() {
    //         let vendorId = $(this).val() || "all"; // Default to "all" if empty

    //         $.ajax({
    //             url: "{{ route('lead.getVendor', '') }}/" + vendorId
    //             , method: "GET"
    //             , success: function(response) {
    //                 if (response.vendor) {
    //                     // Autofill vendor details
    //                     $("#vendor_type").val(response.vendor.vendor_type);
    //                     $("#vendor_reg_no").val(response.vendor.vendor_reg_no);
    //                     $("#vendor_reg_date").val(response.vendor.vendor_reg_date);
    //                     $("#vendor_address_1").val(response.vendor.vendor_address_1);
    //                     $("#vendor_address_2").val(response.vendor.vendor_address_2);
    //                     $("#vendor_postcode").val(response.vendor.vendor_postcode);
    //                     $("#vendor_city").val(response.vendor.vendor_city);
    //                     $("#vendor_state").val(response.vendor.state.name);
    //                 } else {
    //                     // Clear vendor fields if none selected
    //                     $("#vendor_type, #vendor_reg_no, #vendor_reg_date, #vendor_address_1, #vendor_address_2, #vendor_postcode, #vendor_city, #vendor_state").val('');
    //                 }

    //                 // Populate contact dropdown
    //                 let contactDropdown = $("#contact_id");
    //                 contactDropdown.empty().append('<option selected disabled>Choose...</option>');

    //                 response.contacts.forEach(contact => {
    //                     contactDropdown.append(`<option value="${contact.id}">${contact.contact_person}</option>`);
    //                 });

    //                 contactDropdown.trigger('change'); // Trigger update
    //             }
    //             , error: function() {
    //                 alert("Error fetching vendor details.");
    //             }
    //         });
    //     });

    //     // When a contact is selected, autofill its details
    //     $("#contact_id").on("change", function() {
    //         let contactId = $(this).val();
    //         if (!contactId) {
    //             $("#contact_position, #contact_phone, #contact_email").val('');
    //             return;
    //         }

    //         $.ajax({
    //             url: "{{ route('lead.getContact', '') }}/" + contactId
    //             , method: "GET"
    //             , success: function(response) {
    //                 $("#contact_position").val(response.designation);
    //                 $("#contact_phone").val(response.contact_phone);
    //                 $("#contact_email").val(response.contact_email);
    //             }
    //             , error: function() {
    //                 alert("Error fetching contact details.");
    //             }
    //         });
    //     });

    //     $("#facility_id").on("change", function() {
    //         let facilityId = $(this).val();
    //         let purposeDropdown = $("#purpose_id");
    //         purposeDropdown.empty().append('<option selected disabled>Choose...</option>');
    //         if (!facilityId) return;

    //         $.ajax({
    //             url: "/lookup/purposes/" + facilityId
    //             , method: "GET"
    //             , success: function(response) {
    //                 response.forEach(function(purpose) {
    //                     purposeDropdown.append(`<option value="${purpose.id}">${purpose.description}</option>`);
    //                 });
    //             }
    //             , error: function() {
    //                 alert("Error fetching purposes for selected facility.");
    //             }
    //         });
    //     });
    // });

    $('#originator').select2({
        tags: true
        , placeholder: 'Select or type new'
        , allowClear: true
    });

    document.addEventListener('DOMContentLoaded', function () {
        const checkbox = document.getElementById('pre_checkbox');
        const section = document.getElementById('pre_factoring_section');

        function togglePreFactoring() {
            const inputs = section.querySelectorAll('input, select, textarea');

            if (checkbox.checked) {
                section.classList.remove('d-none');

                inputs.forEach(field => {
                    if (
                        field.name === 'pre_purpose_code' ||
                        field.name === 'pre_fund_amount'
                    ) {
                        field.required = true;
                    }
                    if (field.name === 'pre_facility_code') {
                        field.value = "{{ FactoringCategory::CODE_PRE_FACTORING }}";
                    }
                });
            } else {
                section.classList.add('d-none');

                inputs.forEach(field => {
                    field.required = false;

                    if (field.tagName === 'SELECT') {
                        field.selectedIndex = 0;
                    } else {
                        field.value = '';
                    }
                });
            }
        }

        togglePreFactoring(); // Initial state
        checkbox.addEventListener('change', togglePreFactoring);
    });

</script>

@endsection