@extends('layouts.app')

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

@section('content')
<div class="mb-6 flex justify-between items-center">
    <h1 class="text-3xl font-bold text-gray-900">Add New Contact</h1>
    <a href="{{ route('admin.contacts.index') }}" class="text-indigo-600 hover:text-indigo-900">← Back to Contacts</a>
</div>

<div class="bg-white shadow rounded-lg p-6">
    <form method="POST" action="{{ route('admin.contacts.store') }}">
        @csrf

        <div class="mb-4">
            <label for="phone_number" class="block text-sm font-medium text-gray-700 mb-2">
                Phone Number <span class="text-red-500">*</span>
            </label>
            <input 
                type="text" 
                id="phone_number" 
                name="phone_number" 
                value="{{ old('phone_number') }}"
                required
                placeholder="+1234567890"
                class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('phone_number') border-red-500 @enderror"
            >
            @error('phone_number')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
            <p class="mt-1 text-sm text-gray-500">Include country code (e.g., +1234567890)</p>
        </div>

        <div class="mb-4">
            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                Name (Optional)
            </label>
            <input 
                type="text" 
                id="name" 
                name="name" 
                value="{{ old('name') }}"
                placeholder="John Doe"
                class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('name') border-red-500 @enderror"
            >
            @error('name')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="flex justify-end space-x-3">
            <a href="{{ route('admin.contacts.index') }}" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Cancel
            </a>
            <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Create Contact
            </button>
        </div>
    </form>
</div>
@endsection