@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;
}
.section-title {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #eff2f7;
    color: #495057;
    font-weight: 600;
}
.address-tools {
    margin-bottom: 15px;
}
</style>
@endsection
@php
    $popupStatus = session('success') ? 'success' : null;
    $popupStatus = session('error') ? 'error' : $popupStatus;
    $popupStatus = $errors->any() ? 'error' : $popupStatus;
    $popupStatus = request('status') ? request('status') : $popupStatus;

    $popupMessage = session('success') ?: session('error') ?: request('message');
    if (!$popupMessage && $errors->any()) {
        $popupMessage = implode('<br>', $errors->all());
    }
@endphp
@section('content')

@if ($popupMessage)
<div class="alert alert-{{ $popupStatus === 'success' ? 'success' : 'danger' }} alert-dismissible fade show" role="alert">
    {!! nl2br(e(str_replace('<br>', "\n", $popupMessage))) !!}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</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="{{ route('customers.store') }}" method="POST" id="customerForm">
                        @csrf

                        <!-- SECTION 1: Personal Info -->
                        <h5 class="section-title text-primary" style="background: #ededed;     padding: 8px;">Personal Info</h5>
                        
                        <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">
                                    <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="area_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">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">
                            <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">Address 1</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">Address 2</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">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">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">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" {{ old('gender') == 'F' ? 'selected' : '' }}>Female</option>
                                    <option value="M" {{ old('gender') == 'M' ? 'selected' : '' }}>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>

                        <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-4">
                            <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>

                        <!-- SECTION 2: E-invoice Info -->
                        <h5 class="section-title text-primary mt-4" style="background: #ededed;     padding: 8px;">E-invoice Info</h5>

                        <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" {{ old('einvoice_is_malaysian', 'Y') == 'Y' ? 'selected' : '' }}>YES</option>
                                    <option value="N" {{ old('einvoice_is_malaysian') == 'N' ? 'selected' : '' }}>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" {{ old('einvoice_registration_type') == 'PASSPORT' ? 'selected' : '' }}>PASSPORT</option>
                                    <option value="NRIC" {{ old('einvoice_registration_type', 'NRIC') == 'NRIC' ? 'selected' : '' }}>NRIC</option>
                                    <option value="ARMY" {{ old('einvoice_registration_type') == 'ARMY' ? 'selected' : '' }}>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>

                        <!-- Address Synchronization Tools -->
                        <div class="row mb-3 address-tools">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-9">
                                <button type="button" class="btn btn-soft-info btn-sm" onclick="copyAddressFromSection1()">
                                    <i class="ri-file-copy-line align-middle"></i> Copy Address from Section 1
                                </button>
                                <button type="button" class="btn btn-soft-danger btn-sm ms-2" onclick="clearEinvoiceAddress()">
                                    <i class="ri-delete-bin-line align-middle"></i> Clear
                                </button>
                            </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 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">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 mt-4">
                            <div class="col-sm-12 text-end">
                                <button type="submit" class="btn btn-primary btn-s" id="createCustomerBtn">Create Customer</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
{{-- SweetAlert2 MUST be first so the popup fires before app.js can throw --}}
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
(function() {
    @if ($popupMessage && $popupStatus === 'success')
        Swal.fire({
            icon: 'success',
            title: 'Success!',
            text: @json($popupMessage),
            confirmButtonText: 'OK'
        });
    @elseif ($popupMessage)
        Swal.fire({
            icon: 'error',
            title: 'Failed!',
            html: @json($popupMessage),
            confirmButtonText: 'OK'
        });
    @endif
})();
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>

<script>
const customerCreateStorageKey = 'customer_create_form_data';
const customerCreatePendingKey = 'customer_create_pending';

function saveCustomerCreateForm() {
    const form = document.getElementById('customerForm');
    if (!form) return;
    const data = {};
    new FormData(form).forEach((value, key) => {
        if (key !== '_token') data[key] = value;
    });
    localStorage.setItem(customerCreateStorageKey, JSON.stringify(data));
    localStorage.setItem(customerCreatePendingKey, '1');
}

