@extends('layouts.app')

@section('title', 'Add New Customer')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <a href="{{ route('customers.index', $website) }}" class="text-decoration-none text-muted">
                        <i class="bi bi-arrow-left me-1"></i>Back to Customers
                    </a>
                    <h1 class="h3 mb-0 mt-2">
                        <i class="bi bi-person-plus me-2 text-primary"></i>Add New Customer
                    </h1>
                </div>
            </div>
        </div>
    </div>

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>Please fix the following errors:</strong>
        <ul class="mb-0 mt-2">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <!-- Customer Form -->
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Customer Information</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('customers.store', $website) }}" method="POST">
                        @csrf

                        <!-- Basic Information -->
                        <div class="mb-4">
                            <h6 class="border-bottom pb-2 mb-3">Basic Information</h6>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                                           id="name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror"
                                           id="email" name="email" value="{{ old('email') }}" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="tel" class="form-control @error('phone') is-invalid @enderror"
                                           id="phone" name="phone" value="{{ old('phone') }}"
                                           placeholder="+60123456789">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="customer_type" class="form-label">Customer Type <span class="text-danger">*</span></label>
                                    <select class="form-select @error('customer_type') is-invalid @enderror"
                                            id="customer_type" name="customer_type" required>
                                        <option value="guest" {{ old('customer_type') == 'guest' ? 'selected' : '' }}>Guest</option>
                                        <option value="registered" {{ old('customer_type') == 'registered' ? 'selected' : '' }}>Registered</option>
                                        <option value="vip" {{ old('customer_type') == 'vip' ? 'selected' : '' }}>VIP</option>
                                    </select>
                                    @error('customer_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Address Information -->
                        <div class="mb-4">
                            <h6 class="border-bottom pb-2 mb-3">Address Information</h6>

                            <div class="mb-3">
                                <label for="address_line_1" class="form-label">Address Line 1</label>
                                <input type="text" class="form-control @error('address_line_1') is-invalid @enderror"
                                       id="address_line_1" name="address_line_1" value="{{ old('address_line_1') }}"
                                       placeholder="Street address, P.O. box">
                                @error('address_line_1')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="address_line_2" class="form-label">Address Line 2</label>
                                <input type="text" class="form-control @error('address_line_2') is-invalid @enderror"
                                       id="address_line_2" name="address_line_2" value="{{ old('address_line_2') }}"
                                       placeholder="Apartment, suite, unit, building, floor, etc.">
                                @error('address_line_2')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="country" class="form-label">Country</label>
                                    <select class="form-select @error('country') is-invalid @enderror"
                                            id="country" name="country" onchange="updateStates()">
                                        <option value="">Select Country</option>
                                    </select>
                                    @error('country')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="state" class="form-label">State/Province</label>
                                    <select class="form-select @error('state') is-invalid @enderror"
                                            id="state" name="state">
                                        <option value="">Select State</option>
                                    </select>
                                    @error('state')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

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

                                <div class="col-md-6 mb-3">
                                    <label for="postal_code" class="form-label">Postal Code</label>
                                    <input type="text" class="form-control @error('postal_code') is-invalid @enderror"
                                           id="postal_code" name="postal_code" value="{{ old('postal_code') }}">
                                    @error('postal_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Notes -->
                        <div class="mb-4">
                            <h6 class="border-bottom pb-2 mb-3">Additional Information</h6>

                            <div class="mb-3">
                                <label for="notes" class="form-label">Internal Notes</label>
                                <textarea class="form-control @error('notes') is-invalid @enderror"
                                          id="notes" name="notes" rows="4"
                                          placeholder="Add any internal notes about this customer...">{{ old('notes') }}</textarea>
                                @error('notes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">These notes are for internal use only and will not be visible to the customer.</small>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between align-items-center pt-3 border-top">
                            <a href="{{ route('customers.index', $website) }}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle me-1"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-1"></i>Create Customer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Comprehensive Country-State Data
    const countryStateData = {
        'Malaysia': [
            'Johor', 'Kedah', 'Kelantan', 'Kuala Lumpur', 'Labuan', 'Malacca', 'Negeri Sembilan',
            'Pahang', 'Penang', 'Perak', 'Perlis', 'Putrajaya', 'Sabah', 'Sarawak', 'Selangor', 'Terengganu'
        ],
        'Singapore': ['Singapore'],
        'Thailand': [
            'Bangkok', 'Chiang Mai', 'Chiang Rai', 'Phuket', 'Krabi', 'Pattaya', 'Koh Samui',
            'Nonthaburi', 'Pak Kret', 'Hat Yai', 'Chon Buri', 'Nakhon Ratchasima', 'Udon Thani'
        ],
        'Indonesia': [
            'Bali', 'Jakarta', 'Java', 'Sumatra', 'Kalimantan', 'Sulawesi', 'Papua',
            'West Java', 'Central Java', 'East Java', 'Aceh', 'North Sumatra', 'West Sumatra',
            'Riau', 'Jambi', 'South Sumatra', 'Bengkulu', 'Lampung', 'Bangka Belitung',
            'Riau Islands', 'West Kalimantan', 'Central Kalimantan', 'South Kalimantan',
            'East Kalimantan', 'North Kalimantan', 'North Sulawesi', 'Central Sulawesi',
            'South Sulawesi', 'Southeast Sulawesi', 'Gorontalo', 'West Sulawesi',
            'Maluku', 'North Maluku', 'West Papua', 'Papua', 'Special Region of Yogyakarta'
        ],
        'Philippines': [
            'Metro Manila', 'Cebu', 'Davao', 'Ilocos Norte', 'Ilocos Sur', 'La Union', 'Pangasinan',
            'Batanes', 'Cagayan', 'Isabela', 'Nueva Vizcaya', 'Quirino', 'Bataan', 'Bulacan',
            'Nueva Ecija', 'Pampanga', 'Tarlac', 'Zambales', 'Aurora', 'Batangas', 'Cavite',
            'Laguna', 'Quezon', 'Rizal', 'Marinduque', 'Occidental Mindoro', 'Oriental Mindoro',
            'Palawan', 'Romblon', 'Albay', 'Camarines Norte', 'Camarines Sur', 'Catanduanes',
            'Masbate', 'Sorsogon', 'Aklan', 'Antique', 'Capiz', 'Guimaras', 'Iloilo', 'Negros Occidental'
        ],
        'Vietnam': [
            'Hanoi', 'Ho Chi Minh City', 'Da Nang', 'Can Tho', 'Hai Phong', 'Bien Hoa', 'Hue',
            'Nha Trang', 'Buon Ma Thuot', 'Phan Thiet', 'Cam Pha', 'Vinh', 'My Tho', 'Rach Gia',
            'Vung Tau', 'Long Xuyen', 'Thai Nguyen', 'Quy Nhon', 'Thai Binh', 'Nam Dinh'
        ],
        'United States': [
            'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut',
            'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa',
            'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan',
            'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
            'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio',
            'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota',
            'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia',
            'Wisconsin', 'Wyoming', 'District of Columbia'
        ],
        'United Kingdom': [
            'England', 'Scotland', 'Wales', 'Northern Ireland', 'London', 'Manchester', 'Birmingham',
            'Liverpool', 'Leeds', 'Glasgow', 'Edinburgh', 'Cardiff', 'Belfast', 'Bristol', 'Newcastle'
        ],
        'Australia': [
            'Australian Capital Territory', 'New South Wales', 'Northern Territory', 'Queensland',
            'South Australia', 'Tasmania', 'Victoria', 'Western Australia'
        ],
        'Canada': [
            'Alberta', 'British Columbia', 'Manitoba', 'New Brunswick', 'Newfoundland and Labrador',
            'Northwest Territories', 'Nova Scotia', 'Nunavut', 'Ontario', 'Prince Edward Island',
            'Quebec', 'Saskatchewan', 'Yukon'
        ],
        'India': [
            'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar', 'Chhattisgarh', 'Goa', 'Gujarat',
            'Haryana', 'Himachal Pradesh', 'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh',
            'Maharashtra', 'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab',
            'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura', 'Uttar Pradesh', 'Uttarakhand',
            'West Bengal', 'Delhi', 'Puducherry', 'Jammu and Kashmir', 'Ladakh'
        ],
        'China': [
            'Beijing', 'Shanghai', 'Guangdong', 'Zhejiang', 'Jiangsu', 'Shandong', 'Henan', 'Sichuan',
            'Hubei', 'Hunan', 'Anhui', 'Hebei', 'Jiangxi', 'Liaoning', 'Fujian', 'Shaanxi', 'Shanxi',
            'Yunnan', 'Guangxi', 'Guizhou', 'Heilongjiang', 'Jilin', 'Gansu', 'Inner Mongolia',
            'Ningxia', 'Xinjiang', 'Qinghai', 'Tibet', 'Chongqing', 'Tianjin', 'Hong Kong', 'Macau'
        ],
        'Japan': [
            'Hokkaido', 'Aomori', 'Iwate', 'Miyagi', 'Akita', 'Yamagata', 'Fukushima', 'Ibaraki',
            'Tochigi', 'Gunma', 'Saitama', 'Chiba', 'Tokyo', 'Kanagawa', 'Niigata', 'Toyama',
            'Ishikawa', 'Fukui', 'Yamanashi', 'Nagano', 'Gifu', 'Shizuoka', 'Aichi', 'Mie',
            'Shiga', 'Kyoto', 'Osaka', 'Hyogo', 'Nara', 'Wakayama', 'Tottori', 'Shimane',
            'Okayama', 'Hiroshima', 'Yamaguchi', 'Tokushima', 'Kagawa', 'Ehime', 'Kochi',
            'Fukuoka', 'Saga', 'Nagasaki', 'Kumamoto', 'Oita', 'Miyazaki', 'Kagoshima', 'Okinawa'
        ],
        'South Korea': [
            'Seoul', 'Busan', 'Daegu', 'Incheon', 'Gwangju', 'Daejeon', 'Ulsan', 'Sejong',
            'Gyeonggi', 'Gangwon', 'North Chungcheong', 'South Chungcheong', 'North Jeolla',
            'South Jeolla', 'North Gyeongsang', 'South Gyeongsang', 'Jeju'
        ],
        'New Zealand': [
            'Auckland', 'Wellington', 'Canterbury', 'Waikato', 'Bay of Plenty', 'Otago',
            'Northland', 'Manawatu-Wanganui', 'Hawke\'s Bay', 'Taranaki', 'Southland',
            'Nelson', 'Gisborne', 'Marlborough', 'Tasman', 'West Coast'
        ],
        'Germany': [
            'Baden-Württemberg', 'Bavaria', 'Berlin', 'Brandenburg', 'Bremen', 'Hamburg',
            'Hesse', 'Lower Saxony', 'Mecklenburg-Vorpommern', 'North Rhine-Westphalia',
            'Rhineland-Palatinate', 'Saarland', 'Saxony', 'Saxony-Anhalt', 'Schleswig-Holstein', 'Thuringia'
        ],
        'France': [
            'Île-de-France', 'Auvergne-Rhône-Alpes', 'Nouvelle-Aquitaine', 'Occitanie',
            'Hauts-de-France', 'Grand Est', 'Provence-Alpes-Côte d\'Azur', 'Pays de la Loire',
            'Brittany', 'Normandy', 'Bourgogne-Franche-Comté', 'Centre-Val de Loire', 'Corsica'
        ],
        'Italy': [
            'Abruzzo', 'Basilicata', 'Calabria', 'Campania', 'Emilia-Romagna', 'Friuli-Venezia Giulia',
            'Lazio', 'Liguria', 'Lombardy', 'Marche', 'Molise', 'Piedmont', 'Apulia', 'Sardinia',
            'Sicily', 'Tuscany', 'Trentino-Alto Adige', 'Umbria', 'Aosta Valley', 'Veneto'
        ],
        'Spain': [
            'Andalusia', 'Aragon', 'Asturias', 'Balearic Islands', 'Canary Islands', 'Cantabria',
            'Castile and León', 'Castilla-La Mancha', 'Catalonia', 'Extremadura', 'Galicia',
            'La Rioja', 'Madrid', 'Murcia', 'Navarre', 'Basque Country', 'Valencia'
        ],
        'Brazil': [
            'Acre', 'Alagoas', 'Amapá', 'Amazonas', 'Bahia', 'Ceará', 'Distrito Federal',
            'Espírito Santo', 'Goiás', 'Maranhão', 'Mato Grosso', 'Mato Grosso do Sul',
            'Minas Gerais', 'Pará', 'Paraíba', 'Paraná', 'Pernambuco', 'Piauí', 'Rio de Janeiro',
            'Rio Grande do Norte', 'Rio Grande do Sul', 'Rondônia', 'Roraima', 'Santa Catarina',
            'São Paulo', 'Sergipe', 'Tocantins'
        ],
        'Mexico': [
            'Aguascalientes', 'Baja California', 'Baja California Sur', 'Campeche', 'Chiapas',
            'Chihuahua', 'Coahuila', 'Colima', 'Durango', 'Guanajuato', 'Guerrero', 'Hidalgo',
            'Jalisco', 'Mexico City', 'Mexico State', 'Michoacán', 'Morelos', 'Nayarit',
            'Nuevo León', 'Oaxaca', 'Puebla', 'Querétaro', 'Quintana Roo', 'San Luis Potosí',
            'Sinaloa', 'Sonora', 'Tabasco', 'Tamaulipas', 'Tlaxcala', 'Veracruz', 'Yucatán', 'Zacatecas'
        ]
    };

    // Populate countries dropdown
    function populateCountries() {
        const countrySelect = document.getElementById('country');

        // Clear existing options except the first one
        countrySelect.innerHTML = '<option value="">Select Country</option>';

        // Add all countries
        Object.keys(countryStateData).sort().forEach(country => {
            const option = document.createElement('option');
            option.value = country;
            option.textContent = country;
            countrySelect.appendChild(option);
        });

        // Set Malaysia as default
        countrySelect.value = 'Malaysia';

        // Populate Malaysian states by default
        updateStates();
    }

    // Update states based on selected country
    function updateStates() {
        const country = document.getElementById('country').value;
        const stateSelect = document.getElementById('state');

        // Clear existing options
        stateSelect.innerHTML = '<option value="">Select State</option>';

        // Add states for selected country
        if (country && countryStateData[country]) {
            countryStateData[country].forEach(state => {
                const option = document.createElement('option');
                option.value = state;
                option.textContent = state;
                stateSelect.appendChild(option);
            });
        }
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        populateCountries();
    });
</script>
@endpush