@extends('layouts.admin')

@section('content')
<div class="card mb-3">
    <div class="card-header">
        <div class="row flex-between-end">
            <div class="col-auto align-self-center">
                <a href="{{ route('claims.member', $member->id) }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-arrow-circle-left"></i> Back to Member Claims
                </a>
                <br><br>
                <h5 class="mb-0">Create New Claim</h5>
            </div>
        </div>
    </div>

    <div class="card-body bg-light">

        {{-- ================= POLICY HOLDER ================= --}}
        <h5 class="text-primary">Policy Holder Information</h5>
        <p><strong>Name:</strong> {{ $member->name }} {{ $member->surname }}</p>
        <p><strong>National ID:</strong> {{ $member->national_id }}</p>
        <p><strong>Phone:</strong> {{ $member->cell_number }}</p>
        <hr>

        {{-- Hidden Policy Holder data for JS --}}
        <input type="hidden" id="ph_name" value="{{ $member->name }}">
        <input type="hidden" id="ph_surname" value="{{ $member->surname }}">
        <input type="hidden" id="ph_national_id" value="{{ $member->national_id }}">
        <input type="hidden" id="ph_gender" value="{{ $member->gender }}">
        <input type="hidden" id="ph_dob" value="{{ $member->date_of_birth }}">

        {{-- ================= FORM ================= --}}
        <form method="POST" action="{{ route('claims.store', $member->id) }}">
            @csrf

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

            {{-- ================= DECEASED ================= --}}
            <h5 class="text-primary">Deceased Information</h5>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label><strong>Who is the Deceased?</strong></label>
                    <select name="deceased_type" id="deceased_type" class="form-control" required>
                        <option value="">-- Select --</option>
                        <option value="Policyholder">Policy Holder</option>
                        <option value="Dependant">Dependant</option>
                    </select>
                </div>

                <div class="col-md-6 mb-3" id="dependant_div" style="display:none;">
                    <label><strong>Select Dependant</strong></label>
                    <select id="dependant_select" class="form-control">
                        <option value="">-- Select Dependant --</option>
                        @foreach($dependants as $dependant)
                            <option
                                data-name="{{ $dependant->name }} {{ $dependant->surname }}"
                                data-national-id="{{ $dependant->national_id }}"
                                data-gender="{{ $dependant->gender }}"
                                data-dob="{{ $dependant->d_o_b }}">
                                {{ $dependant->name }} {{ $dependant->surname }} ({{ $dependant->relationship }})
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label><strong>Deceased Full Name</strong></label>
                    <input type="text" name="deceased_full_name"
                           id="deceased_name" class="form-control" required>
                </div>

                <div class="col-md-6 mb-3">
                    <label><strong>Deceased National ID</strong></label>
                    <input type="text" name="deceased_national_id"
                           id="deceased_national_id" class="form-control" required>
                </div>

                <div class="col-md-6 mb-3">
                    <label><strong>Gender</strong></label>
                    <select id="deceased_gender" class="form-control" required>
                        <option value="">-- Select Gender --</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                    {{-- hidden mirror --}}
                    <input type="hidden" name="deceased_gender" id="hidden_deceased_gender">
                </div>

                <div class="col-md-6 mb-3">
                    <label><strong>Date of Birth</strong></label>
                    <input type="date" name="deceased_date_of_birth"
                           id="deceased_dob" class="form-control" required>
                </div>
            </div>

            <hr>

            {{-- ================= CLAIM DETAILS ================= --}}
            <h5 class="text-primary">Claim Details</h5>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label><strong>Date of Death</strong></label>
                    <input type="date" name="date_of_death" class="form-control" required>
                </div>

                <div class="col-md-6 mb-3">
                    <label><strong>Cause of Death</strong></label>
                    <input type="text" name="cause_of_death" class="form-control" required>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label><strong>Relationship to Policy Holder</strong></label>
                    <select name="relationship_to_policyholder" class="form-control" required>
                        <option value="">-- Select Relationship --</option>
                        <option value="Self">Self</option>
                        <option value="Spouse">Spouse</option>
                        <option value="Child">Child</option>
                        <option value="Parent">Parent</option>
                        <option value="Sibling">Sibling</option>
                        <option value="Executor">Executor</option>
                        <option value="Other">Other</option>
                    </select>
                </div>

                <div class="col-md-6 mb-3">
                    <label><strong>Remarks</strong></label>
                    <textarea name="remarks" class="form-control" rows="3"></textarea>
                </div>
            </div>

            <hr>

            {{-- ================= CLAIMANT ================= --}}
            <h5 class="text-primary">Claimant Information</h5>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label><strong>Claimant Full Name</strong></label>
                    <input type="text" name="claimant_full_name"
                           class="form-control" required>
                </div>

                <div class="col-md-6 mb-3">
                    <label><strong>Claimant National ID</strong></label>
                    <input type="text" name="claimant_national_id"
                           class="form-control">
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label><strong>Claimant Phone</strong></label>
                    <input type="text" name="claimant_phone"
                           class="form-control">
                </div>

                <div class="col-md-6 mb-3">
                    <label><strong>Claimant Address</strong></label>
                    <input type="text" name="claimant_address"
                           class="form-control">
                </div>
            </div>

            <div class="text-center">
                <button class="btn btn-success btn-sm">
                    <i class="far fa-save"></i> Submit Claim
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ================= JAVASCRIPT ================= --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    const deceasedType = document.getElementById('deceased_type');
    const dependantDiv = document.getElementById('dependant_div');
    const dependantSelect = document.getElementById('dependant_select');

    const name = document.getElementById('deceased_name');
    const nid = document.getElementById('deceased_national_id');
    const gender = document.getElementById('deceased_gender');
    const hiddenGender = document.getElementById('hidden_deceased_gender');
    const dob = document.getElementById('deceased_dob');

    const ph = {
        name: document.getElementById('ph_name').value + ' ' +
              document.getElementById('ph_surname').value,
        nid: document.getElementById('ph_national_id').value,
        gender: document.getElementById('ph_gender').value,
        dob: document.getElementById('ph_dob').value
    };

    function lock() {
        name.readOnly = nid.readOnly = dob.readOnly = true;
        gender.disabled = true;
    }

    function unlock() {
        name.readOnly = nid.readOnly = dob.readOnly = false;
        gender.disabled = false;
    }

    deceasedType.addEventListener('change', function () {
        unlock();
        dependantDiv.style.display = 'none';

        if (this.value === 'Policyholder') {
            name.value = ph.name;
            nid.value = ph.nid;
            gender.value = ph.gender;
            hiddenGender.value = ph.gender;
            dob.value = ph.dob;
            lock();
        }

        if (this.value === 'Dependant') {
            dependantDiv.style.display = 'block';
        }
    });

    dependantSelect.addEventListener('change', function () {
        const opt = this.options[this.selectedIndex];
        if (!opt.value) return;

        name.value = opt.dataset.name;
        nid.value = opt.dataset.nationalId;
        gender.value = opt.dataset.gender;
        hiddenGender.value = opt.dataset.gender;
        dob.value = opt.dataset.dob;
        lock();
    });

    gender.addEventListener('change', () => {
        hiddenGender.value = gender.value;
    });
});
</script>
@endsection