function restoreCustomerCreateForm() {
    const saved = localStorage.getItem(customerCreateStorageKey);
    if (!saved) return;

    let data = {};
    try { data = JSON.parse(saved); } catch (e) { return; }

    Object.keys(data).forEach((key) => {
        const fields = document.querySelectorAll(`[name="${key}"]`);
        fields.forEach((field) => {
            if (field.type === 'radio' || field.type === 'checkbox') {
                field.checked = field.value === data[key];
            } else {
                field.value = data[key] ?? '';
            }
        });
    });
}

function clearCustomerCreateFormCache() {
    localStorage.removeItem(customerCreateStorageKey);
    localStorage.removeItem(customerCreatePendingKey);
}

/**
 * Copy Address Info from Section 1 to Section 2
 */
function copyAddressFromSection1() {
    console.log('Copying address...');
    const addr1 = document.getElementById('address1');
    const addr2 = document.getElementById('address2');
    const post = document.getElementById('postal_code');
    const city = document.getElementById('city');
    const state = document.getElementById('state');

    if(addr1) document.getElementById('einvoice_address1').value = addr1.value;
    if(addr2) document.getElementById('einvoice_address2').value = addr2.value;
    if(post) document.getElementById('einvoice_postal_code').value = post.value;
    if(city) document.getElementById('einvoice_city_name').value = city.value;
    if(state && state.value) document.getElementById('einvoice_state_id').value = state.value;
    
    console.log('Address copied successfully.');
}

/**
 * Clear Section 2 Address Info
 */
function clearEinvoiceAddress() {
    document.getElementById('einvoice_address1').value = '';
    document.getElementById('einvoice_address2').value = '';
    document.getElementById('einvoice_address3').value = '';
    document.getElementById('einvoice_postal_code').value = '';
    document.getElementById('einvoice_city_name').value = '';
    document.getElementById('einvoice_state_id').value = '07'; 
}

function toggleCustomerType() {
    const customerTypeSelect = document.getElementById('customerTypeSelect');
    if (!customerTypeSelect) return;

    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) {
        incardPackageField.value = '753';
        const corporateRequiredFields = [
            'einvoice_tin',
            'email',
            'einvoice_address1',
            'einvoice_contact_number',
            'einvoice_state_id',
            'einvoice_business_registration_number'
        ];

        requiredSpans.forEach(span => span.style.display = 'none');
        corporateRequiredFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) {
                field.setAttribute('required', 'required');
                const fieldRow = field.closest('.row');
                if (fieldRow) {
                    const requiredSpan = fieldRow.querySelector('.einvoice-required');
                    if (requiredSpan) requiredSpan.style.display = 'inline';
                }
            }
        });

        businessSection.style.display = 'flex';
        const brnInput = document.getElementById('einvoice_business_registration_number');
        if(brnInput) brnInput.setAttribute('required', 'required');
        
        registrationTypeSelect.innerHTML = '<option value="BRN" selected>BRN</option>';
        if(emailRequired) emailRequired.style.display = 'inline';
        if(emailField) emailField.setAttribute('required', 'required');

        document.querySelectorAll('.tin-required').forEach(span => span.style.display = 'none');
    } else {
        incardPackageField.value = '689';
        requiredSpans.forEach(span => span.style.display = 'none');
        
        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');
        });

        businessSection.style.display = 'flex';
        const brnInput = document.getElementById('einvoice_business_registration_number');
        if(brnInput) brnInput.removeAttribute('required');

        registrationTypeSelect.innerHTML = `
            <option value="">Select Registration Type</option>
            <option value="PASSPORT">PASSPORT</option>
            <option value="NRIC" selected>NRIC</option>
            <option value="ARMY">ARMY</option>
        `;
        if(emailRequired) emailRequired.style.display = 'none';
        if(emailField) emailField.removeAttribute('required');
        
        document.querySelectorAll('.tin-required').forEach(span => span.style.display = 'none');
        validateTinRequiredFields();
    }
}

