@extends('layouts.app')
@section('title', 'New Contact')
@section('breadcrumb')<a href="{{ route('contacts.index') }}" class="hover:text-white">Contacts</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i> <span class="text-white">New Contact</span>@endsection

@section('content')
<div class="max-w-2xl">
    <form method="POST" action="{{ route('contacts.store') }}" class="space-y-6">
        @csrf
        <div class="card p-5">
            <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-user text-blue-400"></i> Contact Details</h3>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label>Contact Type *</label>
                    <select name="type" class="input" required>
                        <option value="client">Client</option>
                        <option value="supplier">Supplier</option>
                        <option value="trade">Trade</option>
                        <option value="installer">Installer</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div>
                    <label>Title</label>
                    <select name="title" class="input">
                        <option value="">No title</option>
                        <option value="Mr">Mr</option>
                        <option value="Mrs">Mrs</option>
                        <option value="Ms">Ms</option>
                        <option value="Dr">Dr</option>
                    </select>
                </div>
                <div>
                    <label>First Name *</label>
                    <input type="text" name="first_name" value="{{ old('first_name') }}" class="input" required>
                </div>
                <div>
                    <label>Last Name *</label>
                    <input type="text" name="last_name" value="{{ old('last_name') }}" class="input" required>
                </div>
                <div>
                    <label>Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="input">
                </div>
                <div>
                    <label>Phone</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" class="input">
                </div>
                <div>
                    <label>Mobile</label>
                    <input type="text" name="mobile" value="{{ old('mobile') }}" class="input">
                </div>
                <div>
                    <label>Company</label>
                    <input type="text" name="company" value="{{ old('company') }}" class="input">
                </div>
            </div>
        </div>
        <div class="card p-5">
            <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-map-marker-alt text-blue-400"></i> Address</h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="col-span-2">
                    <label>Street Address</label>
                    <input type="text" name="address" value="{{ old('address') }}" class="input">
                </div>
                <div>
                    <label>Suburb</label>
                    <input type="text" name="suburb" value="{{ old('suburb') }}" class="input">
                </div>
                <div>
                    <label>State</label>
                    <select name="state" class="input">
                        <option value="">Select</option>
                        @foreach(['NSW','VIC','QLD','WA','SA','TAS','ACT','NT'] as $state)
                        <option value="{{ $state }}">{{ $state }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Postcode</label>
                    <input type="text" name="postcode" value="{{ old('postcode') }}" class="input">
                </div>
            </div>
        </div>
        <div class="card p-5">
            <label>Notes</label>
            <textarea name="notes" rows="4" class="input mt-1">{{ old('notes') }}</textarea>
        </div>
        <div class="flex gap-3">
            <button type="submit" class="btn btn-primary flex-1 justify-center"><i class="fas fa-save"></i> Save Contact</button>
            <a href="{{ route('contacts.index') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection