@extends('public::form.header')
<style>
    #form-error-msg {
    color: #fff;
    background-color: #dc3545;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}
    :root {
        --primary-color: #2c3da3;
        --primary-dark: #1e2878;
        --primary-light: #4c5dc3;
        --accent-color: #288cff;
        --text-dark: #333;
        --text-light: #f7f7f7;
        --border-color: #dee2e6;
        --bg-light: #f8f9fa;
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    body {
        font-family: 'Roboto', 'Segoe UI', sans-serif;
        background-color: #f5f7fa;
        color: var(--text-dark);
    }

    /* Header Styling */
    .jumbotron.bmh-blue-bg {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        padding: 2rem 0;
        margin-top: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: var(--shadow);
    }

    .jumbotron.bmh-blue-wt {
        background-color: white;
        padding: 1rem 0;
        margin-bottom: 0;
    }

    /* Language Selector */
    .nps {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }

    .nps label {
        transition: all 0.3s ease;
        border-radius: 4px;
        margin: 0 5px;
        border: 1px solid var(--border-color);
        color: var(--text-dark);
        font-weight: 500;
        text-shadow: none;
        max-width: 150px;
    }

    .nps label:hover {
        background-color: var(--bg-light);
        transform: translateY(-2px);
    }

    .nps label span {
        text-align: center;
        font-size: 16px;
        padding: 10px 15px;
        display: block;
    }

    .nps label input {
        position: absolute;
        left: -9999px;
    }

    .nps input:checked+span {
        background-color: var(--accent-color);
        color: var(--text-light);
        text-shadow: none;
        box-shadow: 0 2px 8px rgba(40, 140, 255, 0.4);
    }

    /* Form Card */
    .card {
        border: none;
        border-radius: 12px;
        box-shadow: var(--shadow);
        margin-bottom: 40px;
        overflow: hidden;
    }

    .card-header {
        background: linear-gradient(to right, var(--primary-color), var(--primary-light));
        color: white;
        border-radius: 12px 12px 0 0 !important;
        padding: 20px;
        font-weight: bold;
        border: none;
    }

    .card-body {
        padding: 30px;
        background-color: white;
    }

    /* Form Elements */
    .form-label.heading {
        color: var(--primary-color);
        font-size: 1.2rem;
        border-bottom: 2px solid var(--primary-color);
        padding-bottom: 8px;
        display: inline-block;
    }

    .bmh-blue-txt {
        color: var(--text-dark);
    }

    .form-control {
        padding: 12px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        transition: all 0.3s ease;
        background-color: #fff;
        font-size: 15px;
    }

    .form-control:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 0.2rem rgba(40, 140, 255, 0.25);
    }

    select.form-control {
        height: 48px;
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c3da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
        padding-right: 40px;
    }

    textarea.form-control {
        min-height: 120px;
    }

    .custom-file-input::-webkit-file-upload-button {
        visibility: hidden;
    }

    .form-text {
        color: #6c757d;
        font-size: 13px;
        margin-top: 5px;
    }

    /* Submit Button */
    .btn-submit {
        background: linear-gradient(to right, var(--primary-color), var(--primary-light));
        color: white;
        border-radius: 8px;
        padding: 12px 30px;
        border: none;
        font-weight: bold;
        transition: all 0.3s ease;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 8px rgba(44, 61, 163, 0.3);
    }

    .btn-submit:hover {
        background: linear-gradient(to right, var(--primary-dark), var(--primary-color));
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(44, 61, 163, 0.4);
    }

    .btn-submit:active {
        transform: translateY(1px);
    }

    /* Required Field */
    .required {
        color: #dc3545;
        margin-left: 3px;
    }

    /* Checkbox Style */
    .custom-checkbox .custom-control-label::before {
        border-radius: 4px;
        border: 2px solid var(--primary-color);
    }

    .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .custom-control-label {
        line-height: 1.6;
        padding-left: 10px;
    }

    /* Section Dividers */
    .section-divider {
        position: relative;
        margin: 30px 0;
        height: 1px;
        background: var(--border-color);
    }

    /* Alert styling */
    .alert {
        border-radius: 8px;
        padding: 12px 15px;
    }

    /* Department card styling */
    .department-card {
        background-color: white;
        height: 130px;
        width: 180px;
        text-align: center;
        display: inline-block;
        margin: 0 10px 15px 10px;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .department-card:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-3px);
    }

    .department-image {
        margin-top: 22px;
        width: 73px;
        height: 73px;
        border: 1px solid #ddd;
        border-radius: 50%;
        transition: transform 0.3s ease;
        object-fit: cover;
    }
    

    .department-card.selected {
        border: 2px solid var(--primary-color);
        box-shadow: 0 4px 12px rgba(44, 61, 163, 0.2);
    }

    .department-name {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-dark);
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
        .card-body {
            padding: 20px;
        }
        
        .jumbotron h3.display-5 {
            font-size: 1.8rem;
        }
    }

    @media (max-width: 767px) {
        .form-group {
            margin-bottom: 20px;
        }
        
        .card-body {
            padding: 15px;
        }
        
        .btn-submit {
            width: 100%;
            padding: 12px;
        }
        
        .nps label {
            width: 47%;
        }
        
        .department-card {
            width: 45%;
            margin: 0 5px 15px 5px;
        }
    }

    @media (min-width: 576px) {
        .f-logo {
            width: 200px !important;
            max-height: 70px;
            object-fit: contain;
        }
    }

    /* Mobile improvements */
    @media (max-width: 576px) {
        .jumbotron {
            padding: 1rem 0;
        }
        
        .jumbotron h3.display-5 {
            font-size: 1.5rem;
        }
        
        .form-label.heading {
            font-size: 1.1rem;
        }
        
        .card-header {
            padding: 15px;
        }
        
        .container {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    /* Animation for form submission */
    @keyframes submitPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(44, 61, 163, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(44, 61, 163, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(44, 61, 163, 0);
        }
    }

    .form-control.is-invalid {
        border-color: #dc3545;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    .input-with-icon {
        position: relative;
    }

    .input-with-icon i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
    }
</style>
@section('content')

<body>
    <div class="jumbotron jumbotron-fluid bmh-blue-wt">
        <div class="container text-center">
            <a class="logo">
                <span class="logo-lg"> {!! $division->company->logo
                    ? $division->company->fileShow('logo')->size('logo')->view('admin::general.logo')
                    : trans('cms.name.html') !!}</span>
            </a>
        </div>
    </div>
    <div class="card-header">
        <div class="container text-center">
            <h3 class="display-5 text-white">Visitor Management System</h3>
        </div>
    </div>
    
    @php
        $division_id = app('request')->input('division_id');
    @endphp
    
    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0" id="form-title">Visitor Registration Form</h5>
                    </div>
                    <div class="card-body">
                        <h6 class='text-justify bmh-blue-txt font-weight-bold pb-3' id='heading-eng'>
                            Please fill in the visitor details below and submit the form to register your visit.
                        </h6>
                        
                        <form method="POST" class="from-prevent-multiple-submits" action="{{ route('store.visitor_pass') }}" id='visitorForm' enctype="multipart/form-data">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                            <input type="hidden" id="form_name" name="form_name" value="Visitor Pass Request">
                            <input type="hidden" name="division_id" value="{{ $division_id }}">
                            
                            <div class="row">
                                <!-- Personal Information -->
                                <div class="col-12">
                                    <h5 class="form-label heading mb-4" id="personal-info-heading">Personal Information</h5>
                                </div>
                                
                                <div class="col-12">
                                    <div id="additional-visitors-container">
                                        <!-- Additional visitor entries will be added here dynamically -->
                                    </div>
                                    
                                    <div class="text-center mb-4">
                                        <button type="button" id="add-visitor-btn" class="btn btn-outline-primary">
                                            <i class="fas fa-plus mr-2"></i><span id="add-visitor-text">Add Visitor</span>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Add this template at the end of your form (before closing form tag) -->
                                <template id="visitor-template">
                                    <div class="visitor-entry card mb-3">
                                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                            <h6 class="mb-0"><span class="visitor-number">Visitor</span> <span class="visitor-count">1</span></h6>
                                            <button type="button" class="remove-visitor btn btn-sm btn-danger">
                                                <i class="fas fa-times"></i> Remove
                                            </button>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <label class="bmh-blue-txt font-weight-bold visitor-mobile-label">Mobile Number<span class="required">*</span></label>
                                                    <input type="text" class="form-control visitor-mobile" name="additional_visitors[0][mobile]" placeholder="10-digit mobile number" required>
                                                </div>

                                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <label class="bmh-blue-txt font-weight-bold visitor-name-label">Name<span class="required">*</span></label>
                                                    <input type="text" class="form-control visitor-name" name="additional_visitors[0][name]" placeholder="Enter full name" required>
                                                </div>
                                                
                                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <label class="bmh-blue-txt font-weight-bold visitor-id-proof-label">ID Proof Type<span class="required">*</span></label>
                                                    <select class="form-control visitor-id-proof-type" name="additional_visitors[0][id_proof_type]" required>
                                                        <option value="">Select ID Proof</option>
                                                        @foreach($visitorProofTypes as $proofType)
                                                            <option value="{{ $proofType->id }}">{{ $proofType->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                
                                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <label class="bmh-blue-txt font-weight-bold visitor-id-card-label">ID Card Number<span class="required">*</span></label>
                                                    <input type="text" class="form-control visitor-id-card" name="additional_visitors[0][id_card_no]" placeholder="Enter ID number" required>
                                                </div>

                                                <div class="form-group col-md-6">
                                                    <label class="bmh-blue-txt font-weight-bold">Visitor Photo</label>
                                                    <input type="file"
                                                        class="form-control-file visitor-image"
                                                        name="additional_visitors[0][image]"
                                                        accept="image/*"
                                                        capture="camera">
                                             
                                                </div>

                                                <div class="form-group col-md-6">
                                                    <label class="bmh-blue-txt font-weight-bold">ID Proof</label>
                                                    <input type="file"
                                                           class="form-control-file visitor-proof-image"
                                                           name="additional_visitors[0][visitor_proof_image]"
                                                           accept="image/*"
                                                           capture="camera">
                                                </div>                                                
                                                
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                
                                <!-- Visit Details -->
                                <div class="col-12 mt-4">
                                    <div class="section-divider"></div>
                                    <h5 class="form-label heading mb-4 mt-4" id="visit-details-heading">Visit Details</h5>
                                </div>
                                
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <label for="visit_date" class="bmh-blue-txt font-weight-bold" id='visit-date-label'>Visit Date<span class="required">*</span></label>
                                    <input type="date" class="form-control" id="visit_date" name="visit_date" required>
                                </div>
                                
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <label for="visitor_category" class="bmh-blue-txt font-weight-bold" id='visitor-category-label'>Visitor Category<span class="required">*</span></label>
                                    <select class="form-control" id="visitor_category" name="visitor_category_id" required>
                                        <option value="">Select Visitor Category</option>
                                        @foreach($visitorCategories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <label for="purpose" class="bmh-blue-txt font-weight-bold" id='purpose-label'>Purpose of Visit<span class="required">*</span></label>
                                    <input type="text" class="form-control" id="purpose" name="purpose" placeholder="Brief description of your visit purpose" required>
                                </div>
                                
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <label for="department_id" class="bmh-blue-txt font-weight-bold" id='department-label'>Visiting Department<span class="required">*</span></label>
                                    <select class="form-control" id="department_id" name="department_id" required>
                                        <option value="">Select Department</option>
                                        @foreach($departments as $department)
                                            <option value="{{ $department->id }}">{{ $department->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <label for="host_employee_id" class="bmh-blue-txt font-weight-bold" id='host-label'>Host Name (Employee)</label>
                                    <select class="form-control" id="host_employee_id" name="host_employee_id">
                                        <option value="">Select Employee</option>
                                        @foreach($employees as $employee)
                                            <option value="{{ $employee->id }}">{{ $employee->code }} - {{ $employee->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <label for="remarks" class="bmh-blue-txt font-weight-bold" id='remarks-label'>Remarks</label>
                                    <textarea class="form-control" id="remarks" name="remarks" rows="3" placeholder="Please enter additional information if any"></textarea>
                                </div>
                                
                            </div>
                            
                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="privacy_policy" name="privacy_policy" required>
                                        <label class="custom-control-label" for="privacy_policy" id="privacy-policy-label">
                                            I confirm that all the information provided is accurate and I agree to the Terms of Use.
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="col-12 mt-4 text-center">
                                    <button type="submit" class="btn btn-primary" id="submit-btn">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="footer">
                        <div class="footer-bar"></div>
                        <div class="text-center text-muted">
                            <small>
                                &copy; 2025 
                                <a href="https://assetsadm.com/">Assetsadm</a> | 
                                <a href="https://assetsadm.com/terms-of-use">Terms of use</a> |
                                <a href="https://assetsadm.com/privacy-policy">Privacy Policy</a></small>
                        </div>
                    </div>
                    <div id="visitor-container" data-mo-no-digits="{{ $division->company->mo_no_digits }}">
                        <!-- Your visitor entries here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="{!! trans_url('packages/select2/css/select2.min.css') !!}">
    <script src="{!! trans_url('packages/select2/js/select2.full.js') !!}"></script>
    
    <script type="text/javascript">
     $(document).ready(function() {
        $('#host_employee_id').select2({
            placeholder: "Select Employee",
            allowClear: true
        });
    // Existing code remains the same...
    var today = new Date().toISOString().split('T')[0];
    $('#visit_date').val(today).attr('min', today);

    $('#department_id').on('change', function() {
        var deptId = $(this).val();
        $('#host_employee_id').html('<option value="">Loading...</option>');

        if(deptId) {
            $.ajax({
                url: '/get-employees/' + deptId,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#host_employee_id').empty();
                    $('#host_employee_id').append('<option value="">Select Employee</option>');
                    $.each(data, function(key, employee) {
                        $('#host_employee_id').append(
                            '<option value="' + employee.id + '">' + employee.code + ' - ' + employee.name + '</option>'
                        );
                    });
                }
            });
        } else {
            $('#host_employee_id').html('<option value="">Select Employee</option>');
        }
    });

    $('#host_employee_id').on('change', function () {
        var employeeId = $(this).val();
        $('#department_id').html('<option value="">Loading...</option>');

        if (employeeId) {
            $.ajax({
                url: '/get-departments/' + employeeId,
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    $('#department_id').empty();
                    $('#department_id').append('<option value="">Select Department</option>');

                    $.each(response.departments, function (key, department) {
                        var selected = (department.id == response.selected_department_id) ? 'selected' : '';
                        $('#department_id').append(
                            '<option value="' + department.id + '" ' + selected + '>' +
                            department.code + ' - ' + department.name + '</option>'
                        );
                    });
                }
            });
        } else {
            $('#department_id').html('<option value="">Select Department</option>');
        }
    });

    // Initialize visitor count
    let visitorCount = 0;
    
    // Add visitor button click handler
    $('#add-visitor-btn').on('click', function() {
        addVisitor();
    });
    
    // Add first visitor by default (since at least one is required)
    addVisitor();
    
    // Function to add a new visitor
    function addVisitor() {
        visitorCount++;
        
        // Clone the template
        const template = document.querySelector('#visitor-template');
        const visitorNode = document.importNode(template.content, true);
        
        // Update visitor count and names
        $(visitorNode).find('.visitor-count').text(visitorCount);
        
        // Update input names with correct index
        $(visitorNode).find('[name]').each(function() {
            const name = $(this).attr('name');
            $(this).attr('name', name.replace('[0]', '[' + (visitorCount - 1) + ']'));
        });
        
        // Add remove button handler - only allow removal if more than one visitor exists
        $(visitorNode).find('.remove-visitor').on('click', function() {
            if ($('.visitor-entry').length > 1) {
                $(this).closest('.visitor-entry').remove();
                updateVisitorNumbers();
            } else {
                // Instead of alert, show inline validation message
                if ($('#min-visitor-error').length === 0) {
                    $('#additional-visitors-container').before(
                        '<div id="min-visitor-error" class="alert alert-danger mb-3">' +
                        'At least one visitor is required. Cannot remove the last visitor.' +
                        '</div>'
                    );
                    
                    // Auto-hide the message after 3 seconds
                    setTimeout(function() {
                        $('#min-visitor-error').fadeOut('slow', function() {
                            $(this).remove();
                        });
                    }, 3000);
                }
            }
        });
        
        // Add validation handlers
        setupValidation(visitorNode);
        
        // Set up auto-fill feature for mobile number
        setupAutoFill(visitorNode);
        
        // Append to container
        $('#additional-visitors-container').append(visitorNode);
    }
    
    // Function to update visitor numbers after removal
    function updateVisitorNumbers() {
        visitorCount = 0;
        
        $('.visitor-entry').each(function(index) {
            visitorCount++;
            $(this).find('.visitor-count').text(visitorCount);
            
            // Update input names with correct index
            $(this).find('[name]').each(function() {
                const name = $(this).attr('name');
                const newName = name.replace(/additional_visitors\[\d+\]/, 'additional_visitors[' + index + ']');
                $(this).attr('name', newName);
            });
        });
    }
    
    // Setup auto-fill functionality for mobile number
    function setupAutoFill(visitorNode) {
        var moNoDigits = parseInt("{{ $division->company->mo_no_digits }}", 10) || 10;

        $(visitorNode).find('.visitor-mobile').on('input', function () {
            const mobileNumber = $(this).val().trim();
            const visitorEntry = $(this).closest('.card-body');
            const regex = new RegExp('^\\d{' + moNoDigits + '}$');
            
            // Validate the mobile number
            if (mobileNumber.length === moNoDigits && regex.test(mobileNumber)) {
                const loadingIndicator = $('<div class="spinner-border spinner-border-sm text-primary ml-2" role="status"><span class="sr-only">Loading...</span></div>');
                $(this).after(loadingIndicator);

                $.ajax({
                    url: '/get-visitor-details/' + mobileNumber,
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        loadingIndicator.remove();

                        if (data && data.visitor) {
                            const visitor = data.visitor;

                            // Fill name
                            visitorEntry.find('.visitor-name').val(visitor.name).addClass('is-valid');

                            // Fill ID proof type using value
                            visitorEntry.find('.visitor-id-proof-type')
                                .val(visitor.id_proof_type)
                                .addClass('is-valid');

                            // Fill ID card number
                            visitorEntry.find('.visitor-id-card')
                                .val(visitor.id_card_no)
                                .addClass('is-valid');
                        }
                    },
                    error: function () {
                        loadingIndicator.remove();
                    }
                });
            }
        });
    }
    
    // Setup validation for visitor inputs
    function setupValidation(visitorNode) {
        // Mobile number validation
        $(visitorNode).find('.visitor-mobile').on('input', function() {
            const mobileNumber = $(this).val();
            if (mobileNumber.length > 0) {
                if (!/^\d+$/.test(mobileNumber)) {
                    $(this).addClass('is-invalid');
                    $(this).next('.invalid-feedback').remove();
                    $(this).after('<div class="invalid-feedback">Please enter digits only</div>');
                } else if (mobileNumber.length === 10) {
                    $(this).removeClass('is-invalid').addClass('is-valid');
                    $(this).next('.invalid-feedback').remove();
                } else {
                    $(this).removeClass('is-valid is-invalid');
                    $(this).next('.invalid-feedback').remove();
                }
            }
        });
        
        // ID card validation
        $(visitorNode).find('.visitor-id-proof-type, .visitor-id-card').on('change keyup', function() {
            validateVisitorIDCard($(this).closest('.visitor-entry'));
        });
    }
    
    // Function to validate ID card based on ID proof type
    function validateVisitorIDCard(visitorEntry) {
        const proofTypeSelect = $(visitorEntry).find('.visitor-id-proof-type');
        const idCardInput = $(visitorEntry).find('.visitor-id-card');
        
        let proofType = $(proofTypeSelect).find('option:selected').text().trim().toLowerCase();
        let idNumber = $(idCardInput).val().trim();
        let isValid = true;
        let errorMessage = '';

        if (proofType === 'aadhaar card') {
            isValid = /^\d{12}$/.test(idNumber);
            if (!isValid) errorMessage = 'Aadhaar number must be 12 digits.';
        } else if (proofType === 'driving license') {
            isValid = /^[A-Z]{2}[0-9]{2}\s?[0-9]{11}$/.test(idNumber);
            if (!isValid) errorMessage = 'Enter a valid Driving License number.';
        } else if (proofType === 'passport') {
            isValid = /^[A-Z][0-9]{7}$/.test(idNumber);
            if (!isValid) errorMessage = 'Enter a valid Passport number.';
        } else if (proofType === 'pan card') {
            isValid = /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(idNumber);
            if (!isValid) errorMessage = 'Enter a valid PAN Card number.';
        }

        const $error = $(idCardInput).next('.text-danger');

        if (!isValid && idNumber !== '') {
            if ($error.length === 0) {
                $(idCardInput).after('<small class="text-danger">' + errorMessage + '</small>');
                $(idCardInput).addClass('is-invalid');
            } else {
                $error.text(errorMessage);
            }
        } else {
            $error.remove();
            $(idCardInput).removeClass('is-invalid');
            if (idNumber !== '') {
                $(idCardInput).addClass('is-valid');
            }
        }

        return isValid;
    }
    
    // Validate all visitors on form submission
    $('form').on('submit', function(e) {
        let isFormValid = true;
        
        // Check if at least one visitor exists
        if ($('.visitor-entry').length === 0) {
            isFormValid = false;
            if ($('#no-visitor-error').length === 0) {
                $(this).prepend('<div id="no-visitor-error" class="alert alert-danger">At least one visitor is required.</div>');
            }
        }
        
        // Validate each visitor's fields
        $('.visitor-entry').each(function() {
            const visitorEntry = $(this);
            const nameInput = visitorEntry.find('.visitor-name');
            const mobileInput = visitorEntry.find('.visitor-mobile');
            const idTypeInput = visitorEntry.find('.visitor-id-proof-type');
            const idCardInput = visitorEntry.find('.visitor-id-card');
            
            // Validate name
            if (nameInput.val().trim() === '') {
                nameInput.addClass('is-invalid');
                isFormValid = false;
            }
            
            // Validate mobile
            const mobileNumber = mobileInput.val();
            if (!/^\d{10}$/.test(mobileNumber)) {
                mobileInput.addClass('is-invalid');
                isFormValid = false;
            }
            
            // Validate ID type
            if (idTypeInput.val() === '') {
                idTypeInput.addClass('is-invalid');
                isFormValid = false;
            }
            
            // Validate ID card
            if (!validateVisitorIDCard(visitorEntry)) {
                isFormValid = false;
            }
        });
        
        if (!isFormValid) {
            e.preventDefault();
            
            // Show form error message
            if ($('#form-error-msg').length === 0) {
                $(this).prepend('<div id="form-error-msg" class="alert alert-danger">Please correct the highlighted errors before submitting.</div>');
            }
            
            // Scroll to the first error
            $('html, body').animate({
                scrollTop: $('.is-invalid:first').offset().top - 100
            }, 200);
            
            // Reset submit button
            $('#submit-btn').prop('disabled', false).text('Submit');
        }
    });
    
    // Apply auto-fill to the first visitor
    setupAutoFill($('.visitor-entry:first'));
});
    </script>
</body>

@stop