@extends('front.layouts.main')

@section('title', 'Customer Details')

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

    /* Red asterisk for required labels */
    .required-label::after {
        content: "*";
        color: red;
        margin-left: 4px;
        vertical-align: top;
    }

    /* Consistent dropdown appearance */
    select.form-control {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
        padding-right: 2rem;
    }
</style>
@endpush

@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">
                    <div class="box white form-card text-left">
                        <div class="title-wrapper">
                            <h2 class="box-title">Customer Details</h2>
                        </div>

                        @if (isset($customer->id))
                        <form method="POST" action="{{ route('kua-agent-customer.update', $customer->id) }}"
                            enctype="multipart/form-data" id="customer-form">
                            <input type="hidden" name="edit" value="true">
                            @method('PUT')
                            @else
                            <form method="POST" action="{{ route('kua-agent-customer.store') }}"
                                enctype="multipart/form-data" id="customer-form">
                                <input type="hidden" name="edit" value="false">
                                @endif
                                @csrf

                                {{-- @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                @endforeach
                                </ul>
                    </div>
                    @endif --}}

                    @if (request('lead_id'))
                    <input type="hidden" name="lead_id" value="{{ request('lead_id') }}">
                    @endif

                    @php
                    $leadType = $lead->lead_type ?? null; // null when not converting from a lead
                    $isEditing = isset($customer) && isset($customer->id);

                    // What should be selected
                    $selectedType = old('customer_type', $customer->customer_type ?? ($leadType ?? 'individual'));

                    // UI rules
                    // - Converting from a lead: disable ONLY the other option
                    // - Editing an existing customer: lock it completely (disable both) + submit hidden value
                    $disableIndividual = ($leadType === 'business') || ($isEditing && $selectedType !== 'individual');
                    $disableBusiness = ($leadType === 'individual') || ($isEditing && $selectedType !== 'business');
                    $lockAll = $isEditing; // fully lock on edit
                    @endphp

                    <fieldset>
                        @if(!$isEditing)
                        <div class="row">
                            <div class="col-6 md-6">
                                <div class="form-group">
                                    <label class="required-label">Client Details</label>
                                    <select name="client_id" id="client_id" class="form-control" data-error="@error('client_id') {{ $message }} @enderror">
                                        <option value="">Select</option>
                                        @foreach ($clients as $client)
                                        <option value="{{ $client->id }}"
                                            {{ old('client_id', $customer->client_id ?? '') == $client->id ? 'selected' : '' }}>
                                            {{ $client->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-6 md-6">
                                <div class="form-group">
                                    <label class="required-label">Product Details</label>
                                    <select name="product_id" id="product_id" class="form-control" data-error="@error('product_id') {{ $message }} @enderror">
                                        <option value="">Select</option>
                                        @foreach ($products as $product)
                                        <option value="{{ $product->id }}"
                                            {{ old('product_id', $customer->product_id ?? '') == $product->id ? 'selected' : '' }}>
                                            {{ $product->product_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        @endif


                        <div>
                            <div class="form-group d-flex justify-content-between align-items-center mb-1">
                                <label class="required-label">Customer Type</label>

                                {{-- If fully locked (editing), submit value via hidden input because disabled inputs don't submit --}}
                                @if ($lockAll)
                                <input type="hidden" name="customer_type" value="{{ $selectedType }}">
                                @endif

                                <div class="radio-as-tab" data-error="@error('customer_type') {{ $message }} @enderror">
                                    <input type="radio"
                                        id="customer_type_individual"
                                        name="customer_type"
                                        value="individual"
                                        autocomplete="off"
                                        {{ $selectedType === 'individual' ? 'checked' : '' }}
                                        {{ $disableIndividual ? 'disabled' : '' }}
                                        onchange="toggleCustomerType(this.value)">
                                    <label for="customer_type_individual" class="costumer-lable">Individual</label>

                                    <input type="radio"
                                        id="customer_type_business"
                                        name="customer_type"
                                        value="business"
                                        autocomplete="off"
                                        {{ $selectedType === 'business' ? 'checked' : '' }}
                                        {{ $disableBusiness ? 'disabled' : '' }}
                                        onchange="toggleCustomerType(this.value)">
                                    <label for="customer_type_business" class="costumer-lable">Business</label>
                                </div>
                            </div>

                            @if ($leadType)
                            <div class="small text-muted mt-1">
                                Customer type is fixed by the lead ({{ ucfirst($leadType) }}).
                            </div>
                            @elseif($isEditing)
                            <div class="small text-muted mt-1">
                                Customer type is locked ({{ ucfirst($selectedType) }}).
                            </div>
                            @endif
                        </div>


                        <div id="individual-fields" style="display: none;">
                            @include(
                            'front.modules.kua_agent.customers.partials.individual-fields',
                            [
                            'customer' => $customer,
                            'nationalIdTypes' => $nationalIdTypes,
                            'isEditing' => $isEditing
                            ]
                            )
                        </div>
                        <div id="business-fields" style="display: none;">
                            @include('front.modules.kua_agent.customers.partials.business-fields', [
                            'businessTypes' => $businessTypes,
                            'industrySectors' => $industrySectors,
                            'businessSegments' => $businessSegments,
                            'regions' => $regions,
                            'customer' => $customer,
                            'isEditing' => $isEditing
                            ])
                        </div>

                        <div id="key-contacts-section" style="display: none;">
                            <h3 class="mb-4">Key Contact Persons</h3>
                            <hr class="my-4">

                            @include('front.modules.kua_agent.customers.partials.key-contacts')
                        </div>

                        <div class="mt-4 pt-4 text-end d-flex justify-content-between border-top">
                            <button type="button" class="btn btn-secondary"
                                id="customer-cancel-btn">Cancel</button>
                            <button type="submit" id="customer-save-btn" class="btn btn-em btn-primary-em">
                                {{ isset($customer->id) ? 'Update' : 'Save' }}
                            </button>
                        </div>
                    </fieldset>
                    </form>

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

{{-- @push('pageJs')
    <script>
        function toggleCustomerType(type) {
            const individual = document.getElementById('individual-fields');
            const business = document.getElementById('business-fields');
            const keyContacts = document.getElementById('key-contacts-section');

            individual.style.display = type === 'individual' ? 'block' : 'none';
            business.style.display = type === 'business' ? 'block' : 'none';
            keyContacts.style.display = type === 'business' ? 'block' : 'none';

            document.getElementById('registered_company_name').required = (type === 'business');
            document.getElementById('tin_business').required = (type === 'business');
            document.getElementById('full_name').required = (type === 'individual');
            document.getElementById('phone_number').required = (type === 'individual');
            document.getElementById('email').required = (type === 'individual');
            document.getElementById('national_id_type').required = (type === 'individual');
            document.getElementById('national_id_number').required = (type === 'individual');
            document.getElementById('tin_individual').required = (type === 'individual');
        }
        // function toggleCustomerType(type) {
        //     document.getElementById('individual-fields').style.display = type === 'individual' ? 'block' : 'none';
        //     document.getElementById('business-fields').style.display = type === 'business' ? 'block' : 'none';
        //     document.getElementById('key-contacts-section').style.display = type === 'business' ? 'block' : 'none';
        // }


        document.addEventListener('DOMContentLoaded', function() {
            const selected = document.querySelector('input[name="customer_type"]:checked');
            const initialType = selected ? selected.value : 'individual';
            toggleCustomerType(initialType);
        });

        $('#business_license').on('change', function() {
            const name = $(this).val().split('\\').pop();
            $('#businessLicenseFileName').text(name);
        });

        $('#customer-save-btn').on('click', function(event) {
            $("#customer-save-btn").attr("disabled", true);
            $("#customer-save-btn").text("Please wait...");
            const leadId = $('input[name="lead_id"]').val();
            const url = leadId ?
                "{{ route('kua-agent-lead.update-lead-status', ['lead_id' => ':lead_id']) }}"
.replace(':lead_id', leadId) :
"{{ route('kua-agent-lead.index') }}";

$('#customer-cancel-btn').on('click', function() {
var leadId = $('input[name="lead_id"]').val();
if (leadId) {
$.ajax({
url: url,
type: 'POST',
data: {
status: 'new',
_token: $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
window.location.href = "{{ route('kua-agent-lead.index') }}";
},
error: function() {
window.location.href = "{{ route('kua-agent-lead.index') }}";
}
});
} else {
window.location.href = "{{ route('kua-agent-lead.index') }}";
}
});
});

$('#customer-cancel-btn').on('click', function() {
window.location.href = "{{ route('kua-agent-lead.index') }}";
// const leadId = $('input[name="lead_id"]').val();
// const url = leadId ?
// "{{ route('kua-agent-lead.update-lead-status', ['lead_id' => ':lead_id']) }}"
// .replace(':lead_id', leadId) :
// "{{ route('kua-agent-lead.index') }}";

// $('#customer-cancel-btn').on('click', function() {
// var leadId = $('input[name="lead_id"]').val();
// if (leadId) {
// $.ajax({
// url: url,
// type: 'POST',
// data: {
// status: 'new',
// _token: $('meta[name="csrf-token"]').attr('content')
// },
// success: function(response) {
// window.location.href = "{{ route('kua-agent-lead.index') }}";
// },
// error: function() {
// window.location.href = "{{ route('kua-agent-lead.index') }}";
// }
// });
// } else {
// window.location.href = "{{ route('kua-agent-lead.index') }}";
// }
// });
});
</script>

@endpush --}}
@push('pageJs')
<script>
    //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;
        }
    });
    (function() {
        // ---------- utils ----------
        const qs = (s, r = document) => r.querySelector(s);
        const qsa = (s, r = document) => Array.from(r.querySelectorAll(s));

        const routes = {
            index: "{{ route('kua-agent-lead.index') }}",
            updateTmpl: "{{ route('kua-agent-lead.update-customer-id-by-tin')}}"
        };

        function getLeadId() {
            return qs('input[name="lead_id"]')?.value?.trim();
        }

        function updateUrlForLead(leadId) {
            return leadId ? routes.updateTmpl : routes.index;
        }

        function getCsrfToken() {
            return qs('meta[name="csrf-token"]')?.getAttribute('content') || '';
        }

        // Fire & forget status update (survives navigation)
        function updateLeadStatus(status) {
            const leadId = getLeadId();

            // Get TIN from either individual or business input
            const tinIndividual = document.getElementById('tin_individual');
            const tinBusiness = document.getElementById('tin_business');

            const tinNumber = (tinIndividual && tinIndividual.value) ?
                tinIndividual.value :
                (tinBusiness && tinBusiness.value) ?
                tinBusiness.value :
                null;

            // alert(`Status: ${status}, Lead ID: ${leadId}, TIN: ${tinNumber ?? 'N/A'}`);

            if (!leadId) return; // nothing to update, likely a create screen

            const url = updateUrlForLead(leadId);

            return fetch(url, {
                    method: 'POST',
                    keepalive: true,
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': getCsrfToken()
                    },
                    body: JSON.stringify({
                        lead_id: leadId,
                        status: status,
                        _token: getCsrfToken(),
                        tin_number: tinNumber,
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`Request failed with status ${response.status}`);
                    }
                    return response.json().catch(() => null);
                })
                .catch(error => {
                    console.error('Failed to send status update:', error);
                    return null;
                });
        }


        // ---------- UI logic ----------
        function toggleCustomerType(type) {
            const individualFields = document.getElementById('individual-fields');
            const businessFields = document.getElementById('business-fields');
            const keyContacts = document.getElementById('key-contacts-section');

            if (individualFields) individualFields.style.display = (type === 'individual') ? 'block' : 'none';
            if (businessFields) businessFields.style.display = (type === 'business') ? 'block' : 'none';
            if (keyContacts) keyContacts.style.display = (type === 'business') ? 'block' : 'none';
        }

        function setEnabledByType(type) {
            const individual = qsa('#individual-fields input, #individual-fields select, #individual-fields textarea');
            const business = qsa('#business-fields input, #business-fields select, #business-fields textarea');
            // enable all first
            individual.forEach(el => el.disabled = false);
            business.forEach(el => el.disabled = false);

            if (type === 'individual') business.forEach(el => el.disabled = true);
            if (type === 'business') individual.forEach(el => el.disabled = true);
        }

        function showServerErrors() {
            qsa('.text-danger').forEach(el => el.remove());
            qsa('[data-error]').forEach(field => {
                const msg = field.getAttribute('data-error');
                if (msg && msg.trim() !== '') {
                    const parent = field.closest('.form-group') || field.parentElement;
                    if (!parent.querySelector('.text-danger')) {
                        const div = document.createElement('div');
                        div.className = 'text-danger mt-1';
                        div.textContent = msg;
                        field.classList.add('is-invalid');
                        parent.appendChild(div);
                    }
                }
            });
        }

        // ---------- init ----------
        document.addEventListener('DOMContentLoaded', function() {
            // initial toggle
            const selected = qs('input[name="customer_type"]:checked');
            toggleCustomerType(selected ? selected.value : 'individual');

            // respond to change
            qsa('input[name="customer_type"]').forEach(radio => {
                radio.addEventListener('change', e => toggleCustomerType(e.target.value));
            });

            // cleanup any pre-rendered errors (then re-show via data-error)
            qsa('.text-danger').forEach(el => el.remove());
            showServerErrors();

            const form = document.getElementById('customer-form');
            const save = document.getElementById('customer-save-btn');
            const cancel = document.getElementById('customer-cancel-btn');

            if (form) form.setAttribute('novalidate', 'true');

            // SAVE: update status to "won" and submit
            if (save && form) {
                save.addEventListener('click', function() {
                    $("#customer-save-btn").attr("disabled", true);
                    $("#customer-save-btn").text("Please wait...");
                    qsa('.text-danger').forEach(el => el.remove());
                    showServerErrors();

                    const type = qs('input[name="customer_type"]:checked')?.value || 'individual';
                    setEnabledByType(type);

                    // Fire status update and let the normal form submit proceed immediately.
                    let hidden = qs('input[name="status"]', form);
                    if (!hidden) {
                        hidden = document.createElement('input');
                        hidden.type = 'hidden';
                        hidden.name = 'status';
                        form.appendChild(hidden);
                    }
                    hidden.value = 'won';
                    form.submit();
                    updateLeadStatus('won');

                });
            }

            // CANCEL: update status to "new" then redirect to index
            if (cancel) {
                cancel.addEventListener('click', function(e) {
                    e.preventDefault();
                    // If we have a lead id, update then navigate. If not, just navigate.
                    const leadId = getLeadId();
                    if (leadId) {
                        updateLeadStatus('new').finally(() => {
                            window.location.href = routes.index;
                        });
                    } else {
                        window.location.href = routes.index;
                    }
                });
            }
        });
    })();
</script>
@endpush