@extends('layouts.admin')
@section('title', 'Add Customer')
@section('page-title', 'Add Customer')
@section('content')
<div class="max-w-3xl">
    <form action="{{ route('customers.store') }}" method="POST" class="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        @csrf
        <div class="grid gap-6 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="full_name" class="block text-sm font-medium text-slate-700">Full name *</label>
                <input type="text" name="full_name" id="full_name" value="{{ old('full_name') }}" required class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                @error('full_name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="mobile" class="block text-sm font-medium text-slate-700">Mobile</label>
                <input type="text" name="mobile" id="mobile" value="{{ old('mobile') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
            </div>
            <div>
                <label for="alternate_mobile" class="block text-sm font-medium text-slate-700">Alternate mobile</label>
                <input type="text" name="alternate_mobile" id="alternate_mobile" value="{{ old('alternate_mobile') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
            </div>
            <div>
                <label for="whatsapp_number" class="block text-sm font-medium text-slate-700">WhatsApp number</label>
                <input type="text" name="whatsapp_number" id="whatsapp_number" value="{{ old('whatsapp_number') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-slate-700">Email</label>
                <input type="email" name="email" id="email" value="{{ old('email') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
            </div>
            <div>
                <label for="gender" class="block text-sm font-medium text-slate-700">Gender</label>
                <select name="gender" id="gender" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                    <option value="">Select</option>
                    <option value="male" {{ old('gender') === 'male' ? 'selected' : '' }}>Male</option>
                    <option value="female" {{ old('gender') === 'female' ? 'selected' : '' }}>Female</option>
                    <option value="other" {{ old('gender') === 'other' ? 'selected' : '' }}>Other</option>
                </select>
            </div>
            <div>
                <label for="date_of_birth" class="block text-sm font-medium text-slate-700">Date of birth</label>
                <input type="date" name="date_of_birth" id="date_of_birth" value="{{ old('date_of_birth') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
            </div>
            <div>
                <label for="anniversary_date" class="block text-sm font-medium text-slate-700">Anniversary date</label>
                <input type="date" name="anniversary_date" id="anniversary_date" value="{{ old('anniversary_date') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
            </div>
            <div class="sm:col-span-2">
                <label for="address" class="block text-sm font-medium text-slate-700">Address</label>
                <textarea name="address" id="address" rows="2" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">{{ old('address') }}</textarea>
            </div>
            <div>
                <label for="city" class="block text-sm font-medium text-slate-700">City</label>
                <input type="text" name="city" id="city" value="{{ old('city') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
            </div>
            <div>
                <label for="area" class="block text-sm font-medium text-slate-700">Area</label>
                <input type="text" name="area" id="area" value="{{ old('area') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
            </div>
            <div>
                <label for="preferred_branch_id" class="block text-sm font-medium text-slate-700">Preferred branch</label>
                <select name="preferred_branch_id" id="preferred_branch_id" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                    <option value="">None</option>
                    @foreach($branches as $b)<option value="{{ $b->id }}" {{ old('preferred_branch_id') == $b->id ? 'selected' : '' }}>{{ $b->name }}</option>@endforeach
                </select>
            </div>
            <div>
                <label for="preferred_communication_method" class="block text-sm font-medium text-slate-700">Preferred communication</label>
                <select name="preferred_communication_method" id="preferred_communication_method" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                    <option value="">None</option>
                    <option value="phone" {{ old('preferred_communication_method') === 'phone' ? 'selected' : '' }}>Phone</option>
                    <option value="whatsapp" {{ old('preferred_communication_method') === 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                    <option value="email" {{ old('preferred_communication_method') === 'email' ? 'selected' : '' }}>Email</option>
                    <option value="sms" {{ old('preferred_communication_method') === 'sms' ? 'selected' : '' }}>SMS</option>
                </select>
            </div>
            <div>
                <label for="status" class="block text-sm font-medium text-slate-700">Status</label>
                <select name="status" id="status" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>
            <div class="sm:col-span-2">
                <label for="notes" class="block text-sm font-medium text-slate-700">Notes</label>
                <textarea name="notes" id="notes" rows="2" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">{{ old('notes') }}</textarea>
            </div>
            <div class="sm:col-span-2">
                <label for="remarks" class="block text-sm font-medium text-slate-700">Remarks</label>
                <textarea name="remarks" id="remarks" rows="2" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">{{ old('remarks') }}</textarea>
            </div>
        </div>
        <div class="flex gap-3">
            <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Create Customer</button>
            <a href="{{ route('customers.index') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
        </div>
    </form>
</div>
@endsection