@extends('layouts.branch')

@section('title', 'Add Insurance')
@section('header', 'New Insurance Profile')

@section('content')
<div class="space-y-6">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Insurances', 'url' => route('branch.insurances.index')],
            ['name' => 'Add New', 'url' => '#']
        ]
    ])

    <div class="max-w-4xl mx-auto">
        <form action="{{ route('branch.insurances.store') }}" method="POST" class="space-y-6 pb-20">
            @csrf
            
            <!-- Company Profile Section -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                    <h3 class="text-lg font-semibold text-slate-800">Company (Payer) Profile</h3>
                    <p class="text-sm text-slate-500">Official identification and contact details.</p>
                </div>
                
                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Company Name*</label>
                        <input type="text" name="company_name" value="{{ old('company_name') }}" required
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-400"
                            placeholder="e.g. Daman Insurance">
                        @error('company_name') <p class="text-xs text-red-500">{{ $message }}</p> @enderror
                    </div>

                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Claim Email Address</label>
                        <input type="email" name="claim_email" value="{{ old('claim_email') }}"
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-400"
                            placeholder="claims@company.com">
                    </div>

                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Provider Helpline</label>
                        <input type="text" name="helpline_number" value="{{ old('helpline_number') }}"
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-400"
                            placeholder="+971 4 XXX XXXX">
                    </div>

                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Office Address</label>
                        <textarea name="address" rows="1"
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-400"
                            placeholder="Full office address details...">{{ old('address') }}</textarea>
                    </div>
                </div>
            </div>

            <!-- TPA Details Section -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                    <h3 class="text-lg font-semibold text-slate-800">TPA (Third Party Administrator)</h3>
                    <p class="text-sm text-slate-500">Details of the handling administrator.</p>
                </div>
                
                <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">TPA Name</label>
                        <input type="text" name="tpa_name" value="{{ old('tpa_name') }}"
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-400"
                            placeholder="e.g. NAS / MedNet">
                    </div>

                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Contact Person</label>
                        <input type="text" name="tpa_contact_person" value="{{ old('tpa_contact_person') }}"
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-400"
                            placeholder="Relationship Manager">
                    </div>

                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Portal URL</label>
                        <input type="url" name="tpa_portal_url" value="{{ old('tpa_portal_url') }}"
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-400"
                            placeholder="https://tpa-portal.com">
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Contractual Terms -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                        <h3 class="text-lg font-semibold text-slate-800">Contractual Terms</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div class="space-y-2">
                            <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Pre-Agreed Credit Limit (AED)</label>
                            <input type="number" name="credit_limit" value="{{ old('credit_limit', 0) }}" step="0.01"
                                class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Agreement Start</label>
                                <input type="date" name="agreement_start_date" value="{{ old('agreement_start_date') }}"
                                    class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
                            </div>
                            <div class="space-y-2">
                                <label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Agreement Expiry</label>
                                <input type="date" name="agreement_expiry_date" value="{{ old('agreement_expiry_date') }}"
                                    class="w-full px-4 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Discount Rates -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                        <h3 class="text-lg font-semibold text-slate-800">Discount Rates (%)</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div class="grid grid-cols-1 gap-4">
                            <div class="flex items-center justify-between gap-4">
                                <label class="text-xs font-bold text-slate-600 uppercase tracking-tight">IPD Services Discount</label>
                                <div class="w-24 relative">
                                    <input type="number" name="discount_ipd" value="{{ old('discount_ipd', 0) }}" step="0.01" max="100" class="w-full px-3 py-2 border border-slate-200 rounded-lg pr-8">
                                    <span class="absolute right-3 top-2 text-slate-400 text-xs">%</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between gap-4">
                                <label class="text-xs font-bold text-slate-600 uppercase tracking-tight">OPD Services Discount</label>
                                <div class="w-24 relative">
                                    <input type="number" name="discount_opd" value="{{ old('discount_opd', 0) }}" step="0.01" max="100" class="w-full px-3 py-2 border border-slate-200 rounded-lg pr-8">
                                    <span class="absolute right-3 top-2 text-slate-400 text-xs">%</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between gap-4">
                                <label class="text-xs font-bold text-slate-600 uppercase tracking-tight">Diagnostics Discount</label>
                                <div class="w-24 relative">
                                    <input type="number" name="discount_diagnostics" value="{{ old('discount_diagnostics', 0) }}" step="0.01" max="100" class="w-full px-3 py-2 border border-slate-200 rounded-lg pr-8">
                                    <span class="absolute right-3 top-2 text-slate-400 text-xs">%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Actions Footer -->
            <div class="flex items-center justify-end gap-3 pt-6 border-t border-slate-100">
                <a href="{{ route('branch.insurances.index') }}" class="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors">
                    Cancel
                </a>
                <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors shadow-sm shadow-indigo-200">
                    Register Insurance Profile
                </button>
            </div>
        </form>
    </div>
</div>
@endsection