@extends('layouts.admin')

@section('title', 'Add Delivery Man')

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900">Add Delivery Man</h1>
        </div>

        <div class="max-w-4xl">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-800">Delivery Man Info</h2>
                </div>

                <div class="p-6">
                    <form action="{{ route('admin.delivery.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                        @csrf

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">First Name <span class="text-red-500">*</span></label>
                                <input type="text" name="first_name" id="first_name" value="{{ old('first_name') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('first_name') border-red-500 @enderror" placeholder="Enter First Name" required>
                                @error('first_name')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">Last Name <span class="text-red-500">*</span></label>
                                <input type="text" name="last_name" id="last_name" value="{{ old('last_name') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('last_name') border-red-500 @enderror" placeholder="Enter Last Name" required>
                                @error('last_name')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-500">*</span></label>
                                <input type="email" name="email" id="email" value="{{ old('email') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('email') border-red-500 @enderror" placeholder="Enter Email Address" required>
                                @error('email')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                                <input type="tel" name="phone" id="phone" value="{{ old('phone') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('phone') border-red-500 @enderror" placeholder="Enter Phone Number">
                                @error('phone')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password <span class="text-red-500">*</span></label>
                                <div class="relative">
                                    <input type="password" name="password" id="password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('password') border-red-500 @enderror" placeholder="Password" required>
                                    <button type="button" onclick="togglePassword('password', this)" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                    </button>
                                </div>
                                @error('password')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password <span class="text-red-500">*</span></label>
                                <div class="relative">
                                    <input type="password" name="password_confirmation" id="password_confirmation" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('password_confirmation') border-red-500 @enderror" placeholder="Confirm Password" required>
                                    <button type="button" onclick="togglePassword('password_confirmation', this)" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                    </button>
                                </div>
                                @error('password_confirmation')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="flex flex-col items-center space-y-4">
                            <img id="img_profile" src="{{ asset('images/default-user.png') }}" alt="Profile" class="w-24 h-24 rounded-full object-cover border-2 border-gray-200" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke=%22%239CA3AF%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z%22/%3E%3C/svg%3E'">
                            <div class="w-full max-w-xs">
                                <label for="image" class="block text-sm font-medium text-gray-700 mb-1">Profile Image</label>
                                <input type="file" name="image" id="image" accept="image/*" onchange="previewImage(this, 'img_profile')" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent file:mr-4 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                                @error('image')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Country <span class="text-red-500">*</span></label>
                                <select name="country" id="country" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('country') border-red-500 @enderror">
                                    <option value="">Select Country</option>
                                    <option value="US" {{ old('country') == 'US' ? 'selected' : '' }}>United States</option>
                                    <option value="GB" {{ old('country') == 'GB' ? 'selected' : '' }}>United Kingdom</option>
                                    <option value="CA" {{ old('country') == 'CA' ? 'selected' : '' }}>Canada</option>
                                    <option value="AU" {{ old('country') == 'AU' ? 'selected' : '' }}>Australia</option>
                                    <option value="DE" {{ old('country') == 'DE' ? 'selected' : '' }}>Germany</option>
                                    <option value="FR" {{ old('country') == 'FR' ? 'selected' : '' }}>France</option>
                                    <option value="IN" {{ old('country') == 'IN' ? 'selected' : '' }}>India</option>
                                    <option value="CN" {{ old('country') == 'CN' ? 'selected' : '' }}>China</option>
                                    <option value="JP" {{ old('country') == 'JP' ? 'selected' : '' }}>Japan</option>
                                    <option value="BR" {{ old('country') == 'BR' ? 'selected' : '' }}>Brazil</option>
                                    <option value="MX" {{ old('country') == 'MX' ? 'selected' : '' }}>Mexico</option>
                                    <option value="PH" {{ old('country') == 'PH' ? 'selected' : '' }}>Philippines</option>
                                    <option value="TH" {{ old('country') == 'TH' ? 'selected' : '' }}>Thailand</option>
                                    <option value="VN" {{ old('country') == 'VN' ? 'selected' : '' }}>Vietnam</option>
                                    <option value="ID" {{ old('country') == 'ID' ? 'selected' : '' }}>Indonesia</option>
                                    <option value="MY" {{ old('country') == 'MY' ? 'selected' : '' }}>Malaysia</option>
                                    <option value="SG" {{ old('country') == 'SG' ? 'selected' : '' }}>Singapore</option>
                                    <option value="KR" {{ old('country') == 'KR' ? 'selected' : '' }}>South Korea</option>
                                    <option value="IT" {{ old('country') == 'IT' ? 'selected' : '' }}>Italy</option>
                                    <option value="ES" {{ old('country') == 'ES' ? 'selected' : '' }}>Spain</option>
                                    <option value="NL" {{ old('country') == 'NL' ? 'selected' : '' }}>Netherlands</option>
                                    <option value="SE" {{ old('country') == 'SE' ? 'selected' : '' }}>Sweden</option>
                                    <option value="NO" {{ old('country') == 'NO' ? 'selected' : '' }}>Norway</option>
                                    <option value="DK" {{ old('country') == 'DK' ? 'selected' : '' }}>Denmark</option>
                                    <option value="FI" {{ old('country') == 'FI' ? 'selected' : '' }}>Finland</option>
                                    <option value="CH" {{ old('country') == 'CH' ? 'selected' : '' }}>Switzerland</option>
                                    <option value="AT" {{ old('country') == 'AT' ? 'selected' : '' }}>Austria</option>
                                    <option value="BE" {{ old('country') == 'BE' ? 'selected' : '' }}>Belgium</option>
                                    <option value="IE" {{ old('country') == 'IE' ? 'selected' : '' }}>Ireland</option>
                                    <option value="NZ" {{ old('country') == 'NZ' ? 'selected' : '' }}>New Zealand</option>
                                    <option value="AE" {{ old('country') == 'AE' ? 'selected' : '' }}>United Arab Emirates</option>
                                    <option value="SA" {{ old('country') == 'SA' ? 'selected' : '' }}>Saudi Arabia</option>
                                    <option value="QA" {{ old('country') == 'QA' ? 'selected' : '' }}>Qatar</option>
                                    <option value="KW" {{ old('country') == 'KW' ? 'selected' : '' }}>Kuwait</option>
                                    <option value="BH" {{ old('country') == 'BH' ? 'selected' : '' }}>Bahrain</option>
                                    <option value="OM" {{ old('country') == 'OM' ? 'selected' : '' }}>Oman</option>
                                    <option value="PK" {{ old('country') == 'PK' ? 'selected' : '' }}>Pakistan</option>
                                    <option value="BD" {{ old('country') == 'BD' ? 'selected' : '' }}>Bangladesh</option>
                                    <option value="LK" {{ old('country') == 'LK' ? 'selected' : '' }}>Sri Lanka</option>
                                    <option value="NP" {{ old('country') == 'NP' ? 'selected' : '' }}>Nepal</option>
                                    <option value="MM" {{ old('country') == 'MM' ? 'selected' : '' }}>Myanmar</option>
                                    <option value="KH" {{ old('country') == 'KH' ? 'selected' : '' }}>Cambodia</option>
                                    <option value="LA" {{ old('country') == 'LA' ? 'selected' : '' }}>Laos</option>
                                    <option value="EG" {{ old('country') == 'EG' ? 'selected' : '' }}>Egypt</option>
                                    <option value="MA" {{ old('country') == 'MA' ? 'selected' : '' }}>Morocco</option>
                                    <option value="NG" {{ old('country') == 'NG' ? 'selected' : '' }}>Nigeria</option>
                                    <option value="ZA" {{ old('country') == 'ZA' ? 'selected' : '' }}>South Africa</option>
                                    <option value="KE" {{ old('country') == 'KE' ? 'selected' : '' }}>Kenya</option>
                                    <option value="TN" {{ old('country') == 'TN' ? 'selected' : '' }}>Tunisia</option>
                                    <option value="RU" {{ old('country') == 'RU' ? 'selected' : '' }}>Russia</option>
                                    <option value="UA" {{ old('country') == 'UA' ? 'selected' : '' }}>Ukraine</option>
                                    <option value="PL" {{ old('country') == 'PL' ? 'selected' : '' }}>Poland</option>
                                    <option value="CZ" {{ old('country') == 'CZ' ? 'selected' : '' }}>Czech Republic</option>
                                    <option value="RO" {{ old('country') == 'RO' ? 'selected' : '' }}>Romania</option>
                                    <option value="HU" {{ old('country') == 'HU' ? 'selected' : '' }}>Hungary</option>
                                    <option value="PT" {{ old('country') == 'PT' ? 'selected' : '' }}>Portugal</option>
                                    <option value="GR" {{ old('country') == 'GR' ? 'selected' : '' }}>Greece</option>
                                    <option value="TR" {{ old('country') == 'TR' ? 'selected' : '' }}>Turkey</option>
                                    <option value="IL" {{ old('country') == 'IL' ? 'selected' : '' }}>Israel</option>
                                    <option value="JO" {{ old('country') == 'JO' ? 'selected' : '' }}>Jordan</option>
                                    <option value="LB" {{ old('country') == 'LB' ? 'selected' : '' }}>Lebanon</option>
                                    <option value="IQ" {{ old('country') == 'IQ' ? 'selected' : '' }}>Iraq</option>
                                    <option value="IR" {{ old('country') == 'IR' ? 'selected' : '' }}>Iran</option>
                                    <option value="AF" {{ old('country') == 'AF' ? 'selected' : '' }}>Afghanistan</option>
                                    <option value="UZ" {{ old('country') == 'UZ' ? 'selected' : '' }}>Uzbekistan</option>
                                    <option value="KZ" {{ old('country') == 'KZ' ? 'selected' : '' }}>Kazakhstan</option>
                                    <option value="GE" {{ old('country') == 'GE' ? 'selected' : '' }}>Georgia</option>
                                    <option value="AM" {{ old('country') == 'AM' ? 'selected' : '' }}>Armenia</option>
                                    <option value="AZ" {{ old('country') == 'AZ' ? 'selected' : '' }}>Azerbaijan</option>
                                    <option value="CL" {{ old('country') == 'CL' ? 'selected' : '' }}>Chile</option>
                                    <option value="AR" {{ old('country') == 'AR' ? 'selected' : '' }}>Argentina</option>
                                    <option value="CO" {{ old('country') == 'CO' ? 'selected' : '' }}>Colombia</option>
                                    <option value="PE" {{ old('country') == 'PE' ? 'selected' : '' }}>Peru</option>
                                    <option value="VE" {{ old('country') == 'VE' ? 'selected' : '' }}>Venezuela</option>
                                    <option value="EC" {{ old('country') == 'EC' ? 'selected' : '' }}>Ecuador</option>
                                    <option value="UY" {{ old('country') == 'UY' ? 'selected' : '' }}>Uruguay</option>
                                    <option value="PY" {{ old('country') == 'PY' ? 'selected' : '' }}>Paraguay</option>
                                    <option value="BO" {{ old('country') == 'BO' ? 'selected' : '' }}>Bolivia</option>
                                    <option value="CR" {{ old('country') == 'CR' ? 'selected' : '' }}>Costa Rica</option>
                                    <option value="PA" {{ old('country') == 'PA' ? 'selected' : '' }}>Panama</option>
                                    <option value="GT" {{ old('country') == 'GT' ? 'selected' : '' }}>Guatemala</option>
                                    <option value="HN" {{ old('country') == 'HN' ? 'selected' : '' }}>Honduras</option>
                                    <option value="SV" {{ old('country') == 'SV' ? 'selected' : '' }}>El Salvador</option>
                                    <option value="NI" {{ old('country') == 'NI' ? 'selected' : '' }}>Nicaragua</option>
                                    <option value="CU" {{ old('country') == 'CU' ? 'selected' : '' }}>Cuba</option>
                                    <option value="DO" {{ old('country') == 'DO' ? 'selected' : '' }}>Dominican Republic</option>
                                    <option value="JM" {{ old('country') == 'JM' ? 'selected' : '' }}>Jamaica</option>
                                    <option value="TT" {{ old('country') == 'TT' ? 'selected' : '' }}>Trinidad and Tobago</option>
                                    <option value="GH" {{ old('country') == 'GH' ? 'selected' : '' }}>Ghana</option>
                                    <option value="CM" {{ old('country') == 'CM' ? 'selected' : '' }}>Cameroon</option>
                                    <option value="SN" {{ old('country') == 'SN' ? 'selected' : '' }}>Senegal</option>
                                    <option value="CI" {{ old('country') == 'CI' ? 'selected' : '' }}>Ivory Coast</option>
                                    <option value="BF" {{ old('country') == 'BF' ? 'selected' : '' }}>Burkina Faso</option>
                                    <option value="ML" {{ old('country') == 'ML' ? 'selected' : '' }}>Mali</option>
                                    <option value="NE" {{ old('country') == 'NE' ? 'selected' : '' }}>Niger</option>
                                    <option value="TD" {{ old('country') == 'TD' ? 'selected' : '' }}>Chad</option>
                                    <option value="SD" {{ old('country') == 'SD' ? 'selected' : '' }}>Sudan</option>
                                    <option value="ET" {{ old('country') == 'ET' ? 'selected' : '' }}>Ethiopia</option>
                                    <option value="UG" {{ old('country') == 'UG' ? 'selected' : '' }}>Uganda</option>
                                    <option value="TZ" {{ old('country') == 'TZ' ? 'selected' : '' }}>Tanzania</option>
                                    <option value="MZ" {{ old('country') == 'MZ' ? 'selected' : '' }}>Mozambique</option>
                                    <option value="ZW" {{ old('country') == 'ZW' ? 'selected' : '' }}>Zimbabwe</option>
                                    <option value="BW" {{ old('country') == 'BW' ? 'selected' : '' }}>Botswana</option>
                                    <option value="NA" {{ old('country') == 'NA' ? 'selected' : '' }}>Namibia</option>
                                    <option value="ZM" {{ old('country') == 'ZM' ? 'selected' : '' }}>Zambia</option>
                                    <option value="MW" {{ old('country') == 'MW' ? 'selected' : '' }}>Malawi</option>
                                    <option value="MG" {{ old('country') == 'MG' ? 'selected' : '' }}>Madagascar</option>
                                    <option value="MU" {{ old('country') == 'MU' ? 'selected' : '' }}>Mauritius</option>
                                    <option value="SC" {{ old('country') == 'SC' ? 'selected' : '' }}>Seychelles</option>
                                    <option value="RE" {{ old('country') == 'RE' ? 'selected' : '' }}>Reunion</option>
                                    <option value="YT" {{ old('country') == 'YT' ? 'selected' : '' }}>Mayotte</option>
                                    <option value="DJ" {{ old('country') == 'DJ' ? 'selected' : '' }}>Djibouti</option>
                                    <option value="SO" {{ old('country') == 'SO' ? 'selected' : '' }}>Somalia</option>
                                    <option value="ER" {{ old('country') == 'ER' ? 'selected' : '' }}>Eritrea</option>
                                    <option value="SS" {{ old('country') == 'SS' ? 'selected' : '' }}>South Sudan</option>
                                    <option value="CF" {{ old('country') == 'CF' ? 'selected' : '' }}>Central African Republic</option>
                                    <option value="GQ" {{ old('country') == 'GQ' ? 'selected' : '' }}>Equatorial Guinea</option>
                                    <option value="GA" {{ old('country') == 'GA' ? 'selected' : '' }}>Gabon</option>
                                    <option value="CG" {{ old('country') == 'CG' ? 'selected' : '' }}>Congo</option>
                                    <option value="CD" {{ old('country') == 'CD' ? 'selected' : '' }}>DR Congo</option>
                                    <option value="AO" {{ old('country') == 'AO' ? 'selected' : '' }}>Angola</option>
                                    <option value="GW" {{ old('country') == 'GW' ? 'selected' : '' }}>Guinea-Bissau</option>
                                    <option value="GN" {{ old('country') == 'GN' ? 'selected' : '' }}>Guinea</option>
                                    <option value="SL" {{ old('country') == 'SL' ? 'selected' : '' }}>Sierra Leone</option>
                                    <option value="LR" {{ old('country') == 'LR' ? 'selected' : '' }}>Liberia</option>
                                    <option value="TG" {{ old('country') == 'TG' ? 'selected' : '' }}>Togo</option>
                                    <option value="BJ" {{ old('country') == 'BJ' ? 'selected' : '' }}>Benin</option>
                                    <option value="MR" {{ old('country') == 'MR' ? 'selected' : '' }}>Mauritania</option>
                                    <option value="EH" {{ old('country') == 'EH' ? 'selected' : '' }}>Western Sahara</option>
                                    <option value="LY" {{ old('country') == 'LY' ? 'selected' : '' }}>Libya</option>
                                    <option value="DZ" {{ old('country') == 'DZ' ? 'selected' : '' }}>Algeria</option>
                                    <option value="SY" {{ old('country') == 'SY' ? 'selected' : '' }}>Syria</option>
                                    <option value="PS" {{ old('country') == 'PS' ? 'selected' : '' }}>Palestine</option>
                                    <option value="YE" {{ old('country') == 'YE' ? 'selected' : '' }}>Yemen</option>
                                    <option value="CY" {{ old('country') == 'CY' ? 'selected' : '' }}>Cyprus</option>
                                    <option value="MT" {{ old('country') == 'MT' ? 'selected' : '' }}>Malta</option>
                                    <option value="IS" {{ old('country') == 'IS' ? 'selected' : '' }}>Iceland</option>
                                    <option value="FO" {{ old('country') == 'FO' ? 'selected' : '' }}>Faroe Islands</option>
                                    <option value="GL" {{ old('country') == 'GL' ? 'selected' : '' }}>Greenland</option>
                                    <option value="PM" {{ old('country') == 'PM' ? 'selected' : '' }}>Saint Pierre and Miquelon</option>
                                    <option value="SX" {{ old('country') == 'SX' ? 'selected' : '' }}>Sint Maarten</option>
                                    <option value="AW" {{ old('country') == 'AW' ? 'selected' : '' }}>Aruba</option>
                                    <option value="CW" {{ old('country') == 'CW' ? 'selected' : '' }}>Curacao</option>
                                    <option value="BQ" {{ old('country') == 'BQ' ? 'selected' : '' }}>Bonaire</option>
                                    <option value="MF" {{ old('country') == 'MF' ? 'selected' : '' }}>Saint Martin</option>
                                    <option value="BL" {{ old('country') == 'BL' ? 'selected' : '' }}>Saint Barthelemy</option>
                                    <option value="GP" {{ old('country') == 'GP' ? 'selected' : '' }}>Guadeloupe</option>
                                    <option value="MQ" {{ old('country') == 'MQ' ? 'selected' : '' }}>Martinique</option>
                                    <option value="GF" {{ old('country') == 'GF' ? 'selected' : '' }}>French Guiana</option>
                                    <option value="SR" {{ old('country') == 'SR' ? 'selected' : '' }}>Suriname</option>
                                    <option value="GY" {{ old('country') == 'GY' ? 'selected' : '' }}>Guyana</option>
                                    <option value="FK" {{ old('country') == 'FK' ? 'selected' : '' }}>Falkland Islands</option>
                                    <option value="GS" {{ old('country') == 'GS' ? 'selected' : '' }}>South Georgia</option>
                                    <option value="BV" {{ old('country') == 'BV' ? 'selected' : '' }}>Bouvet Island</option>
                                    <option value="HM" {{ old('country') == 'HM' ? 'selected' : '' }}>Heard Island</option>
                                    <option value="TF" {{ old('country') == 'TF' ? 'selected' : '' }}>French Southern Territories</option>
                                    <option value="AQ" {{ old('country') == 'AQ' ? 'selected' : '' }}>Antarctica</option>
                                    <option value="CC" {{ old('country') == 'CC' ? 'selected' : '' }}>Cocos Islands</option>
                                    <option value="CX" {{ old('country') == 'CX' ? 'selected' : '' }}>Christmas Island</option>
                                    <option value="NF" {{ old('country') == 'NF' ? 'selected' : '' }}>Norfolk Island</option>
                                    <option value="NR" {{ old('country') == 'NR' ? 'selected' : '' }}>Nauru</option>
                                    <option value="KI" {{ old('country') == 'KI' ? 'selected' : '' }}>Kiribati</option>
                                    <option value="TV" {{ old('country') == 'TV' ? 'selected' : '' }}>Tuvalu</option>
                                    <option value="WF" {{ old('country') == 'WF' ? 'selected' : '' }}>Wallis and Futuna</option>
                                    <option value="AS" {{ old('country') == 'AS' ? 'selected' : '' }}>American Samoa</option>
                                    <option value="GU" {{ old('country') == 'GU' ? 'selected' : '' }}>Guam</option>
                                    <option value="MP" {{ old('country') == 'MP' ? 'selected' : '' }}>Northern Mariana Islands</option>
                                    <option value="PW" {{ old('country') == 'PW' ? 'selected' : '' }}>Palau</option>
                                    <option value="FM" {{ old('country') == 'FM' ? 'selected' : '' }}>Micronesia</option>
                                    <option value="MH" {{ old('country') == 'MH' ? 'selected' : '' }}>Marshall Islands</option>
                                    <option value="CK" {{ old('country') == 'CK' ? 'selected' : '' }}>Cook Islands</option>
                                    <option value="NU" {{ old('country') == 'NU' ? 'selected' : '' }}>Niue</option>
                                    <option value="TK" {{ old('country') == 'TK' ? 'selected' : '' }}>Tokelau</option>
                                    <option value="TO" {{ old('country') == 'TO' ? 'selected' : '' }}>Tonga</option>
                                    <option value="WS" {{ old('country') == 'WS' ? 'selected' : '' }}>Samoa</option>
                                    <option value="FJ" {{ old('country') == 'FJ' ? 'selected' : '' }}>Fiji</option>
                                    <option value="SB" {{ old('country') == 'SB' ? 'selected' : '' }}>Solomon Islands</option>
                                    <option value="VU" {{ old('country') == 'VU' ? 'selected' : '' }}>Vanuatu</option>
                                    <option value="NC" {{ old('country') == 'NC' ? 'selected' : '' }}>New Caledonia</option>
                                    <option value="PG" {{ old('country') == 'PG' ? 'selected' : '' }}>Papua New Guinea</option>
                                    <option value="TL" {{ old('country') == 'TL' ? 'selected' : '' }}>Timor-Leste</option>
                                    <option value="BN" {{ old('country') == 'BN' ? 'selected' : '' }}>Brunei</option>
                                    <option value="MN" {{ old('country') == 'MN' ? 'selected' : '' }}>Mongolia</option>
                                    <option value="KP" {{ old('country') == 'KP' ? 'selected' : '' }}>North Korea</option>
                                    <option value="TJ" {{ old('country') == 'TJ' ? 'selected' : '' }}>Tajikistan</option>
                                    <option value="KG" {{ old('country') == 'KG' ? 'selected' : '' }}>Kyrgyzstan</option>
                                    <option value="TM" {{ old('country') == 'TM' ? 'selected' : '' }}>Turkmenistan</option>
                                    <option value="BT" {{ old('country') == 'BT' ? 'selected' : '' }}>Bhutan</option>
                                    <option value="MV" {{ old('country') == 'MV' ? 'selected' : '' }}>Maldives</option>
                                    <option value="IO" {{ old('country') == 'IO' ? 'selected' : '' }}>British Indian Ocean Territory</option>
                                    <option value="PN" {{ old('country') == 'PN' ? 'selected' : '' }}>Pitcairn Islands</option>
                                    <option value="SH" {{ old('country') == 'SH' ? 'selected' : '' }}>Saint Helena</option>
                                    <option value="AI" {{ old('country') == 'AI' ? 'selected' : '' }}>Anguilla</option>
                                    <option value="BM" {{ old('country') == 'BM' ? 'selected' : '' }}>Bermuda</option>
                                    <option value="VG" {{ old('country') == 'VG' ? 'selected' : '' }}>British Virgin Islands</option>
                                    <option value="KY" {{ old('country') == 'KY' ? 'selected' : '' }}>Cayman Islands</option>
                                    <option value="MS" {{ old('country') == 'MS' ? 'selected' : '' }}>Montserrat</option>
                                    <option value="TC" {{ old('country') == 'TC' ? 'selected' : '' }}>Turks and Caicos Islands</option>
                                    <option value="VI" {{ old('country') == 'VI' ? 'selected' : '' }}>US Virgin Islands</option>
                                    <option value="PR" {{ old('country') == 'PR' ? 'selected' : '' }}>Puerto Rico</option>
                                    <option value="BB" {{ old('country') == 'BB' ? 'selected' : '' }}>Barbados</option>
                                    <option value="LC" {{ old('country') == 'LC' ? 'selected' : '' }}>Saint Lucia</option>
                                    <option value="VC" {{ old('country') == 'VC' ? 'selected' : '' }}>Saint Vincent and the Grenadines</option>
                                    <option value="GD" {{ old('country') == 'GD' ? 'selected' : '' }}>Grenada</option>
                                    <option value="AG" {{ old('country') == 'AG' ? 'selected' : '' }}>Antigua and Barbuda</option>
                                    <option value="DM" {{ old('country') == 'DM' ? 'selected' : '' }}>Dominica</option>
                                    <option value="KN" {{ old('country') == 'KN' ? 'selected' : '' }}>Saint Kitts and Nevis</option>
                                    <option value="BS" {{ old('country') == 'BS' ? 'selected' : '' }}>Bahamas</option>
                                    <option value="BZ" {{ old('country') == 'BZ' ? 'selected' : '' }}>Belize</option>
                                    <option value="HT" {{ old('country') == 'HT' ? 'selected' : '' }}>Haiti</option>
                                    <option value="GG" {{ old('country') == 'GG' ? 'selected' : '' }}>Guernsey</option>
                                    <option value="JE" {{ old('country') == 'JE' ? 'selected' : '' }}>Jersey</option>
                                    <option value="IM" {{ old('country') == 'IM' ? 'selected' : '' }}>Isle of Man</option>
                                    <option value="GI" {{ old('country') == 'GI' ? 'selected' : '' }}>Gibraltar</option>
                                    <option value="AD" {{ old('country') == 'AD' ? 'selected' : '' }}>Andorra</option>
                                    <option value="MC" {{ old('country') == 'MC' ? 'selected' : '' }}>Monaco</option>
                                    <option value="LI" {{ old('country') == 'LI' ? 'selected' : '' }}>Liechtenstein</option>
                                    <option value="SM" {{ old('country') == 'SM' ? 'selected' : '' }}>San Marino</option>
                                    <option value="VA" {{ old('country') == 'VA' ? 'selected' : '' }}>Vatican City</option>
                                    <option value="SK" {{ old('country') == 'SK' ? 'selected' : '' }}>Slovakia</option>
                                    <option value="SI" {{ old('country') == 'SI' ? 'selected' : '' }}>Slovenia</option>
                                    <option value="HR" {{ old('country') == 'HR' ? 'selected' : '' }}>Croatia</option>
                                    <option value="BA" {{ old('country') == 'BA' ? 'selected' : '' }}>Bosnia and Herzegovina</option>
                                    <option value="RS" {{ old('country') == 'RS' ? 'selected' : '' }}>Serbia</option>
                                    <option value="ME" {{ old('country') == 'ME' ? 'selected' : '' }}>Montenegro</option>
                                    <option value="MK" {{ old('country') == 'MK' ? 'selected' : '' }}>North Macedonia</option>
                                    <option value="AL" {{ old('country') == 'AL' ? 'selected' : '' }}>Albania</option>
                                    <option value="XK" {{ old('country') == 'XK' ? 'selected' : '' }}>Kosovo</option>
                                    <option value="BG" {{ old('country') == 'BG' ? 'selected' : '' }}>Bulgaria</option>
                                    <option value="MD" {{ old('country') == 'MD' ? 'selected' : '' }}>Moldova</option>
                                    <option value="BY" {{ old('country') == 'BY' ? 'selected' : '' }}>Belarus</option>
                                    <option value="LT" {{ old('country') == 'LT' ? 'selected' : '' }}>Lithuania</option>
                                    <option value="LV" {{ old('country') == 'LV' ? 'selected' : '' }}>Latvia</option>
                                    <option value="EE" {{ old('country') == 'EE' ? 'selected' : '' }}>Estonia</option>
                                    <option value="LU" {{ old('country') == 'LU' ? 'selected' : '' }}>Luxembourg</option>
                                    <option value="RS" {{ old('country') == 'RS' ? 'selected' : '' }}>Serbia</option>
                                </select>
                                @error('country')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="state" class="block text-sm font-medium text-gray-700 mb-1">State</label>
                                <input type="text" name="state" id="state" value="{{ old('state') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('state') border-red-500 @enderror" placeholder="Enter State">
                                @error('state')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City</label>
                                <input type="text" name="city" id="city" value="{{ old('city') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('city') border-red-500 @enderror" placeholder="Enter City">
                                @error('city')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                            <textarea name="address" id="address" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('address') border-red-500 @enderror" placeholder="Enter Full Address">{{ old('address') }}</textarea>
                            @error('address')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="salary" class="block text-sm font-medium text-gray-700 mb-1">Salary</label>
                                <input type="number" step="0.01" name="salary" id="salary" value="{{ old('salary') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('salary') border-red-500 @enderror" placeholder="Enter Salary Amount">
                                @error('salary')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="commission_per_delivery" class="block text-sm font-medium text-gray-700 mb-1">Commission Per Delivery</label>
                                <input type="number" step="0.01" name="commission_per_delivery" id="commission_per_delivery" value="{{ old('commission_per_delivery') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('commission_per_delivery') border-red-500 @enderror" placeholder="Enter Commission">
                                @error('commission_per_delivery')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="pickup_hub_id" class="block text-sm font-medium text-gray-700 mb-1">Pickup Hub</label>
                                <select name="pickup_hub_id" id="pickup_hub_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('pickup_hub_id') border-red-500 @enderror">
                                    <option value="">Select Pickup Hub</option>
                                    @foreach($pickupHubs as $hub)
                                        <option value="{{ $hub->id }}" {{ old('pickup_hub_id') == $hub->id ? 'selected' : '' }}>{{ $hub->name }}</option>
                                    @endforeach
                                </select>
                                @error('pickup_hub_id')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="driving_licence" class="block text-sm font-medium text-gray-700 mb-1">Driving Licence</label>
                                <input type="text" name="driving_licence" id="driving_licence" value="{{ old('driving_licence') }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('driving_licence') border-red-500 @enderror" placeholder="Enter Driving Licence Number">
                                @error('driving_licence')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label for="driving_licence_image" class="block text-sm font-medium text-gray-700 mb-1">Licence Image</label>
                            <input type="file" name="driving_licence_image" id="driving_licence_image" accept="image/*" onchange="previewImage(this, 'img_licence')" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent file:mr-4 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                            @error('driving_licence_image')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                            <div class="mt-2">
                                <img id="img_licence" src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke=%22%239CA3AF%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.41a2.25 2.25 0 013.182 0l2.909 2.91m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z%22/%3E%3C/svg%3E" alt="Licence Preview" class="w-24 h-24 rounded-lg object-cover border border-gray-200">
                            </div>
                        </div>

                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                            <select name="status" id="status" class="w-full max-w-xs px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('status') border-red-500 @enderror">
                                <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                            @error('status')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="flex justify-end pt-4 border-t border-gray-200">
                            <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-500/20 transition-colors">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function togglePassword(inputId, btn) {
    const input = document.getElementById(inputId);
    const icon = btn.querySelector('svg');
    if (input.type === 'password') {
        input.type = 'text';
        icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>';
    } else {
        input.type = 'password';
        icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
    }
}

function previewImage(input, imgId) {
    const img = document.getElementById(imgId);
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            img.src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection