@extends('layouts.app')

@section('title', 'Create Client Request')
@section('page-title', 'Create Client Request')

@section('content')
<div class="container-fluid">
    <!-- Back Button -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ route('client-requests.index') }}" class="btn btn-secondary btn-custom">
                <i class="fas fa-arrow-left me-1"></i>Back to Requests
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header custom-card-header">
                    <h5 class="mb-0"><i class="fas fa-plus me-2"></i>Create New Client Request</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('client-requests.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="customer_name" class="form-label">Customer Name <span class="text-danger">*</span></label>
                                    <div class="position-relative">
                                        <input type="text" class="form-control custom-form-control @error('customer_name') is-invalid @enderror" 
                                               id="customer_name" name="customer_name" value="{{ old('customer_name') }}" 
                                               autocomplete="off" required>
                                        <input type="hidden" id="customer_id" name="customer_id">
                                        <div id="customerAutocomplete" class="autocomplete-dropdown" style="display: none;"></div>
                                    </div>
                                    @error('customer_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="mobile" class="form-label">Mobile Number <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control custom-form-control @error('mobile') is-invalid @enderror" 
                                           id="mobile" name="mobile" value="{{ old('mobile') }}" required>
                                    @error('mobile')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email Address</label>
                                    <input type="email" class="form-control custom-form-control @error('email') is-invalid @enderror" 
                                           id="email" name="email" value="{{ old('email') }}">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="package_id" class="form-label">Package</label>
                                    <select class="form-select custom-form-control @error('package_id') is-invalid @enderror" 
                                            id="package_id" name="package_id">
                                        <option value="">Select a package</option>
                                        @foreach($packages as $package)
                                            <option value="{{ $package->id }}" {{ old('package_id') == $package->id ? 'selected' : '' }}>
                                                {{ $package->name }}
                                                @if($package->price)
                                                    - BDT{{ number_format($package->price, 2) }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('package_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Branch Selection -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="branch_id" class="form-label">Select Branch</label>
                                    <select class="form-select custom-form-control @error('branch_id') is-invalid @enderror" 
                                            id="branch_id" name="branch_id">
                                        <option value="">Select a branch</option>
                                        @foreach($branches as $branch)
                                            <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>
                                                {{ $branch->name }}
                                                @if($branch->code)
                                                    - {{ $branch->code }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('branch_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Zone and Subzone Selection -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="zone_id" class="form-label">Select Zone</label>
                                    <select class="form-select custom-form-control @error('zone_id') is-invalid @enderror" 
                                            id="zone_id" name="zone_id">
                                        <option value="">Select a zone</option>
                                        @foreach($zones as $zone)
                                            <option value="{{ $zone->id }}" {{ old('zone_id') == $zone->id ? 'selected' : '' }}>
                                                {{ $zone->name }}
                                                @if($zone->description)
                                                    - {{ $zone->description }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('zone_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="subzone_id" class="form-label">Select Subzone</label>
                                    <select class="form-select custom-form-control @error('subzone_id') is-invalid @enderror" 
                                            id="subzone_id" name="subzone_id">
                                        <option value="">Select a subzone</option>
                                        @foreach($subzones as $subzone)
                                            <option value="{{ $subzone->id }}" 
                                                    data-zone-id="{{ $subzone->zone_id }}"
                                                    {{ old('subzone_id') == $subzone->id ? 'selected' : '' }}>
                                                {{ $subzone->name }}
                                                @if($subzone->description)
                                                    - {{ $subzone->description }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('subzone_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- New Location Fields -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="district" class="form-label">District</label>
                                    <select class="form-select custom-form-control @error('district') is-invalid @enderror" 
                                            id="district" name="district">
                                        <option value="">Select District</option>
                                        @foreach($districts as $district)
                                            <option value="{{ $district->id }}" {{ old('district') == $district->id ? 'selected' : '' }}>
                                                {{ $district->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('district')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="upazila_thana" class="form-label">Upazila/Thana</label>
                                    <select class="form-select custom-form-control @error('upazila_thana') is-invalid @enderror" 
                                            id="upazila_thana" name="upazila_thana">
                                        <option value="">Select Upazila/Thana</option>
                                    </select>
                                    @error('upazila_thana')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="area" class="form-label">Area</label>
                                    <input type="text" class="form-control custom-form-control @error('area') is-invalid @enderror" 
                                           id="area" name="area" value="{{ old('area') }}" placeholder="Enter area">
                                    @error('area')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sector" class="form-label">Sector</label>
                                    <input type="text" class="form-control custom-form-control @error('sector') is-invalid @enderror" 
                                           id="sector" name="sector" value="{{ old('sector') }}" placeholder="Enter sector">
                                    @error('sector')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="road_no" class="form-label">Road No.</label>
                                    <input type="text" class="form-control custom-form-control @error('road_no') is-invalid @enderror" 
                                           id="road_no" name="road_no" value="{{ old('road_no') }}" placeholder="Enter road number">
                                    @error('road_no')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="house_number" class="form-label">House Number</label>
                                    <input type="text" class="form-control custom-form-control @error('house_number') is-invalid @enderror" 
                                           id="house_number" name="house_number" value="{{ old('house_number') }}" placeholder="Enter house number">
                                    @error('house_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="flat_number" class="form-label">Flat Number</label>
                                    <input type="text" class="form-control custom-form-control @error('flat_number') is-invalid @enderror" 
                                           id="flat_number" name="flat_number" value="{{ old('flat_number') }}" placeholder="Enter flat number">
                                    @error('flat_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- Empty column for layout balance -->
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control custom-form-control @error('address') is-invalid @enderror" 
                                      id="address" name="address" rows="3" required>{{ old('address') }}</textarea>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="customer_type" class="form-label">Customer Type</label>
                                    <div class="input-group">
                                        <select class="form-select custom-form-control @error('customer_type') is-invalid @enderror" 
                                                id="customer_type" name="customer_type">
                                            <option value="">Select customer type</option>
                                            @foreach($clientTypes as $clientType)
                                                <option value="{{ $clientType->id }}" {{ old('customer_type') == $clientType->id ? 'selected' : '' }}>
                                                    {{ $clientType->name }}
                                                    @if($clientType->description)
                                                        - {{ $clientType->description }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addCustomerTypeModal">
                                            <i class="fas fa-plus"></i> Add
                                        </button>
                                    </div>
                                    @error('customer_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="connection_type" class="form-label">Connection Type</label>
                                    <div class="input-group">
                                        <select class="form-select custom-form-control @error('connection_type') is-invalid @enderror" 
                                                id="connection_type" name="connection_type">
                                            <option value="">Select connection type</option>
                                            @foreach($connectionTypes as $connectionType)
                                                <option value="{{ $connectionType->id }}" {{ old('connection_type') == $connectionType->id ? 'selected' : '' }}>
                                                    {{ $connectionType->name }}
                                                    @if($connectionType->description)
                                                        - {{ $connectionType->description }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addConnectionTypeModal">
                                            <i class="fas fa-plus"></i> Add
                                        </button>
                                    </div>
                                    @error('connection_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="otc_connection_charge" class="form-label">OTC Connection Charge</label>
                                    <div class="input-group">
                                        <span class="input-group-text">BDT</span>
                                        <input type="number" class="form-control custom-form-control @error('otc_connection_charge') is-invalid @enderror" 
                                               id="otc_connection_charge" name="otc_connection_charge" 
                                               value="{{ old('otc_connection_charge') }}" step="0.01" min="0">
                                    </div>
                                    @error('otc_connection_charge')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="status" class="form-label">Initial Status</label>
                                    <select class="form-select custom-form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status">
                                        <option value="pending" {{ old('status', 'pending') == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="processing" {{ old('status') == 'processing' ? 'selected' : '' }}>Processing</option>
                                        <option value="completed" {{ old('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="notes" class="form-label">Notes</label>
                            <textarea class="form-control custom-form-control @error('notes') is-invalid @enderror" 
                                      id="notes" name="notes" rows="3" placeholder="Any additional notes or comments...">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('client-requests.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-times me-1"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary btn-custom">
                                <i class="fas fa-save me-1"></i>Create Request
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Customer Type Modal -->
<div class="modal fade" id="addCustomerTypeModal" tabindex="-1" aria-labelledby="addCustomerTypeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCustomerTypeModalLabel">Add New Customer Type</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addCustomerTypeForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="new_customer_type_name" class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="new_customer_type_name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="new_customer_type_description" class="form-label">Description</label>
                        <textarea class="form-control" id="new_customer_type_description" name="description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Customer Type</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Connection Type Modal -->
<div class="modal fade" id="addConnectionTypeModal" tabindex="-1" aria-labelledby="addConnectionTypeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addConnectionTypeModalLabel">Add New Connection Type</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addConnectionTypeForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="new_connection_type_name" class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="new_connection_type_name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="new_connection_type_description" class="form-label">Description</label>
                        <textarea class="form-control" id="new_connection_type_description" name="description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Connection Type</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .loading-upazila {
        opacity: 0.6;
        pointer-events: none;
    }
    
    .upazila-loading {
        background-color: #f8f9fa;
        color: #6c757d;
    }
    
    /* Form Field Height and Width Fixes */
    .form-control,
    .form-select,
    .custom-form-control {
        height: 42px !important;
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    textarea.form-control,
    textarea.custom-form-control {
        height: auto !important;
        min-height: 80px !important;
        resize: vertical;
    }
    
    .form-label {
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-bottom: 6px !important;
    }
    
    .input-group .form-control,
    .input-group .form-select {
        height: 42px !important;
    }
    
    .input-group-text {
        height: 42px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    /* Autocomplete Dropdown Styles */
    .autocomplete-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ced4da;
        border-top: none;
        border-radius: 0 0 4px 4px;
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .autocomplete-item {
        padding: 10px 12px;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s;
    }
    
    .autocomplete-item:hover {
        background-color: #f8f9fa;
    }
    
    .autocomplete-item:last-child {
        border-bottom: none;
    }
    
    .autocomplete-item .customer-name {
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
    }
    
    .autocomplete-item .customer-details {
        font-size: 12px;
        color: #666;
    }
    
    .position-relative {
        position: relative;
    }
</style>
@endsection

@section('scripts')
<script>
// Customer Name Autocomplete
(function() {
    const customerNameInput = document.getElementById('customer_name');
    const customerIdInput = document.getElementById('customer_id');
    const autocompleteDropdown = document.getElementById('customerAutocomplete');
    let searchTimeout;
    let selectedCustomerId = null;
    
    // Search customers on input
    customerNameInput.addEventListener('input', function(e) {
        const query = e.target.value.trim();
        
        // Clear previous timeout
        clearTimeout(searchTimeout);
        
        // Hide dropdown if query is too short
        if (query.length < 2) {
            autocompleteDropdown.style.display = 'none';
            autocompleteDropdown.innerHTML = '';
            selectedCustomerId = null;
            customerIdInput.value = '';
            return;
        }
        
        // Debounce search
        searchTimeout = setTimeout(() => {
            searchCustomers(query);
        }, 300);
    });
    
    // Hide dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (!customerNameInput.contains(e.target) && !autocompleteDropdown.contains(e.target)) {
            autocompleteDropdown.style.display = 'none';
        }
    });
    
    // Search customers function
    function searchCustomers(query) {
        fetch(`{{ route('client-requests.search-customers') }}?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(customers => {
                displayAutocompleteResults(customers);
            })
            .catch(error => {
                console.error('Error searching customers:', error);
                autocompleteDropdown.style.display = 'none';
            });
    }
    
    // Display autocomplete results
    function displayAutocompleteResults(customers) {
        if (customers.length === 0) {
            autocompleteDropdown.style.display = 'none';
            return;
        }
        
        autocompleteDropdown.innerHTML = '';
        customers.forEach(customer => {
            const item = document.createElement('div');
            item.className = 'autocomplete-item';
            item.innerHTML = `
                <div class="customer-name">${customer.name}</div>
                <div class="customer-details">${customer.mobile}${customer.email ? ' - ' + customer.email : ''}</div>
            `;
            
            item.addEventListener('click', function() {
                selectCustomer(customer.id);
            });
            
            autocompleteDropdown.appendChild(item);
        });
        
        autocompleteDropdown.style.display = 'block';
    }
    
    // Select customer and auto-fill fields
    function selectCustomer(customerId) {
        selectedCustomerId = customerId;
        customerIdInput.value = customerId;
        
        // Fetch customer details - use proper URL construction
        const detailsUrl = '{{ url("/client-requests/customer") }}/' + customerId + '/details';
        fetch(detailsUrl)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.customer) {
                    const customer = data.customer;
                    
                    // Auto-fill fields
                    customerNameInput.value = customer.name;
                    document.getElementById('mobile').value = customer.mobile || '';
                    document.getElementById('email').value = customer.email || '';
                    document.getElementById('address').value = customer.address || '';
                    
                    // Fill location fields if available
                    if (customer.area) {
                        document.getElementById('area').value = customer.area;
                    }
                    if (customer.road_no) {
                        document.getElementById('road_no').value = customer.road_no;
                    }
                    if (customer.house_number) {
                        document.getElementById('house_number').value = customer.house_number;
                    }
                    
                    // Update address field
                    if (typeof updateAddressField === 'function') {
                        updateAddressField();
                    }
                    
                    // Hide dropdown
                    autocompleteDropdown.style.display = 'none';
                }
            })
            .catch(error => {
                console.error('Error fetching customer details:', error);
            });
    }
})();

// Auto-format mobile number
document.getElementById('mobile').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, '');
    if (value.length > 0) {
        if (value.startsWith('880')) {
            value = value.substring(3);
        }
        if (value.length > 10) {
            value = value.substring(0, 10);
        }
    }
    e.target.value = value;
});

// Auto-calculate OTC based on package
document.getElementById('package_id').addEventListener('change', function(e) {
    const selectedOption = e.target.options[e.target.selectedIndex];
    const packageText = selectedOption.text;
    
    // Extract price from package text if available
    const priceMatch = packageText.match(/BDT([\d,]+\.?\d*)/);
    if (priceMatch) {
        const price = parseFloat(priceMatch[1].replace(',', ''));
        // Set OTC as 10% of package price (or customize as needed)
        document.getElementById('otc_connection_charge').value = (price * 0.1).toFixed(2);
    }
});

// District-wise Upazila/Thana functionality
document.getElementById('district').addEventListener('change', function(e) {
    const districtId = e.target.value;
    const upazilaSelect = document.getElementById('upazila_thana');
    
    // Clear existing options
    upazilaSelect.innerHTML = '<option value="">Select Upazila/Thana</option>';
    
    if (districtId) {
        // Show loading state
        upazilaSelect.disabled = true;
        upazilaSelect.classList.add('loading-upazila');
        upazilaSelect.innerHTML = '<option value="" class="upazila-loading">Loading upazilas...</option>';
        
        // Fetch upazilas for selected district
        fetch(`/api/upazilas/${districtId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                upazilaSelect.innerHTML = '<option value="">Select Upazila/Thana</option>';
                
                if (data && data.length > 0) {
                    data.forEach(upazila => {
                        const option = document.createElement('option');
                        option.value = upazila.id;
                        option.textContent = upazila.name;
                        upazilaSelect.appendChild(option);
                    });
                } else {
                    upazilaSelect.innerHTML = '<option value="">No upazilas found</option>';
                }
                
                upazilaSelect.disabled = false;
                upazilaSelect.classList.remove('loading-upazila');
            })
            .catch(error => {
                console.error('Error fetching upazilas:', error);
                upazilaSelect.innerHTML = '<option value="">Error loading upazilas</option>';
                upazilaSelect.disabled = false;
                upazilaSelect.classList.remove('loading-upazila');
            });
    }
    
    // Auto-fill address
    updateAddressField();
});

// Auto-fill Address field functionality
function updateAddressField() {
    const districtSelect = document.getElementById('district');
    const upazilaSelect = document.getElementById('upazila_thana');
    const areaInput = document.getElementById('area');
    const sectorInput = document.getElementById('sector');
    const roadNoInput = document.getElementById('road_no');
    const houseNumberInput = document.getElementById('house_number');
    const flatNumberInput = document.getElementById('flat_number');
    const addressTextarea = document.getElementById('address');
    
    // Get selected district name
    const districtName = districtSelect.options[districtSelect.selectedIndex].text;
    const districtValue = districtSelect.value;
    
    // Get selected upazila name
    const upazilaName = upazilaSelect.options[upazilaSelect.selectedIndex].text;
    const upazilaValue = upazilaSelect.value;
    
    // Get input values
    const area = areaInput.value.trim();
    const sector = sectorInput.value.trim();
    const roadNo = roadNoInput.value.trim();
    const houseNumber = houseNumberInput.value.trim();
    const flatNumber = flatNumberInput.value.trim();
    
    // Build address components
    let addressParts = [];
    
    // Add house and flat number
    if (houseNumber && flatNumber) {
        addressParts.push(`House ${houseNumber}, Flat ${flatNumber}`);
    } else if (houseNumber) {
        addressParts.push(`House ${houseNumber}`);
    } else if (flatNumber) {
        addressParts.push(`Flat ${flatNumber}`);
    }
    
    // Add road number
    if (roadNo) {
        addressParts.push(`Road ${roadNo}`);
    }
    
    // Add sector
    if (sector) {
        addressParts.push(`Sector ${sector}`);
    }
    
    // Add area
    if (area) {
        addressParts.push(area);
    }
    
    // Add upazila (if selected and not default option)
    if (upazilaValue && upazilaName !== 'Select Upazila/Thana') {
        addressParts.push(upazilaName);
    }
    
    // Add district (if selected and not default option)
    if (districtValue && districtName !== 'Select District') {
        addressParts.push(districtName);
    }
    
    // Join all parts with comma and space
    const fullAddress = addressParts.join(', ');
    
    // Update address field
    addressTextarea.value = fullAddress;
}

// Add event listeners for all location fields
document.getElementById('upazila_thana').addEventListener('change', updateAddressField);
document.getElementById('area').addEventListener('input', updateAddressField);
document.getElementById('sector').addEventListener('input', updateAddressField);
document.getElementById('road_no').addEventListener('input', updateAddressField);
document.getElementById('house_number').addEventListener('input', updateAddressField);
document.getElementById('flat_number').addEventListener('input', updateAddressField);

    // Add Customer Type functionality
    document.getElementById('addCustomerTypeForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const name = formData.get('name');
        const description = formData.get('description');
        
        if (!name.trim()) {
            alert('Please enter a customer type name');
            return;
        }
        
        // Send AJAX request to add customer type
        fetch('/api/client-types', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                name: name,
                description: description
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Add new option to dropdown
                const select = document.getElementById('customer_type');
                const newOption = document.createElement('option');
                newOption.value = data.clientType.id;
                newOption.textContent = data.clientType.name + (data.clientType.description ? ' - ' + data.clientType.description : '');
                select.appendChild(newOption);
                
                // Select the new option
                select.value = data.clientType.id;
                
                // Close modal and reset form
                bootstrap.Modal.getInstance(document.getElementById('addCustomerTypeModal')).hide();
                this.reset();
                
                alert('Customer type added successfully!');
            } else {
                alert('Error: ' + (data.message || 'Failed to add customer type'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while adding customer type');
        });
    });

    // Add Connection Type functionality
    document.getElementById('addConnectionTypeForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const name = formData.get('name');
        const description = formData.get('description');
        
        if (!name.trim()) {
            alert('Please enter a connection type name');
            return;
        }
        
        // Send AJAX request to add connection type
        fetch('/api/connection-types', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                name: name,
                description: description
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Add new option to dropdown
                const select = document.getElementById('connection_type');
                const newOption = document.createElement('option');
                newOption.value = data.connectionType.id;
                newOption.textContent = data.connectionType.name + (data.connectionType.description ? ' - ' + data.connectionType.description : '');
                select.appendChild(newOption);
                
                // Select the new option
                select.value = data.connectionType.id;
                
                // Close modal and reset form
                bootstrap.Modal.getInstance(document.getElementById('addConnectionTypeModal')).hide();
                this.reset();
                
                alert('Connection type added successfully!');
            } else {
                alert('Error: ' + (data.message || 'Failed to add connection type'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while adding connection type');
        });
    });

    // Branch, Zone and Subzone dependent dropdown functionality
    document.getElementById('branch_id').addEventListener('change', function() {
        const branchId = this.value;
        const zoneSelect = document.getElementById('zone_id');
        const subzoneSelect = document.getElementById('subzone_id');
        
        // Clear zone and subzone dropdowns
        zoneSelect.innerHTML = '<option value="">Select a zone</option>';
        subzoneSelect.innerHTML = '<option value="">Select a subzone</option>';
        
        if (branchId) {
            // Fetch zones for the selected branch
            fetch(`/api/zones/by-branch/${branchId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        data.zones.forEach(zone => {
                            const option = document.createElement('option');
                            option.value = zone.id;
                            option.textContent = zone.name + (zone.description ? ' - ' + zone.description : '');
                            zoneSelect.appendChild(option);
                        });
                    }
                })
                .catch(error => {
                    console.error('Error fetching zones:', error);
                });
        }
    });

    document.getElementById('zone_id').addEventListener('change', function() {
        const zoneId = this.value;
        const subzoneSelect = document.getElementById('subzone_id');
        
        // Clear existing options except the first one
        subzoneSelect.innerHTML = '<option value="">Select a subzone</option>';
        
        if (zoneId) {
            // Show only subzones that belong to the selected zone
            const allSubzoneOptions = document.querySelectorAll('#subzone_id option[data-zone-id]');
            allSubzoneOptions.forEach(option => {
                if (option.getAttribute('data-zone-id') === zoneId) {
                    subzoneSelect.appendChild(option.cloneNode(true));
                }
            });
        } else {
            // If no zone selected, show all subzones
            const allSubzoneOptions = document.querySelectorAll('#subzone_id option[data-zone-id]');
            allSubzoneOptions.forEach(option => {
                subzoneSelect.appendChild(option.cloneNode(true));
            });
        }
    });

    // Initialize dropdowns on page load
    document.addEventListener('DOMContentLoaded', function() {
        const branchSelect = document.getElementById('branch_id');
        const zoneSelect = document.getElementById('zone_id');
        const subzoneSelect = document.getElementById('subzone_id');
        
        // If a branch is already selected (from old values), load its zones
        if (branchSelect.value) {
            branchSelect.dispatchEvent(new Event('change'));
            
            // If a zone is already selected (from old values), filter subzones
            setTimeout(() => {
                if (zoneSelect.value) {
                    zoneSelect.dispatchEvent(new Event('change'));
                }
                
                // If a subzone is already selected (from old values), make sure it's visible
                if (subzoneSelect.value) {
                    const selectedOption = subzoneSelect.querySelector(`option[value="${subzoneSelect.value}"]`);
                    if (selectedOption && selectedOption.getAttribute('data-zone-id')) {
                        const zoneId = selectedOption.getAttribute('data-zone-id');
                        zoneSelect.value = zoneId;
                        zoneSelect.dispatchEvent(new Event('change'));
                        subzoneSelect.value = selectedOption.value;
                    }
                }
            }, 500); // Wait for zones to load
        }
    });
</script>
@endsection