@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" />
<style>
    .table-compact th,
    .table-compact td {
        padding: 0.25rem 0.5rem;
    }
    .autofit-textarea {
        overflow: hidden;
        resize: none;
    }
</style>
@endsection

@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

@section('content')

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

{{-- 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>
@endif

<div class="row">
    <div class="col-lg-12">
        <form autocomplete="off" novalidate method="POST" action="{{ route('lead.store') }}">
            @csrf

            {{-- 1. FACILITY APPLIED & AMOUNT --}}
            <div id="facility">
                <div class="card border-1 border-bottom-0 border-dark bg-dark rounded-0 p-1 mb-2">
                    <h5 class="card-title text-center m-0 fs-6 text-white">1. FACILITY APPLIED & AMOUNT</h5>
                </div>
                <div class="card border-dark rounded-0 p-2 mb-3">
                    <table class="table table-bordered border-dark text-center table-compact mb-0" style="table-layout: fixed; word-wrap: break-word;">
                        <colgroup>
                            <col style="width: 25%;">
                            <col style="width: 25%;">
                            <col style="width: 25%;">
                            <col style="width: 25%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th colspan="2">
                                    Pre-Factoring
                                    <input type="hidden" name="pre_facility_code" id="pre_facility_code" value="{{ FactoringCategory::CODE_PRE_FACTORING }}">
                                    <input type="hidden" name="pre_checkbox" id="pre_checkbox_state" value="{{ old('pre_purpose_code') ? '1' : '' }}">
                                </th>
                                <th colspan="2">Factoring <span class="text-danger">*</span></th>
                            </tr>
                            <tr>
                                <th>Type</th>
                                <th>Amount</th>
                                <th>Type</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-start">
                                    <select name="pre_purpose_code" id="pre_purpose_select" class="form-select form-select-sm">
                                        <option value="">-- None --</option>
                                        @foreach ($facilities_types as $facilities_type)
                                            @if ($facilities_type->facility_code == $pre_factoring->code)
                                            <option value="{{ $facilities_type->code }}" {{ old('pre_purpose_code') == $facilities_type->code ? 'selected' : '' }}>{{ $facilities_type->description }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @error('pre_purpose_code')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                </td>
                                <td>
                                    <input type="number" name="pre_fund_amount" id="pre_amount_input" class="form-control form-control-sm" value="{{ old('pre_fund_amount') }}" min="1000" step="0.01" {{ old('pre_purpose_code') ? 'required' : 'disabled' }}>
                                    @error('pre_fund_amount')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                </td>
                                <td class="text-start">
                                    <input type="hidden" name="facility_code" id="facility_code" value="{{ FactoringCategory::CODE_FACTORING }}">
                                    <select name="purpose_code" id="purpose_select" class="form-select form-select-sm" required>
                                        <option value="" disabled {{ old('purpose_code') ? '' : 'selected' }}>-- Select --</option>
                                        @foreach ($facilities_types as $facilities_type)
                                            @if ($facilities_type->facility_code == $factoring->code)
                                            <option value="{{ $facilities_type->code }}" {{ old('purpose_code') == $facilities_type->code ? 'selected' : '' }}>{{ $facilities_type->description }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @error('purpose_code')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                </td>
                                <td>
                                    <input type="number" name="fund_amount" class="form-control form-control-sm" value="{{ old('fund_amount') }}" min="1000" step="0.01" required>
                                    @error('fund_amount')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="col row mt-2">
                        <div class="fw-bold col-auto align-self-center">Duration <span class="text-danger">*</span> :</div>
                        <div class="col-auto">
                            <input type="number" name="tenure_period" id="tenure_period_input" class="form-control form-control-sm" value="{{ old('tenure_period') }}" min="1" step="1" required>
                            @error('tenure_period')<small class="text-danger d-block">{{ $message }}</small>@enderror
                        </div>
                        <div class="col-auto">
                            <select name="tenure_unit" class="form-select form-select-sm" required>
                                <option value="" disabled {{ old('tenure_unit') ? '' : 'selected' }}>Select Unit</option>
                                @foreach ($tenure_units as $unit)
                                <option value="{{ $unit->code }}" {{ old('tenure_unit') == $unit->code ? 'selected' : '' }}>{{ $unit->description }}</option>
                                @endforeach
                            </select>
                            @error('tenure_unit')<small class="text-danger d-block">{{ $message }}</small>@enderror
                        </div>
                    </div>
                    <div class="col row mt-2">
                        <div class="fw-bold col-auto">Loan Summary <span class="text-danger">*</span> :</div>
                        <div class="col">
                            <textarea name="title_summary" class="form-control form-control-sm autofit-textarea" rows="2" maxlength="65535" required>{{ old('title_summary') }}</textarea>
                            @error('title_summary')<small class="text-danger d-block">{{ $message }}</small>@enderror
                        </div>
                    </div>
                    <div class="col row mt-2">
                        <div class="fw-bold col-auto align-self-center">Originator <span class="text-danger">*</span> :</div>
                        <div class="col">
                            <select class="form-select form-select-sm" id="originator" name="originator" required>
                                <option value="" 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 d-block">{{ $message }}</small>@enderror
                        </div>
                    </div>
                    <div class="col row mt-2">
                        <div class="fw-bold col-auto align-self-center">Vendor <span class="text-danger">*</span> :</div>
                        <div class="col">
                            <select class="form-select form-select-sm" id="vendor_id" name="vendor_id" required>
                                <option value="" disabled {{ old('vendor_id') ? '' : 'selected' }}>Choose...</option>
                                @foreach ($vendors as $vendor)
                                <option value="{{ $vendor->id }}" {{ old('vendor_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }} - {{ $vendor->email }}</option>
                                @endforeach
                            </select>
                            @error('vendor_id')<small class="text-danger d-block">{{ $message }}</small>@enderror
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <small class="text-muted" style="font-size: 0.75rem;">Factoring is required. Select a Pre-Factoring purpose only if this lead needs it.</small>
                        <button type="submit" class="btn btn-primary btn-sm">Save & Continue</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

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

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

    document.addEventListener('DOMContentLoaded', function () {
        // Pre-factoring is optional: selecting "-- None --" clears and
        // disables its amount; picking a type enables and requires it.
        // Same behavior as lead/application.blade.php's init section.
        var prePurposeSelect = document.getElementById('pre_purpose_select');
        var preAmountInput = document.getElementById('pre_amount_input');
        var preCheckboxState = document.getElementById('pre_checkbox_state');

        if (prePurposeSelect) {
            prePurposeSelect.addEventListener('change', function () {
                preAmountInput.value = '';
                if (this.value === '') {
                    preAmountInput.disabled = true;
                    preAmountInput.required = false;
                    if (preCheckboxState) preCheckboxState.value = '';
                } else {
                    preAmountInput.disabled = false;
                    preAmountInput.required = true;
                    if (preCheckboxState) preCheckboxState.value = '1';
                }
            });
        }

        // Autofit the loan summary textarea, same pattern used across the app.
        function autoFitTextarea(el) {
            el.style.height = 'auto';
            el.style.height = el.scrollHeight + 'px';
        }
        document.querySelectorAll('.autofit-textarea').forEach(autoFitTextarea);
        document.addEventListener('input', function (e) {
            if (e.target.matches('.autofit-textarea')) autoFitTextarea(e.target);
        });
    });
</script>
@endsection