// ... (Keep existing getTIN, verifyTIN, resetTinVerification, validateTinRequiredFields, handleCountryChange functions)

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 || !eRegisterNo) {
        alert('Please select registration type and enter number before getting TIN.');
        return;
    }

    $.ajax({
        type: 'POST',
        url: "{{ route('tin.check') }}",
        data: { _token: "{{ csrf_token() }}", registration_type: registrationType, registration_number: eRegisterNo },
        success: function(response) {
           if (response.success) {
               $('#einvoice_tin').val(response.tin);
               resetTinVerification();
               const requiredFields = ['einvoice_address1', 'einvoice_contact_number', 'einvoice_state_id'];
               requiredFields.forEach(fieldId => {
                   const field = document.getElementById(fieldId);
                   if (field) {
                       field.setAttribute('required', 'required');
                       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 || !registrationNumber || !tinValue) {
        alert('Please complete registration type, number and TIN before verifying.');
        return;
    }

    verifyBtn.textContent = 'Verifying...';
    verifyBtn.disabled = true;

    $.ajax({
        type: 'POST',
        url: "{{ route('tin.verify') }}",
        data: { _token: "{{ csrf_token() }}", registration_type: registrationType, registration_number: registrationNumber, einvoice_tin: tinValue },
        success: function(response) {
            verifyBtn.disabled = false;
            if (response.success === true) {
                isTinVerified = true;
                verifyBtn.textContent = '✓ Verified';
                verifyBtn.className = 'btn btn-success';
                verifiedBadge.style.display = 'inline';
                alert('TIN verification successful!');
            } else {
                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() {
            verifyBtn.textContent = 'Verify TIN';
            verifyBtn.disabled = false;
            verifyBtn.className = 'btn btn-warning';
            isTinVerified = false;
            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 ? (customerTypeSelect.value === 'corporate') : false;
    const tinInput = document.getElementById('einvoice_tin');
    if(!tinInput) return;

    const tinValue = tinInput.value.trim();
    const tinRequiredFields = ['einvoice_address1', 'einvoice_contact_number', 'einvoice_state_id'];
    const tinRequiredSpans = document.querySelectorAll('.tin-required');

    if (isCorporate) return;

    if (tinValue !== '') {
        tinRequiredSpans.forEach(span => span.style.display = 'inline');
        tinRequiredFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) field.setAttribute('required', 'required');
        });
    } else {
        tinRequiredSpans.forEach(span => span.style.display = 'none');
        tinRequiredFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) field.removeAttribute('required');
        });
    }
}

function handleCountryChange() {
    const countrySelect = document.getElementById('country');
    const stateSelect = document.getElementById('state');
    if(!countrySelect || !stateSelect) return;

    const selectedCountryText = countrySelect.options[countrySelect.selectedIndex].text;
    stateSelect.value = (selectedCountryText !== 'MALAYSIA') ? '17' : '07';
}

function handleStateChange() { }

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('customerForm');
    const serverStatus = @json($popupStatus);
    const hasServerMessage = @json((bool) $popupMessage);
    const wasPending = localStorage.getItem(customerCreatePendingKey) === '1';
    const hasSavedForm = localStorage.getItem(customerCreateStorageKey) !== null;

    if (form) {
        form.addEventListener('submit', saveCustomerCreateForm);
    }

    if (serverStatus === 'success') {
        clearCustomerCreateFormCache();
    } else if (serverStatus === 'error' || wasPending || hasSavedForm) {
        restoreCustomerCreateForm();
        localStorage.removeItem(customerCreatePendingKey);

        if (wasPending && !hasServerMessage && typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'error',
                title: 'Failed!',
                html: 'Customer creation failed. Please check the details and try again.',
                confirmButtonText: 'OK'
            });
        }
    }

    toggleCustomerType();

    // toggleCustomerType() can rewrite select options, so restore again after it runs.
    if (serverStatus === 'error' || wasPending || hasSavedForm) {
        restoreCustomerCreateForm();
    }

    // Restore einvoice_registration_type — toggleCustomerType() rewrites the
    // select innerHTML which wipes any Blade old() selection. Re-apply it here.
    var oldRegType = @json(old('einvoice_registration_type', ''));
    if (oldRegType) {
        var regTypeSelect = document.getElementById('einvoice_registration_type');
        if (regTypeSelect) regTypeSelect.value = oldRegType;
    }

    validateTinRequiredFields();

    const stateSelect = document.getElementById('state');
    const einvoiceStateSelect = document.getElementById('einvoice_state_id');
    if (stateSelect && !stateSelect.value) stateSelect.value = '07';
    if (einvoiceStateSelect && !einvoiceStateSelect.value) einvoiceStateSelect.value = '07';
});


</script>
@endsection