@extends('crm.layouts.app')

@section('title', 'Add Insurance Policy')

@section('content')
<div class="mb-6">
    <div class="flex items-center gap-x-3">
        <a href="{{ route('crm.insurance.policies') }}" class="text-gray-400 hover:text-gray-500">
            <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
            </svg>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Add Insurance Policy</h1>
            <p class="mt-1 text-sm text-gray-500">Add a new insurance policy to your studio</p>
        </div>
    </div>
</div>

<form method="POST" action="{{ route('crm.insurance.policies.store') }}">
    @csrf

    <div class="space-y-8">
        <!-- Policy Information -->
        <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <div class="max-w-2xl">
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Policy Information</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Basic details about the insurance policy.</p>

                    <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <!-- Provider -->
                        <div class="sm:col-span-2">
                            <label for="provider" class="block text-sm font-medium leading-6 text-gray-900">Insurance Provider *</label>
                            <select id="provider" name="provider" required class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                <option value="">Select provider...</option>
                                <option value="Allen Financial" {{ old('provider') === 'Allen Financial' ? 'selected' : '' }}>Allen Financial</option>
                                <option value="Xinsurance" {{ old('provider') === 'Xinsurance' ? 'selected' : '' }}>Xinsurance</option>
                                <option value="Alternative Balance" {{ old('provider') === 'Alternative Balance' ? 'selected' : '' }}>Alternative Balance</option>
                                <option value="Other" {{ old('provider') === 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('provider')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Policy Number -->
                        <div>
                            <label for="policy_number" class="block text-sm font-medium leading-6 text-gray-900">Policy Number *</label>
                            <input type="text" name="policy_number" id="policy_number" value="{{ old('policy_number') }}" required class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="POL-123456">
                            @error('policy_number')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Policy Type -->
                        <div>
                            <label for="policy_type" class="block text-sm font-medium leading-6 text-gray-900">Policy Type *</label>
                            <input type="text" name="policy_type" id="policy_type" value="{{ old('policy_type') }}" required class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="General Liability">
                            @error('policy_type')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Coverage Details -->
        <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <div class="max-w-2xl">
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Coverage Details</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Coverage amounts and policy terms.</p>

                    <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <!-- Coverage Amount -->
                        <div>
                            <label for="coverage_amount" class="block text-sm font-medium leading-6 text-gray-900">Coverage Amount *</label>
                            <div class="relative mt-2 rounded-md shadow-sm">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <span class="text-gray-500 sm:text-sm">$</span>
                                </div>
                                <input type="number" name="coverage_amount" id="coverage_amount" value="{{ old('coverage_amount') }}" step="0.01" min="0" required class="block w-full rounded-md border-0 py-1.5 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="1000000.00">
                            </div>
                            @error('coverage_amount')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Deductible -->
                        <div>
                            <label for="deductible" class="block text-sm font-medium leading-6 text-gray-900">Deductible</label>
                            <div class="relative mt-2 rounded-md shadow-sm">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <span class="text-gray-500 sm:text-sm">$</span>
                                </div>
                                <input type="number" name="deductible" id="deductible" value="{{ old('deductible') }}" step="0.01" min="0" class="block w-full rounded-md border-0 py-1.5 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="5000.00">
                            </div>
                            @error('deductible')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Effective Date -->
                        <div>
                            <label for="effective_date" class="block text-sm font-medium leading-6 text-gray-900">Effective Date *</label>
                            <input type="date" name="effective_date" id="effective_date" value="{{ old('effective_date') }}" required class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                            @error('effective_date')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Expiration Date -->
                        <div>
                            <label for="expiration_date" class="block text-sm font-medium leading-6 text-gray-900">Expiration Date *</label>
                            <input type="date" name="expiration_date" id="expiration_date" value="{{ old('expiration_date') }}" required class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                            @error('expiration_date')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Auto Renew -->
                        <div class="sm:col-span-2">
                            <div class="relative flex items-start">
                                <div class="flex h-6 items-center">
                                    <input id="auto_renew" name="auto_renew" type="checkbox" {{ old('auto_renew') ? 'checked' : '' }} class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                </div>
                                <div class="ml-3 text-sm leading-6">
                                    <label for="auto_renew" class="font-medium text-gray-900">Auto-renew policy</label>
                                    <p class="text-gray-500">Automatically renew this policy when it expires.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Premium Information -->
        <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <div class="max-w-2xl">
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Premium Information</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Premium payment details.</p>

                    <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <!-- Premium Amount -->
                        <div>
                            <label for="premium_amount" class="block text-sm font-medium leading-6 text-gray-900">Premium Amount *</label>
                            <div class="relative mt-2 rounded-md shadow-sm">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <span class="text-gray-500 sm:text-sm">$</span>
                                </div>
                                <input type="number" name="premium_amount" id="premium_amount" value="{{ old('premium_amount') }}" step="0.01" min="0" required class="block w-full rounded-md border-0 py-1.5 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="250.00">
                            </div>
                            @error('premium_amount')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Premium Frequency -->
                        <div>
                            <label for="premium_frequency" class="block text-sm font-medium leading-6 text-gray-900">Payment Frequency *</label>
                            <select id="premium_frequency" name="premium_frequency" required class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                <option value="monthly" {{ old('premium_frequency') === 'monthly' ? 'selected' : '' }}>Monthly</option>
                                <option value="quarterly" {{ old('premium_frequency') === 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                                <option value="annually" {{ old('premium_frequency') === 'annually' ? 'selected' : '' }}>Annually</option>
                            </select>
                            @error('premium_frequency')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Agent Information -->
        <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <div class="max-w-2xl">
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Agent Information</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Contact details for your insurance agent.</p>

                    <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
                        <!-- Agent Name -->
                        <div>
                            <label for="agent_name" class="block text-sm font-medium leading-6 text-gray-900">Agent Name</label>
                            <input type="text" name="agent_name" id="agent_name" value="{{ old('agent_name') }}" class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                            @error('agent_name')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Agent Phone -->
                        <div>
                            <label for="agent_phone" class="block text-sm font-medium leading-6 text-gray-900">Agent Phone</label>
                            <input type="tel" name="agent_phone" id="agent_phone" value="{{ old('agent_phone') }}" class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="(555) 123-4567">
                            @error('agent_phone')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Agent Email -->
                        <div>
                            <label for="agent_email" class="block text-sm font-medium leading-6 text-gray-900">Agent Email</label>
                            <input type="email" name="agent_email" id="agent_email" value="{{ old('agent_email') }}" class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="agent@insurance.com">
                            @error('agent_email')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Notes -->
                    <div class="mt-6">
                        <label for="notes" class="block text-sm font-medium leading-6 text-gray-900">Notes</label>
                        <textarea id="notes" name="notes" rows="4" class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Additional notes about this policy...">{{ old('notes') }}</textarea>
                        @error('notes')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="mt-6 flex items-center justify-end gap-x-6">
        <a href="{{ route('crm.insurance.policies') }}" class="text-sm font-semibold leading-6 text-gray-900">Cancel</a>
        <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
            Add Policy
        </button>
    </div>
</form>
@endsection