<form action="{{ route('appointments') }}" method="POST" class="appointment-form">
    @csrf
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <input class="form-control name-field" name="name" placeholder="Name" type="text">
                @error('name', 'appointments')
                    <div class="error text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group position-relative">
                <input class="form-control email-field" name="email" placeholder="Email" type="email">
                @error('email', 'appointments')
                    <div class="error text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>

        @php
            $countryCodes = DB::table('codes')->orderByRaw("CASE WHEN code = '+1' THEN 0 ELSE 1 END")->get();
        @endphp

        <div class="col-lg-6">
            <div class="form-group form_spacing_main">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <select class="form-control country-code main_optional_domain" name="country_code">
                            @foreach ($countryCodes as $code)
                                <option value="{{ $code->code }}">{{ $code->code }}</option>
                            @endforeach
                        </select>
                    </div>
                    <input class="form-control number-field" name="number" placeholder="Enter Number" type="text">
                </div>
            </div>
            <div class="number-status" style="font-size: 13px;"></div>
        </div>

        <div class="col-lg-6">
            <div class="form-group">
                <input class="form-control subject-field" name="subject" placeholder="Enter Subject" type="text">
                @error('subject', 'appointments')
                    <div class="error text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <select class="form-control dept-field" name="dept">
                    <option value="">Select Services</option>
                    <option value="virus_malware_removal">Virus & Malware Removal</option>
                    <option value="computer_tune_ups">Computer Tune-Ups</option>
                    <option value="email_services">Email Services</option>
                    <option value="wi-fi_connectivity">WiFi Connectivity</option>
                    <option value="data_backup_services">Data Backup Services</option>
                    <option value="program_errors_crashes">Program Errors & Crashes</option>
                    <option value="microsoft_windows">Microsoft Windows</option>
                    <option value="smartphones_tablets">Smartphones & Tablets</option>
                    <option value="apple_mac_os">Apple Mac OS</option>
                    <option value="printers_multifunctions">Printers & Multifunctions</option>
                    <option value="training_guidance">Training & Guidance</option>
                    <option value="software_applications">Software Applications</option>
                    <option value="antivirus_security_software">Antivirus & Security Software</option>
                    <option value="home_networking">Home Networking</option>
                    <option value="internet_connectivity">Internet Connectivity</option>
                </select>
                @error('dept', 'appointments')
                    <div class="error text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-lg-6">
            <div class="form-group">
                <select class="form-control service-field" name="service">
                    <option value="">IT Services</option>
                    <option value="web_development">Web Development</option>
                    <option value="app_development">App Development</option>
                    <option value="web_agency">Web Agency</option>
                    <option value="digital_marketing">Digital Marketing</option>
                    <option value="ui_ux_design">UI/UX Design</option>
                </select>
                @error('service', 'appointments')
                    <div class="error text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-lg-12 otp-field-wrapper mt-3" style="display: none;">
            <div class="form-group">
                <input class="form-control otp-field" name="otp" placeholder="Enter OTP" type="text">
                @if (session('otp_error'))
                    <div class="error text-danger">{{ session('otp_error') }}</div>
                @endif
            </div>
        </div>
        <div class="otp-status" style="font-size: 13px;"></div>

        <div class="col-lg-12">
            <button type="submit" class="btn btn-theme effect btn-sm btn-standard button_effect submit-btn">
                Submit Query
            </button>
        </div>
    </div>
</form>