@extends('front.layouts.main')

@section('title', isset($lead->id) ? 'Edit Lead' : 'Add Lead')

@push('pageCss')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
@endpush

<style>
    .required-label {
        color: red;
    }
</style>

@section('content')

<main class="consultant-steps-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="main-content">

                    <form class="form-steps" id="frmAgentLead"
                        action="{{ isset($lead) ? route('kua-agent-lead.update', $lead->id) : route('kua-agent-lead.store') }}"
                        method="POST" enctype="multipart/form-data" autocomplete="off">
                        @csrf
                        @if (isset($lead))
                        @method('PUT')
                        @endif

                        <fieldset>
                            <div class="box white form-card text-left">
                                <div class="title-wrapper">
                                    <h2 class="box-title">{{ isset($lead->id) ? 'Edit Lead' : 'Add Lead' }}</h2>
                                </div>

                                <div class="row">

                                    {{-- Company --}}
                                    <div class="col-12">
                                        <div class="form-group select">
                                            <label class="control-label">Client</label>
                                            <select class="form-control @error('company_id') is-invalid @enderror"
                                                name="company_id"
                                                data-error="@error('company_id'){{ $message }}@enderror">
                                                <option value="" selected>Select</option>
                                                @foreach ($companies as $company)
                                                <option value="{{ $company->id }}"
                                                    @if (isset($lead) && $lead->company_id == $company->id) selected @endif>
                                                    {{ $company->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Product --}}
                                    <div class="col-12">
                                        <div class="form-group select">
                                            <label class="control-label">Product</label>
                                            <select
                                                class="form-control select-two @error('product_id') is-invalid @enderror"
                                                name="product_id"
                                                data-error="@error('product_id'){{ $message }}@enderror">
                                                <option value="">Select</option>
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Lead Type --}}
                                    <div class="col-12">
                                        <div class="form-group ">
                                            <label class="control-label">Lead Type <span
                                                    class="required-label">*</span></label>
                                            <div class="radio-as-tab">
                                                <input type="radio" id="lead_type_individual" name="lead_type"
                                                    value="individual"
                                                    {{ old('lead_type', $lead->lead_type ?? 'individual') == 'individual' ? 'checked' : '' }}>
                                                <label for="lead_type_individual" class="w-100">Individual</label>
                                                <input type="radio" id="lead_type_business" name="lead_type"
                                                    value="business"
                                                    {{ old('lead_type', $lead->lead_type ?? 'individual') == 'business' ? 'checked' : '' }}>
                                                <label for="lead_type_business" class="w-100">Business</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Individual Fields --}}
                                <div id="individual-fields">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group required">
                                                <label class="control-label">Customer Name</label>
                                                <input type="text" name="customer_name"
                                                    class="form-control @error('customer_name') is-invalid @enderror"
                                                    placeholder="Enter full name here..."
                                                    value="{{ old('customer_name', $lead->customer_name ?? '') }}"
                                                    data-error="@error('customer_name'){{ $message }}@enderror">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group required">
                                                <label class="control-label">Occupation</label>
                                                <input type="text" name="occupation"
                                                    class="form-control @error('occupation') is-invalid @enderror"
                                                    placeholder="Enter what they do"
                                                    value="{{ old('occupation', $lead->occupation ?? '') }}"
                                                    data-error="@error('occupation'){{ $message }}@enderror">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Business Fields --}}
                                <div id="business-fields">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group required">
                                                <label class="control-label">Business Name</label>
                                                <input type="text" name="business_name"
                                                    class="form-control @error('business_name') is-invalid @enderror"
                                                    placeholder="Type here..."
                                                    value="{{ old('business_name', $lead->business_name ?? '') }}"
                                                    data-error="@error('business_name'){{ $message }}@enderror">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group required">
                                                <label class="control-label">Contact Person Name</label>
                                                <input type="text" name="contact_person_name"
                                                    class="form-control @error('contact_person_name') is-invalid @enderror"
                                                    placeholder="Enter full name here..."
                                                    value="{{ old('contact_person_name', $lead->contact_person_name ?? '') }}"
                                                    data-error="@error('contact_person_name'){{ $message }}@enderror">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group required">
                                                <label class="control-label">Business Description</label>
                                                <textarea name="business_description" class="form-control @error('business_description') is-invalid @enderror"
                                                    placeholder="Enter what they do" data-error="@error('business_description'){{ $message }}@enderror">{{ old('business_description', $lead->business_description ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Common Fields --}}
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="control-label">Phone Number</label>
                                            <input type="tel" name="phone_number"
                                                class="form-control @error('phone_number') is-invalid @enderror phone_number"
                                                value="{{ old('phone_number', $lead->phone_number ?? '') }}"
                                                placeholder="Type here..."
                                                data-error="@error('phone_number'){{ $message }}@enderror">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="control-label">Email</label>
                                            <input type="email" name="email"
                                                class="form-control @error('email') is-invalid @enderror"
                                                value="{{ old('email', $lead->email ?? '') }}"
                                                placeholder="Type here..."
                                                data-error="@error('email'){{ $message }}@enderror">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group required select">
                                            <label class="control-label">Location</label>
                                            <select name="location"
                                                class="form-control select-two @error('location') is-invalid @enderror"
                                                data-error="@error('location'){{ $message }}@enderror">
                                                <option value="">Select</option>
                                                @foreach ($regionList as $region)
                                                <option value="{{ $region->id }}"
                                                    {{ old('location_id', $lead->location_id ?? '') == $region->id ? 'selected' : '' }}>
                                                    {{ $region->region_name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group required date">
                                            <label class="control-label">Expected Closure Date</label>
                                            <input type="text" name="expected_closure_date"
                                                class="form-control bg-white @error('expected_closure_date') is-invalid @enderror"
                                                id="expected_closure_date" readonly
                                                value="{{ old('expected_closure_date', isset($lead->expected_closure_date) ? \Carbon\Carbon::parse($lead->expected_closure_date)->format('d-m-Y') : '') }}"
                                                data-error="@error('expected_closure_date'){{ $message }}@enderror">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="control-label">Notes</label>
                                            <textarea name="notes" class="form-control @error('notes') is-invalid @enderror" rows="4"
                                                data-error="@error('notes'){{ $message }}@enderror">{{ old('notes', $lead->notes ?? '') }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between mt-4 align-items-center">
                                    <a href="{{ route('kua-agent-lead.index') }}"
                                        class="btn btn-secondary me-2">Cancel</a>
                                    <button type="submit" class="action-button btn btn-em submit formSubmit">Submit</button>
                                </div>
                            </div>
                        </fieldset>
                    </form>

                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageJs')
<script>
    $(".formSubmit").click(function() {
        $("#frmAgentLead").submit();
        $(".formSubmit").attr("disabled", true);
        $(".formSubmit").text("Please wait..");
    });

    //called when key is pressed in textbox
    $(".phone_number").keypress(function(e) {
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && e.which != 40 && e.which != 41 && e.which != 45 && e.which != 43 && e.which != 32 && (e
                .which < 48 || e.which > 57)) {
            return false;
        }
    });
    document.addEventListener('DOMContentLoaded', function() {
        
        const initialType = document.querySelector('input[name="lead_type"]:checked').value;
        updateFormState(initialType);

        document.querySelectorAll('input[name="lead_type"]').forEach(radio => {
            radio.addEventListener('change', function() {
                updateFormState(this.value);
            });
        });

        // Inject server-side errors as client-side messages
        document.querySelectorAll('[data-error]').forEach(function(field) {
            const errorMessage = field.getAttribute('data-error');
            if (errorMessage) {
                const feedback = document.createElement('div');
                feedback.className = 'invalid-feedback d-block';
                feedback.innerText = errorMessage;
                field.classList.add('is-invalid');
                field.parentNode.appendChild(feedback);
            }
        });

    });

    function updateFormState(type) {
        const individual = document.getElementById('individual-fields');
        const business = document.getElementById('business-fields');
        const isInd = type === 'individual';

        individual.style.display = isInd ? 'block' : 'none';
        business.style.display = isInd ? 'none' : 'block';
    }

    // Datepicker
    $('#expected_closure_date').datepicker({
        autoHide: true,
        format: 'dd-mm-yyyy',
        startDate: new Date(),
        zIndex: 2048,
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // existing updateFormState and datepicker setup remain unchanged

        document.querySelector('.form-steps').addEventListener('submit', function(e) {
            const form = this;
            const leadType = document.querySelector('input[name="lead_type"]:checked').value;

            // Clear previous errors
            form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
            form.querySelectorAll('.invalid-feedback').forEach(el => el.remove());

            // Define required fields
            const requiredFields = [
                // 'company_id',
                // 'product_id',
                // 'phone_number',
                'location',
                'expected_closure_date'
            ];

            const individualFields = ['customer_name', 'occupation'];
            const businessFields = ['business_name', 'contact_person_name', 'business_description'];

            if (leadType === 'individual') {
                requiredFields.push(...individualFields);
            } else if (leadType === 'business') {
                requiredFields.push(...businessFields);
            }

            let isValid = true;

            requiredFields.forEach(name => {
                const input = form.querySelector(`[name="${name}"]`);

                if (input && !input.value.trim()) {
                    isValid = false;
                    input.classList.add('is-invalid');

                    const label = form.querySelector(`label[for="${input.id}"]`) || input
                        .closest('.form-group')?.querySelector('label');
                    const labelText = label ? label.textContent.replace('*', '').trim() : name;

                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'invalid-feedback d-block';
                    errorDiv.innerText = `The ${labelText.toLowerCase()} field is required.`;

                    input.parentNode.appendChild(errorDiv);
                }

            });

            if (!isValid) {
                e.preventDefault();
                e.stopPropagation();
            }
        });

    });
</script>

<script>
    $(document).ready(function() {
        var $companySelect = $('select[name="company_id"]');
        var $productSelect = $('select[name="product_id"]');
        var selectedProductId = "{{ isset($lead) ? $lead->product_id : '' }}";

        function loadProducts(companyId, preselectProductId = null) {
            if (!companyId) {
                $productSelect.empty().append('<option value="">Select</option>').prop('disabled', true);
                return;
            }

            $.ajax({
                url: "{{ route('kua-agent-lead.get-products-by-company') }}",
                type: "POST",
                data: {
                    company_id: companyId
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $productSelect.empty().append('<option value="">Select</option>');
                    response.products.forEach(function(product) {
                        var isSelected = preselectProductId && product.id ==
                            preselectProductId;
                        var optionHtml = '<option value="' + product.id + '"' + (
                                isSelected ? ' selected' : '') + '>' + product
                            .product_name + '</option>';
                        $productSelect.append(optionHtml);
                    });
                    $productSelect.prop('disabled', false);
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        }

        if ($companySelect.val()) {
            loadProducts($companySelect.val(), selectedProductId);
        }

        $companySelect.on('change', function() {
            loadProducts($(this).val());
        });
    });
</script>
@endpush