@extends('crm.layouts.app')

@section('title', 'File Insurance Claim')

@section('content')
<div class="mb-6">
    <div class="flex items-center gap-x-3">
        <a href="{{ route('crm.insurance.claims') }}" 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">File Insurance Claim</h1>
            <p class="mt-1 text-sm text-gray-500">Submit a new insurance claim for review</p>
        </div>
    </div>
</div>

<form method="POST" action="{{ route('crm.insurance.claims.store') }}" enctype="multipart/form-data">
    @csrf

    <div class="space-y-8">
        <!-- Claim 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">Claim Information</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Basic details about the insurance claim.</p>

                    <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <!-- Policy Selection -->
                        <div class="sm:col-span-2">
                            <label for="insurance_policy_id" class="block text-sm font-medium leading-6 text-gray-900">Insurance Policy *</label>
                            <select id="insurance_policy_id" name="insurance_policy_id" 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 policy...</option>
                                @foreach($policies as $policy)
                                    <option value="{{ $policy->id }}" {{ old('insurance_policy_id') == $policy->id ? 'selected' : '' }}>
                                        {{ $policy->provider }} - {{ $policy->policy_number }} ({{ $policy->policy_type }})
                                    </option>
                                @endforeach
                            </select>
                            @error('insurance_policy_id')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Claim Type -->
                        <div>
                            <label for="claim_type" class="block text-sm font-medium leading-6 text-gray-900">Claim Type *</label>
                            <select id="claim_type" name="claim_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 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                <option value="">Select type...</option>
                                <option value="general_liability" {{ old('claim_type') === 'general_liability' ? 'selected' : '' }}>General Liability</option>
                                <option value="property_damage" {{ old('claim_type') === 'property_damage' ? 'selected' : '' }}>Property Damage</option>
                                <option value="professional_liability" {{ old('claim_type') === 'professional_liability' ? 'selected' : '' }}>Professional Liability</option>
                                <option value="product_liability" {{ old('claim_type') === 'product_liability' ? 'selected' : '' }}>Product Liability</option>
                                <option value="injury" {{ old('claim_type') === 'injury' ? 'selected' : '' }}>Bodily Injury</option>
                                <option value="other" {{ old('claim_type') === 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('claim_type')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Incident Date -->
                        <div>
                            <label for="incident_date" class="block text-sm font-medium leading-6 text-gray-900">Incident Date *</label>
                            <input type="date" name="incident_date" id="incident_date" value="{{ old('incident_date') }}" required max="{{ date('Y-m-d') }}" 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('incident_date')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Claimed Amount -->
                        <div class="sm:col-span-2">
                            <label for="claimed_amount" class="block text-sm font-medium leading-6 text-gray-900">Claimed 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="claimed_amount" id="claimed_amount" value="{{ old('claimed_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="5000.00">
                            </div>
                            @error('claimed_amount')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Incident 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">Incident Details</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Provide detailed information about the incident.</p>

                    <div class="mt-6 space-y-6">
                        <!-- Incident Description -->
                        <div>
                            <label for="incident_description" class="block text-sm font-medium leading-6 text-gray-900">Incident Description *</label>
                            <textarea id="incident_description" name="incident_description" rows="6" 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="Provide a detailed description of what happened, when it occurred, and any relevant circumstances...">{{ old('incident_description') }}</textarea>
                            @error('incident_description')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Location -->
                        <div>
                            <label for="incident_location" class="block text-sm font-medium leading-6 text-gray-900">Location of Incident</label>
                            <input type="text" name="incident_location" id="incident_location" value="{{ old('incident_location') }}" 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="Studio address, client location, etc.">
                            @error('incident_location')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Claimant 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">Claimant Information</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Information about the person or party filing the claim.</p>

                    <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <!-- Claimant Name -->
                        <div>
                            <label for="claimant_name" class="block text-sm font-medium leading-6 text-gray-900">Claimant Name</label>
                            <input type="text" name="claimant_name" id="claimant_name" value="{{ old('claimant_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" placeholder="Full name">
                            @error('claimant_name')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Claimant Phone -->
                        <div>
                            <label for="claimant_phone" class="block text-sm font-medium leading-6 text-gray-900">Claimant Phone</label>
                            <input type="tel" name="claimant_phone" id="claimant_phone" value="{{ old('claimant_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('claimant_phone')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Claimant Email -->
                        <div class="sm:col-span-2">
                            <label for="claimant_email" class="block text-sm font-medium leading-6 text-gray-900">Claimant Email</label>
                            <input type="email" name="claimant_email" id="claimant_email" value="{{ old('claimant_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="email@example.com">
                            @error('claimant_email')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Supporting Documentation -->
        <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">Supporting Documentation</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Upload photos, reports, or other relevant documents.</p>

                    <div class="mt-6">
                        <!-- File Upload -->
                        <div>
                            <label for="supporting_documents" class="block text-sm font-medium leading-6 text-gray-900">Upload Documents</label>
                            <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
                                <div class="text-center">
                                    <svg class="mx-auto h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor">
                                        <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z" clip-rule="evenodd" />
                                    </svg>
                                    <div class="mt-4 flex text-sm leading-6 text-gray-600">
                                        <label for="supporting_documents" class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
                                            <span>Upload files</span>
                                            <input id="supporting_documents" name="supporting_documents[]" type="file" class="sr-only" multiple accept="image/*,.pdf,.doc,.docx">
                                        </label>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs leading-5 text-gray-600">PNG, JPG, PDF up to 10MB each</p>
                                </div>
                            </div>
                            @error('supporting_documents')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            @error('supporting_documents.*')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Additional Notes -->
                        <div class="mt-6">
                            <label for="notes" class="block text-sm font-medium leading-6 text-gray-900">Additional 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="Any additional information that may be relevant to this claim...">{{ old('notes') }}</textarea>
                            @error('notes')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="mt-6 flex items-center justify-end gap-x-6">
        <a href="{{ route('crm.insurance.claims') }}" class="text-sm font-semibold leading-6 text-gray-900">Cancel</a>
        <button type="submit" name="action" value="draft" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
            Save as Draft
        </button>
        <button type="submit" name="action" value="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">
            Submit Claim
        </button>
    </div>
</form>
@endsection