@extends('layouts.master')
@section('title')
All Users
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<style>
.form-check-input:checked {
    background-color: #28a745 !important;
    border-color: #28a745;
}
</style>
@endsection
@section('content')
@if ($errors->any())
<div class="alert alert-warning">
    @foreach ($errors->all() as $error)
        {{$error}}
    @endforeach
</div>
@endif

@if (session('success'))
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif

@if (session('error'))
<div class="alert alert-danger">
    {{ session('error') }}
</div>
@endif

<div class="row">
    <div class="container">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header border-bottom-dashed">
                    <div class="row g-4 align-items-center">
                        <div class="col-sm">
                            <div class="d-flex">
                                <h5 class="card-title mb-0"><a href="{{ url('customers') }}" class=""><i class="ri-arrow-left-line fs-19 align-middle me-3"></i> </a> Create Customer</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">




                    <form action="{{ url('customers/store') }}" method="POST" id="customerForm">
                        @csrf


                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Customer Type</label>
                            <div class="col-sm-9">
                                <select id="customerTypeSelect" name="customer_type" class="form-control" onchange="toggleCustomerType()">
                                    <option value="personal" {{ old('customer_type', 'personal') == 'personal' ? 'selected' : '' }}>Personal</option>
                                    <option value="corporate" {{ old('customer_type') == 'corporate' ? 'selected' : '' }}>Corporate</option>
                                </select>
                            </div>
                        </div>



                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Term</label>
                            <div class="col-sm-9">
                                <select id="term_id" name="term_id" class="form-control">
                                    {{-- @foreach($terms as $id => $name)
                                        <option value="{{ $id }}" {{ old('term_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach --}}
                                    <option value="CASH" selected>Cash Term</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Area</label>
                            <div class="col-sm-9">
                                <select id="salesman_id" name="area_id" class="form-control">
                                    @foreach($areas as $id => $name)
                                        <option value="{{ $id }}" {{ old('area_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Salesman ID</label>
                            <div class="col-sm-9">
                                <select id="salesman_id" name="salesman_id" class="form-control">
                                    @foreach($salesman as $id => $name)
                                        <option value="{{ $id }}" {{ old('salesman_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Name
                                <span class="badge bg-danger-subtle text-danger text-uppercase">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="name" name="name" class="form-control" value="{{ old('name') }}" required>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Contact No
                                <span class="badge bg-danger-subtle text-danger text-uppercase">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="additional_contact" name="additional_contact" class="form-control" value="{{ old('additional_contact') }}" required>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Email
                                <span id="emailRequired" class="badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="email" name="email" class="form-control" value="{{ old('email') }}">
                            </div>
                        </div>



                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Country</label>
                            <div class="col-sm-9">
                                <select id="country" name="country" class="form-control" onchange="handleCountryChange()">
                                    @foreach($countries as $id => $name)
                                        @if($name == 'MALAYSIA')
                                            <option value="{{ $id }}" {{ old('country') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                        @endif
                                    @endforeach
                                    @foreach($countries as $id => $name)
                                        @if($name != 'MALAYSIA')
                                            <option value="{{ $id }}" {{ old('country') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">State</label>
                            <div class="col-sm-9">
                                <select id="state" name="state" class="form-control" onchange="handleStateChange()">
                                    <option value="">Select State</option>
                                    @foreach($states as $id => $name)
                                        <option value="{{ $id }}" {{ old('state', '07') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Address1</label>
                            <div class="col-sm-9">
                                <input type="text" id="address1" name="address1" class="form-control" value="{{ old('address1') }}">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Address2</label>
                            <div class="col-sm-9">
                                <input type="text" id="address2" name="address2" class="form-control" value="{{ old('address2') }}">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">City</label>
                            <div class="col-sm-9">
                                <input type="text" id="city" name="city" class="form-control" value="{{ old('city') }}">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">PostCode</label>
                            <div class="col-sm-9">
                                <input type="text" id="postal_code" name="postal_code" class="form-control" value="{{ old('postal_code') }}">
                            </div>
                        </div>






                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Date of Birth</label>
                            <div class="col-sm-9">
                                <input type="date" id="date_of_birth" name="date_of_birth" class="form-control" value="{{ old('date_of_birth', '1980-01-01') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Gender</label>
                            <div class="col-sm-9">
                                <select id="gender" name="gender" class="form-control">
                                    <option value="F">Female</option>
                                    <option value="M">Male</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Ethnic</label>
                            <div class="col-sm-9">
                                <select id="ethnic_id" name="ethnic_id" class="form-control">
                                    @foreach($ethnics as $id => $name)
                                        <option value="{{ $id }}" {{ old('ethnic_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Incard Package</label>
                            <div class="col-sm-9">
                                <select id="incard_package" name="incard_package" class="form-control">
                                    @foreach($incardpackage as $id => $name)
                                        <option value="{{ $id }}" {{ old('incard_package') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div> --}}

                        <input type="hidden" id="incard_package" name="incard_package" value="689">

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Service Tax Registration No</label>
                            <div class="col-sm-9">
                                <input type="text" id="service_tax_registration_no" name="service_tax_registration_no" class="form-control" value="{{ old('service_tax_registration_no') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Sales Tax Registration No</label>
                            <div class="col-sm-9">
                                <input type="text" id="sales_tax_registration_no" name="sales_tax_registration_no" class="form-control" value="{{ old('sales_tax_registration_no') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Is Malaysian
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <select name="einvoice_is_malaysian" id="einvoice_is_malaysian" class="form-control">
                                    <option value="">Select Option</option>
                                    <option value="Y" selected>YES</option>
                                    <option value="N">NO</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Registration Type
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <select name="einvoice_registration_type" id="einvoice_registration_type" class="form-control">
                                    <option value="">Select Registration Type</option>
                                    <option value="PASSPORT">PASSPORT</option>
                                    <option value="NRIC" selected>NRIC</option>
                                    <option value="ARMY">ARMY</option>
                                </select>
                            </div>
                        </div>



                        <div class="row mb-2" id="einvoice_business_section">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Registration Number
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="text" id="einvoice_business_registration_number" name="einvoice_business_registration_number" class="form-control" value="{{ old('einvoice_business_registration_number') }}">
                                    <button type="button" class="btn btn-primary" onclick="getTIN()">Search TIN</button>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice TIN
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                                <span id="tinVerifiedBadge" class="badge bg-success ms-2" style="display:none;">✓ Verified</span>
                            </label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="text" id="einvoice_tin" name="einvoice_tin" class="form-control" value="{{ old('einvoice_tin') }}" onchange="validateTinRequiredFields(); resetTinVerification()">
                                    <button type="button" class="btn btn-success" id="verifyTinBtn" onclick="verifyTIN()">Verify TIN</button>
                                </div>
                            </div>
                        </div>



                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Business Activity Description
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="einvoice_business_activity_description" name="einvoice_business_activity_description" class="form-control" value="{{ old('einvoice_business_activity_description') }}">
                            </div>
                        </div>





                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice SST Number
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="einvoice_sst_number" name="einvoice_sst_number" class="form-control" value="{{ old('einvoice_sst_number') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Tourism Tax Number
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="einvoice_tourism_tax_number" name="einvoice_tourism_tax_number" class="form-control" value="{{ old('einvoice_tourism_tax_number') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Address 1
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                                <span class="tin-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="einvoice_address1" name="einvoice_address1" class="form-control" value="{{ old('einvoice_address1') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Address 2
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="einvoice_address2" name="einvoice_address2" class="form-control" value="{{ old('einvoice_address2') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Address 3
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="einvoice_address3" name="einvoice_address3" class="form-control" value="{{ old('einvoice_address3') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Postal Code
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="einvoice_postal_code" name="einvoice_postal_code" class="form-control" value="{{ old('einvoice_postal_code') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Contact Number
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                                <span class="tin-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="einvoice_contact_number" name="einvoice_contact_number" class="form-control" value="{{ old('einvoice_contact_number') }}">
                            </div>
                        </div>



                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice City Name
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="einvoice_city_name" name="einvoice_city_name" class="form-control" value="{{ old('einvoice_city_name') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice Country ID
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <select id="einvoice_country_id" name="einvoice_country_id" class="form-control">
                                    @foreach($countries as $id => $name)
                                        @if($name == 'MALAYSIA')
                                            <option value="{{ $id }}" {{ old('einvoice_country_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                        @endif
                                    @endforeach
                                    @foreach($countries as $id => $name)
                                        @if($name != 'MALAYSIA')
                                            <option value="{{ $id }}" {{ old('einvoice_country_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Einvoice State ID
                                <span class="einvoice-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                                <span class="tin-required badge bg-danger-subtle text-danger text-uppercase" style="display:none">*</span>
                            </label>
                            <div class="col-sm-9">
                                <select id="einvoice_state_id" name="einvoice_state_id" class="form-control">
                                    <option value="">Select State</option>
                                    @foreach($states as $id => $name)
                                        <option value="{{ $id }}" {{ old('einvoice_state_id', '07') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>



                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Attention 1</label>
                            <div class="col-sm-9">
                                <input type="text" id="attention1" name="attention1" class="form-control" value="{{ old('attention1') }}">
                            </div>
                        </div>

                        <div class="row mb-2">
                            <label for="colFormLabel" class="col-sm-3 col-form-label">Attention 2</label>
                            <div class="col-sm-9">
                                <input type="text" id="attention2" name="attention2" class="form-control" value="{{ old('attention2') }}">
                            </div>
                        </div>


                        <div class="row mb-2">
                            <div class="col-sm-12">
                                <button type="submit" class="btn btn-primary" id="createCustomerBtn">Create Customer</button>
                                {{-- <button type="submit" id="submit-btn" style="display:none !important"></button> --}}

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--end row-->
@endsection
@section('script')
{{-- <script src="{{ URL::asset('build/libs/list.js/list.min.js') }}"></script> --}}
{{-- <script src="{{ URL::asset('build/libs/list.pagination.js/list.pagination.min.js') }}"></script> --}}
{{-- <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script> --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
{{-- <script src="{{ URL::asset('build/libs/particles.js/particles.js') }}"></script> --}}
{{-- <script src="{{ URL::asset('build/js/pages/particles.app.js') }}"></script> --}}
{{-- <script src="{{ URL::asset('build/js/pages/form-validation.init.js') }}"></script> --}}
<script>

function toggleCustomerType() {
    const customerTypeSelect = document.getElementById('customerTypeSelect');
    const requiredSpans = document.querySelectorAll('.einvoice-required');
    const businessSection = document.getElementById('einvoice_business_section');
    const registrationTypeSelect = document.getElementById('einvoice_registration_type');
    const emailRequired = document.getElementById('emailRequired');
    const emailField = document.getElementById('email');
    const incardPackageField = document.getElementById('incard_package');

    const isCorporate = customerTypeSelect.value === 'corporate';

    if (isCorporate) {
        // Corporate mode
        console.log('Switching to Corporate mode');

        // Set incard_package to 753 for Corporate
        incardPackageField.value = '753';
        console.log('Set incard_package to 753 for Corporate');

        // For Corporate: Only specific fields are compulsory
        const corporateRequiredFields = [
            'einvoice_tin',
            'email',
            'einvoice_address1',
            'einvoice_contact_number',
            'einvoice_state_id',
            'einvoice_business_registration_number'
        ];

        // First hide all einvoice required spans
        requiredSpans.forEach(span => span.style.display = 'none');

        // Then show only the specific required spans for Corporate
        corporateRequiredFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) {
                field.setAttribute('required', 'required');
                // Find the corresponding required span for this field
                const fieldRow = field.closest('.row');
                if (fieldRow) {
                    const requiredSpan = fieldRow.querySelector('.einvoice-required');
                    if (requiredSpan) {
                        requiredSpan.style.display = 'inline';
                    }
                }
            }
        });

        // Show business registration, hide identity
        businessSection.style.display = 'flex';
        document.getElementById('einvoice_business_registration_number').setAttribute('required', 'required');


        // Update registration type for corporate - only BRN
        console.log('Setting registration type to BRN only');
        registrationTypeSelect.innerHTML = '<option value="BRN" selected>BRN</option>';
        console.log('Registration type updated:', registrationTypeSelect.innerHTML);

        // Email is required for Corporate
        console.log('Making email required for Corporate');
        emailRequired.style.display = 'inline';
        emailField.setAttribute('required', 'required');
        console.log('Email required span display:', emailRequired.style.display);
        console.log('Email field required attribute:', emailField.hasAttribute('required'));

        // For Corporate: Hide TIN required indicators (only show einvoice-required)
        const tinRequiredSpans = document.querySelectorAll('.tin-required');
        tinRequiredSpans.forEach(span => span.style.display = 'none');
    } else {
        // Personal mode
        console.log('Switching to Personal mode');

        // Set incard_package to 689 for Personal
        incardPackageField.value = '689';
        console.log('Set incard_package to 689 for Personal');
        requiredSpans.forEach(span => span.style.display = 'none');

        // For Personal: remove all einvoice requirements initially
        const allEinvoiceFields = [
            'einvoice_registration_type',
            'einvoice_is_malaysian',
            'einvoice_tin',
            'einvoice_contact_number',
            'einvoice_city_name',
            'einvoice_state_id',
            'einvoice_address1'
        ];

        allEinvoiceFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) field.removeAttribute('required');
        });

        // Show identity, hide business registration
        businessSection.style.display = 'flex';
        document.getElementById('einvoice_business_registration_number').removeAttribute('required');

        // Update registration type for customer - PASSPORT, NRIC (pre-selected), ARMY
        registrationTypeSelect.innerHTML = `
            <option value="">Select Registration Type</option>
            <option value="PASSPORT">PASSPORT</option>
            <option value="NRIC" selected>NRIC</option>
            <option value="ARMY">ARMY</option>
        `;

        // Email is not required for Personal
        emailRequired.style.display = 'none';
        emailField.removeAttribute('required');

        // For Personal: Hide TIN required indicators initially, then check TIN value
        const tinRequiredSpans = document.querySelectorAll('.tin-required');
        tinRequiredSpans.forEach(span => span.style.display = 'none');

        // Check if TIN is filled to determine requirements for Personal mode
        validateTinRequiredFields();
    }
}

function checkTIN() {
    const customerTypeSelect = document.getElementById('customerTypeSelect');
    const isCorporate = customerTypeSelect.value === 'corporate';
    const registrationTypeSelect = document.getElementById('einvoice_registration_type');
    const brnInput = document.getElementById('einvoice_business_registration_number');


    const registrationType = registrationTypeSelect.value;


    // Get registration number based on mode
    const eRegisterNo = brnInput.value;

    if (!registrationType) {
        alert('Please select registration type before checking TIN.');
        return;
    }

    if (!eRegisterNo) {
        alert('Please enter registration number before checking.');
        return;
    }


    // Using jQuery (now that it's loaded)
    $.ajax({
        type: 'POST',
        url: "{{ route('tin.check') }}",
        data: {
            _token: "{{ csrf_token() }}",
            registration_type: registrationType,
            registration_number: eRegisterNo,
        },
        success: function(response) {
           console.log(response);
           // Handle the validation response
           if (response.success) {
               $('#einvoice_tin').val(response.tin);

               // Make these fields compulsory after successful TIN check
               const requiredFields = [
                   'einvoice_address1',
                   'einvoice_contact_number',
                   'einvoice_state_id'
               ];

               requiredFields.forEach(fieldId => {
                   const field = document.getElementById(fieldId);
                   if (field) {
                       field.setAttribute('required', 'required');
                       // Show red asterisk for this field
                       const fieldRow = field.closest('.row');
                       if (fieldRow) {
                           const requiredSpan = fieldRow.querySelector('.einvoice-required, .tin-required');
                           if (requiredSpan) {
                               requiredSpan.style.display = 'inline';
                           }
                       }
                   }
               });


           } else {
                alert('TIN check failed');
                $('#einvoice_tin').empty();
           }
        },
        error: function() {
            alert('Error checking TIN. Please try again.');
        }
    });




}

// Global variable to track TIN verification status
let isTinVerified = false;

function getTIN() {
    const registrationTypeSelect = document.getElementById('einvoice_registration_type');
    const brnInput = document.getElementById('einvoice_business_registration_number');

    const registrationType = registrationTypeSelect.value;
    const eRegisterNo = brnInput.value;

    if (!registrationType) {
        alert('Please select registration type before getting TIN.');
        return;
    }

    if (!eRegisterNo) {
        alert('Please enter registration number before getting TIN.');
        return;
    }

    // Using jQuery (now that it's loaded)
    $.ajax({
        type: 'POST',
        url: "{{ route('tin.check') }}",
        data: {
            _token: "{{ csrf_token() }}",
            registration_type: registrationType,
            registration_number: eRegisterNo,
        },
        success: function(response) {
           console.log(response);
           // Handle the validation response
           if (response.success) {
               $('#einvoice_tin').val(response.tin);

               // Reset verification status when TIN is auto-filled
               resetTinVerification();

               // Make these fields compulsory after successful TIN retrieval
               const requiredFields = [
                   'einvoice_address1',
                   'einvoice_contact_number',
                   'einvoice_state_id'
               ];

               requiredFields.forEach(fieldId => {
                   const field = document.getElementById(fieldId);
                   if (field) {
                       field.setAttribute('required', 'required');
                       // Show red asterisk for this field
                       const fieldRow = field.closest('.row');
                       if (fieldRow) {
                           const requiredSpan = fieldRow.querySelector('.einvoice-required, .tin-required');
                           if (requiredSpan) {
                               requiredSpan.style.display = 'inline';
                           }
                       }
                   }
               });

               alert('TIN retrieved successfully! Please verify the TIN before submitting.');
           } else {
                $('#einvoice_tin').val('');
                alert('TIN retrieval failed');
           }
        },
        error: function() {
            alert('Error retrieving TIN. Please try again.');
        }
    });
}

function verifyTIN() {
    const registrationTypeSelect = document.getElementById('einvoice_registration_type');
    const brnInput = document.getElementById('einvoice_business_registration_number');
    const tinInput = document.getElementById('einvoice_tin');
    const verifyBtn = document.getElementById('verifyTinBtn');
    const verifiedBadge = document.getElementById('tinVerifiedBadge');

    const registrationType = registrationTypeSelect.value;
    const registrationNumber = brnInput.value;
    const tinValue = tinInput.value.trim();

    if (!registrationType) {
        alert('Please select registration type before verifying TIN.');
        return;
    }

    if (!registrationNumber) {
        alert('Please enter registration number before verifying TIN.');
        return;
    }

    if (!tinValue) {
        alert('Please enter TIN before verifying.');
        return;
    }

    // Show loading state
    verifyBtn.textContent = 'Verifying...';
    verifyBtn.disabled = true;

    // Using jQuery for TIN verification
    $.ajax({
        type: 'POST',
        url: "{{ route('tin.verify') }}",
        data: {
            _token: "{{ csrf_token() }}",
            registration_type: registrationType,
            registration_number: registrationNumber,
            einvoice_tin: tinValue
        },
        success: function(response) {
            console.log('TIN verification response:', response);

            // Reset button state
            verifyBtn.disabled = false;

            if (response.success === true) {
                // TIN is valid
                isTinVerified = true;
                verifyBtn.textContent = '✓ Verified';
                verifyBtn.className = 'btn btn-success';
                verifiedBadge.style.display = 'inline';
                alert('TIN verification successful!');
            } else {
                // TIN is invalid
                isTinVerified = false;
                verifyBtn.textContent = 'Verify TIN';
                verifyBtn.className = 'btn btn-danger';
                verifiedBadge.style.display = 'none';
                alert('TIN verification failed: ' + (response.message || 'Invalid TIN'));
            }
        },
        error: function() {
            // Reset button state
            verifyBtn.textContent = 'Verify TIN';
            verifyBtn.disabled = false;
            verifyBtn.className = 'btn btn-warning';
            isTinVerified = false;
            verifiedBadge.style.display = 'none';
            alert('Error verifying TIN. Please try again.');
        }
    });
}

function resetTinVerification() {
    isTinVerified = false;
    const verifyBtn = document.getElementById('verifyTinBtn');
    const verifiedBadge = document.getElementById('tinVerifiedBadge');

    if (verifyBtn) {
        verifyBtn.textContent = 'Verify TIN';
        verifyBtn.className = 'btn btn-success';
        verifyBtn.disabled = false;
    }

    if (verifiedBadge) {
        verifiedBadge.style.display = 'none';
    }
}

function validateTinRequiredFields() {
    const customerTypeSelect = document.getElementById('customerTypeSelect');
    const isCorporate = customerTypeSelect.value === 'corporate';
    const tinInput = document.getElementById('einvoice_tin');
    const tinValue = tinInput.value.trim();

    // Fields that become required when TIN is filled (for Personal mode only)
    const tinRequiredFields = [
        'einvoice_address1',
        'einvoice_contact_number',
        'einvoice_state_id'
    ];

    const tinRequiredSpans = document.querySelectorAll('.tin-required');

    if (isCorporate) {
        // Corporate mode: TIN-dependent fields are always required (handled in toggleCustomerType)
        // This function doesn't need to do anything for Corporate mode
        return;
    }

    // Personal mode logic
    if (tinValue !== '') {
        // TIN is filled - make fields required for Personal mode
        tinRequiredSpans.forEach(span => span.style.display = 'inline');

        tinRequiredFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) {
                field.setAttribute('required', 'required');
                field.classList.add('tin-dependent-required');
            }
        });
    } else {
        // TIN is empty - remove requirements for Personal mode
        tinRequiredSpans.forEach(span => span.style.display = 'none');

        tinRequiredFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) {
                field.removeAttribute('required');
                field.classList.remove('tin-dependent-required');
            }
        });
    }
}

// Add form validation on submit
// document.addEventListener('DOMContentLoaded', function() {
//     console.log('DOM loaded, setting up form validation');
//     const form = document.querySelector('form');
//     const createCustomerBtn = document.getElementById('createCustomerBtn');
//     console.log('Form found:', form);
//     console.log('Create Customer button found:', createCustomerBtn);


//     if (createCustomerBtn && form) {
//         console.log('Adding click event listener to Create Customer button');
//         createCustomerBtn.addEventListener('click', function(e) {
//             console.log('Create Customer button clicked');
//             e.preventDefault();
//             e.stopPropagation();
//             handleFormSubmission(e, form);
//         });
//     }
// });

// function handleFormSubmission(e, form) {
//     console.log('handleFormSubmission called');

//     const switchElement = document.getElementById('customerTypeSwitch');
//     const isCorporate = switchElement.checked;
//     const tinValue = document.getElementById('einvoice_tin').value.trim();
//     const emailValue = document.getElementById('email').value.trim();

//     console.log('TIN value:', tinValue);
//     console.log('Is Corporate:', isCorporate);

//     let missingFields = [];

//     if (isCorporate) {

//         if (emailValue === '') {
//             missingFields.push('Email (required for Corporate)');
//         }

//         const corporateRequiredFields = [
//             { id: 'einvoice_tin', name: 'Einvoice TIN' },
//             { id: 'einvoice_address1', name: 'Einvoice Address 1' },
//             { id: 'einvoice_contact_number', name: 'Einvoice Contact Number' },
//             { id: 'einvoice_state_id', name: 'Einvoice State' }
//         ];

//         corporateRequiredFields.forEach(field => {
//             const element = document.getElementById(field.id);
//             if (element && element.value.trim() === '') {
//                 missingFields.push(field.name + ' (required for Corporate)');
//             }
//         });

//     } else {
//         if (tinValue !== '') {
//             const personalTinRequiredFields = [
//                 { id: 'einvoice_address1', name: 'Einvoice Address 1' },
//                 { id: 'einvoice_contact_number', name: 'Einvoice Contact Number' },
//                 { id: 'einvoice_state_id', name: 'Einvoice State' }
//             ];

//             personalTinRequiredFields.forEach(field => {
//                 const element = document.getElementById(field.id);
//                 if (element && element.value.trim() === '') {
//                     missingFields.push(field.name + ' (required when TIN is provided)');
//                 }
//             });
//         }
//     }

//     if (missingFields.length > 0) {
//         console.log('Missing fields:', missingFields);
//         alert('The following fields are required:\n\n' + missingFields.join('\n'));
//         return false;
//     }

//     console.log('All required fields filled, checking TIN verification');


//     if (tinValue !== '') {
//         if (isTinVerified) {
//             console.log('TIN already verified, submitting form directly');
//             submitForm(form);
//         } else {
//             console.log('TIN provided but not verified, calling verifyTinBeforeSubmit');
//             verifyTinBeforeSubmit(form, isCorporate);
//         }
//     } else {
//         console.log('No TIN provided, submitting form directly');
//         // No TIN to verify, submit form directly
//         submitForm(form);
//     }
// }

function handleCountryChange() {
    const countrySelect = document.getElementById('country');
    const stateSelect = document.getElementById('state');
    const selectedCountryText = countrySelect.options[countrySelect.selectedIndex].text;

    console.log('Country changed to:', selectedCountryText);

    // If country is not Malaysia (MYS), set state to 17
    if (selectedCountryText !== 'MALAYSIA') {
        console.log('Non-Malaysia country selected, setting state to 17');
        stateSelect.value = '17';
    } else {
        console.log('Malaysia selected, setting state to default 07');
        stateSelect.value = '07';
    }
}

function handleStateChange() {
    const stateSelect = document.getElementById('state');
    console.log('State changed to:', stateSelect.value);
}

// Initial validation on page load when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded - initializing form state');

    // Initialize the customer type state
    toggleCustomerType();

    // Initialize TIN validation
    validateTinRequiredFields();

    // Set initial state values
    const stateSelect = document.getElementById('state');
    const einvoiceStateSelect = document.getElementById('einvoice_state_id');

    // Set default state to 07 if no value is selected
    if (!stateSelect.value) {
        stateSelect.value = '07';
        console.log('Set default state to 07');
    }

    if (!einvoiceStateSelect.value) {
        einvoiceStateSelect.value = '07';
        console.log('Set default einvoice_state_id to 07');
    }
});

// function verifyTinBeforeSubmit(form, isCorporate) {
//     console.log("verifyTinBeforeSubmit called with isCorporate:", isCorporate);

//     const registrationTypeSelect = document.getElementById('einvoice_registration_type');
//     const brnInput = document.getElementById('einvoice_business_registration_number');
//     const tinInput = document.getElementById('einvoice_tin');

//     const registrationType = registrationTypeSelect.value;
//     const tinValue = tinInput.value.trim();


//     const registrationNumber = brnInput.value;

//     console.log('Verification data:', {
//         registrationType,
//         registrationNumber,
//         tinValue,
//         isCorporate
//     });

//     if (!tinValue) {
//         submitForm(form);
//         return;
//     }


//     const submitButton = form.querySelector('button[type="submit"]');
//     const originalText = submitButton.textContent;
//     submitButton.textContent = 'Verifying TIN...';
//     submitButton.disabled = true;

//     // Call TIN verification API
//     console.log('Making AJAX call to tin.verify');
//     $.ajax({
//         type: 'POST',
//         url: "{{ route('tin.verify') }}",
//         data: {
//             _token: "{{ csrf_token() }}",
//             registration_type: registrationType,
//             registration_number: registrationNumber,
//             einvoice_tin: tinValue
//         },
//         success: function(response) {
//             console.log('TIN verification response:', response);
//             // Reset button
//             submitButton.textContent = originalText;
//             submitButton.disabled = false;

//             if (response.success === true) {
//                 // TIN is valid, submit form directly
//                 submitForm(form);
//             } else {
//                 // TIN is invalid, show confirmation dialog
//                 const message = response.message || 'TIN validation failed';
//                 const confirmSubmit = confirm(message + '\n\nDo you want to continue anyway?');

//                 if (confirmSubmit) {
//                     submitForm(form);
//                 }
//                 // If user cancels, do nothing (stay on form)
//             }
//         },
//         error: function(xhr, status, error) {
//             // Reset button
//             submitButton.textContent = originalText;
//             submitButton.disabled = false;

//             // On API error, ask user if they want to continue
//             const confirmSubmit = confirm('Unable to verify TIN due to a technical error.\n\nDo you want to continue anyway?');

//             if (confirmSubmit) {
//                 submitForm(form);
//             }
//         }
//     });
// }

// function submitForm(form) {
//     var form = $('#customerForm')[0];

//         // Check HTML5 validation
//         if (form.checkValidity()) {
//             $('#submit-btn').click();
//         } else {
//             // Show validation messages
//             form.reportValidity();
//             console.log('Form is not valid');
//         }
// }
</script>

<script>
// Show SweetAlert2 popup for session messages
document.addEventListener('DOMContentLoaded', function() {
    @if (session('success'))
        Swal.fire({
            html: '<div class="mt-3">' +
                '<lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon>' +
                '<div class="mt-4 pt-2 fs-15">' +
                '<h4>Success!</h4>' +
                '<p class="text-muted mx-4 mb-0">{{ session('success') }}</p>' +
                '</div>' +
                '</div>',
            showCancelButton: false,
            showConfirmButton: true,
            confirmButtonClass: 'btn btn-primary w-xs mb-1',
            confirmButtonText: 'OK',
            buttonsStyling: false,
            showCloseButton: true
        });
    @endif

    @if (session('error'))
        Swal.fire({
            html: '<div class="mt-3">' +
                '<lord-icon src="https://cdn.lordicon.com/tdrtiskw.json" trigger="loop" colors="primary:#f06548,secondary:#f7b84b" style="width:120px;height:120px"></lord-icon>' +
                '<div class="mt-4 pt-2 fs-15">' +
                '<h4>Error!</h4>' +
                '<p class="text-muted mx-4 mb-0">{{ session('error') }}</p>' +
                '</div>' +
                '</div>',
            showCancelButton: false,
            showConfirmButton: true,
            confirmButtonClass: 'btn btn-primary w-xs mb-1',
            confirmButtonText: 'OK',
            buttonsStyling: false,
            showCloseButton: true
        });
    @endif

    @if ($errors->any())
        let errorMessages = '';
        @foreach ($errors->all() as $error)
            errorMessages += '{{ $error }}<br>';
        @endforeach

        Swal.fire({
            html: '<div class="mt-3">' +
                '<lord-icon src="https://cdn.lordicon.com/tdrtiskw.json" trigger="loop" colors="primary:#f06548,secondary:#f7b84b" style="width:120px;height:120px"></lord-icon>' +
                '<div class="mt-4 pt-2 fs-15">' +
                '<h4>Validation Error!</h4>' +
                '<div class="text-muted mx-4 mb-0">' + errorMessages + '</div>' +
                '</div>' +
                '</div>',
            showCancelButton: false,
            showConfirmButton: true,
            confirmButtonClass: 'btn btn-primary w-xs mb-1',
            confirmButtonText: 'OK',
            buttonsStyling: false,
            showCloseButton: true
        });
    @endif
});
</script>

@endsection