@extends('layout.app')
@section('title', 'Add Vehicle Insurance')

@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<style>
  :root {
    --primary:#1677ff; --navy:#102a43; --border:#d9e2ec; --muted:#6b7c93;
    --bg:#f6f8fb; --danger:#d93025; --success:#16803c;
  }
  .breadcrumb { color:var(--muted); font-size:13px; margin-bottom:16px; }
  .breadcrumb span { color:var(--primary); }
  .page-head { background:#fff; border:1px solid var(--border); border-radius:8px; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
  .page-head h2 { margin:0 0 5px; font-size:22px; }
  .page-head p { margin:0; color:var(--muted); font-size:13px; }
  .ins-card { background:#fff; border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:14px; }
  .ins-card h3 { margin:0 0 18px; font-size:16px; }
  .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px 22px; }
  .field label { display:block; font-size:12px; font-weight:600; margin-bottom:7px; }
  .req { color:var(--danger); }
  .upload { border:1.5px dashed #b8c4d1; border-radius:7px; padding:20px; text-align:center; cursor:pointer; display:block; }
  .upload strong { color:var(--primary); }
  .upload small { display:block; color:var(--muted); margin-top:5px; }
  .full { grid-column:span 2; }
  .note { font-size:12px; color:var(--muted); margin-bottom:15px; }
  
  @media(max-width:1000px) { .grid{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:600px) { .grid{grid-template-columns:1fr}.full{grid-column:span 1} }
</style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Fleet Management</a></li>
        <li class="breadcrumb-item"><a href="{{ route('vehicle-insurance.index') }}">Vehicle Insurance</a></li>
        <li class="breadcrumb-item active" aria-current="page">Add Insurance</li>
    </ol>
</div>

<div class="app-body">
    <div class="page-head">
        <div>
            <h2>🛡️ Add Vehicle Insurance</h2>
            <p>Enter insurance details for the selected vehicle.</p>
        </div>
        <a href="{{ request('redirect_to') ?? route('vehicle-insurance.index') }}" class="btn btn-outline-secondary">← Back</a>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ isset($insurance) ? route('vehicle-insurance.update', $insurance->id) : route('vehicle-insurance.store') }}" method="POST" enctype="multipart/form-data" id="insuranceForm">
        @csrf
        @if(isset($insurance))
            @method('PUT')
        @endif
        @if(request('redirect_to'))
            <input type="hidden" name="redirect_to" value="{{ request('redirect_to') }}">
        @endif
        <div class="ins-card">
            <h3>1. Vehicle Details</h3>
            <div class="grid">
                <div class="field">
                    <label>Vehicle Number <span class="req">*</span></label>
                    <select name="vehicle_id" id="vehicle" class="form-select select2" required>
                        <option value="">Select Vehicle Number</option>
                        @foreach($vehicles as $id => $no)
                            <option value="{{ $id }}" {{ old('vehicle_id', $insurance->vehicle_id ?? request('vehicle_id')) == $id ? 'selected' : '' }}>{{ $no }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label>Current Insurance Status</label>
                    <input id="insuranceStatus" class="form-control" readonly value="Checking..." />
                </div>
            </div>
        </div>

        <div class="ins-card">
            <h3>2. Insurance Details</h3>
            <div class="grid">
                <div class="field">
                    <label>Insurance Company <span class="req">*</span></label>
                    <input name="insurance_company" type="text" class="form-control" required placeholder="Enter Insurance Company" value="{{ old('insurance_company', $insurance->insurance_company ?? '') }}">
                </div>
                <div class="field">
                    <label>Policy Number</label>
                    <input name="policy_number" class="form-control" placeholder="Enter Policy Number" value="{{ old('policy_number', $insurance->policy_number ?? '') }}">
                </div>
                <div class="field">
                    <label>Policy Type</label>
                    <select name="policy_type" class="form-select">
                        <option value="">Select Policy Type</option>
                        <option value="Comprehensive" {{ old('policy_type', $insurance->policy_type ?? '') == 'Comprehensive' ? 'selected' : '' }}>Comprehensive</option>
                        <option value="Third Party" {{ old('policy_type', $insurance->policy_type ?? '') == 'Third Party' ? 'selected' : '' }}>Third Party</option>
                        <option value="Own Damage" {{ old('policy_type', $insurance->policy_type ?? '') == 'Own Damage' ? 'selected' : '' }}>Own Damage</option>
                    </select>
                </div>
                <div class="field">
                    <label>Policy Start Date <span class="req">*</span></label>
                    <input name="policy_start_date" type="text" class="form-control datepicker" id="startDate" required value="{{ old('policy_start_date', isset($insurance) ? date('d-m-Y', strtotime($insurance->policy_start_date)) : '') }}" placeholder="DD-MM-YYYY">
                </div>
                <div class="field">
                    <label>Policy End Date <span class="req">*</span></label>
                    <input name="policy_end_date" type="text" class="form-control datepicker" id="endDate" required value="{{ old('policy_end_date', isset($insurance) ? date('d-m-Y', strtotime($insurance->policy_end_date)) : '') }}" placeholder="DD-MM-YYYY">
                    <div id="dateError" class="text-danger mt-1" style="font-size:11px; display:none;">End date must be after start date.</div>
                </div>
                <div class="field">
                    <label>Sum Insured (₹)</label>
                    <input name="sum_insured" type="number" step="0.01" class="form-control" min="0" placeholder="Enter Sum Insured" value="{{ old('sum_insured', $insurance->sum_insured ?? '') }}">
                </div>
                <div class="field">
                    <label>IDV (Insured Declared Value) (₹)</label>
                    <input name="idv" type="number" step="0.01" class="form-control" min="0" placeholder="Enter IDV (Optional)" value="{{ old('idv', $insurance->idv ?? '') }}">
                </div>
                <div class="field">
                    <label>No Claim Bonus (%)</label>
                    <input name="ncb" type="number" step="0.01" class="form-control" min="0" max="100" placeholder="Enter NCB % (Optional)" value="{{ old('ncb', $insurance->ncb ?? '') }}">
                </div>
                <div class="field">
                    <label>Premium Amount (₹)</label>
                    <input name="premium_amount" id="premium" type="number" step="0.01" class="form-control" min="0" placeholder="Enter Premium Amount" value="{{ old('premium_amount', $insurance->premium_amount ?? '') }}" oninput="calculateTotal()">
                </div>
                <div class="field">
                    <label>Tax Amount (₹)</label>
                    <input name="tax_amount" id="tax" type="number" step="0.01" class="form-control" min="0" placeholder="Enter Tax Amount (Optional)" value="{{ old('tax_amount', $insurance->tax_amount ?? '') }}" oninput="calculateTotal()">
                </div>
                <div class="field">
                    <label>Total Amount (₹)</label>
                    <input name="total_amount" id="total" class="form-control bg-light" readonly placeholder="Auto-calculated" value="{{ old('total_amount', $insurance->total_amount ?? '') }}">
                </div>
                <div class="field">
                    <label>Payment Mode</label>
                    <select name="payment_mode" class="form-select">
                        <option value="">Select Payment Mode</option>
                        <option value="Cash" {{ old('payment_mode', $insurance->payment_mode ?? '') == 'Cash' ? 'selected' : '' }}>Cash</option>
                        <option value="Bank Transfer" {{ old('payment_mode', $insurance->payment_mode ?? '') == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                        <option value="UPI" {{ old('payment_mode', $insurance->payment_mode ?? '') == 'UPI' ? 'selected' : '' }}>UPI</option>
                        <option value="Card" {{ old('payment_mode', $insurance->payment_mode ?? '') == 'Card' ? 'selected' : '' }}>Card</option>
                        <option value="Cheque" {{ old('payment_mode', $insurance->payment_mode ?? '') == 'Cheque' ? 'selected' : '' }}>Cheque</option>
                    </select>
                </div>
                <div class="field full">
                    <label>Policy Document</label>
                    <label class="upload">
                        <input name="policy_document" type="file" accept=".pdf,.jpg,.jpeg,.png" hidden onchange="showFile(this)">
                        <strong>☁ Click to upload</strong> or drag and drop
                        <small>PDF, JPG, PNG (Max 5MB)</small>
                        <small id="fileName" class="text-primary mt-2 fw-bold"></small>
                    </label>
                    @if(isset($insurance->policy_document) && $insurance->policy_document)
                        <div class="mt-1">
                            <a href="{{ document_url($insurance->policy_document) }}" target="_blank" class="small text-primary text-decoration-none">
                                <i class="ri-file-line me-1"></i> View Current Policy Document
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="ins-card">
            <h3>3. Additional Details</h3>
            <div class="grid">
                <div class="field">
                    <label>Agent / Broker Name</label>
                    <input name="broker_agent" class="form-control" placeholder="Enter Agent / Broker Name (Optional)" value="{{ old('broker_agent', $insurance->broker_agent ?? '') }}">
                </div>
                <div class="field">
                    <label>Agent / Broker Contact</label>
                    <input name="broker_contact" class="form-control" placeholder="Enter Contact Number (Optional)" value="{{ old('broker_contact', $insurance->broker_contact ?? '') }}">
                </div>
                <div class="field">
                    <label>Reminder Before Expiry (Days)</label>
                    <select name="reminder_days" class="form-select">
                        <option value="30" {{ old('reminder_days', $insurance->reminder_days ?? '') == '30' ? 'selected' : '' }}>30 Days</option>
                        <option value="15" {{ old('reminder_days', $insurance->reminder_days ?? '') == '15' ? 'selected' : '' }}>15 Days</option>
                        <option value="7" {{ old('reminder_days', $insurance->reminder_days ?? '') == '7' ? 'selected' : '' }}>7 Days</option>
                        <option value="1" {{ old('reminder_days', $insurance->reminder_days ?? '') == '1' ? 'selected' : '' }}>1 Day</option>
                    </select>
                </div>
                <div class="field full">
                    <label>Notes</label>
                    <textarea name="notes" class="form-control" rows="2" placeholder="Enter notes (Optional)">{{ old('notes', $insurance->notes ?? '') }}</textarea>
                </div>
            </div>
        </div>

        <div class="note"><span class="req">*</span> Indicates mandatory fields</div>
        <div class="d-flex justify-content-end gap-2 mb-4">
            <button class="btn btn-outline-secondary" type="reset">Cancel</button>
            <button class="btn btn-primary" type="submit">Save Insurance</button>
        </div>
    </form>
</div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
$(document).ready(function() {
    if (typeof $.fn.daterangepicker === 'function') {
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: false,
            locale: { format: "DD-MM-YYYY" }
        });
        $('.datepicker').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
        });
        $('.datepicker').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    }
});

function calculateTotal() {
  const premium = Number(document.getElementById('premium').value) || 0;
  const tax = Number(document.getElementById('tax').value) || 0;
  document.getElementById('total').value = premium + tax ? (premium + tax).toFixed(2) : '';
}

function showFile(input) {
  const file = input.files[0];
  const label = document.getElementById('fileName');
  if (!file) return;
  if (file.size > 5 * 1024 * 1024) {
    alert('File size must be 5MB or less.');
    input.value = '';
    label.textContent = '';
    return;
  }
  label.textContent = 'Selected: ' + file.name;
}

document.getElementById('insuranceForm').addEventListener('submit', function(e) {
  const start = document.getElementById('startDate').value;
  const end = document.getElementById('endDate').value;
  const dateError = document.getElementById('dateError');
  if (start && end && end <= start) {
    e.preventDefault();
    dateError.style.display = 'block';
    document.getElementById('endDate').focus();
    return;
  }
  dateError.style.display = 'none';
});
</script>
@endpush