@extends('layouts.app')

@section('title', 'Create New Lead')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">

                    <h4 class="card-title">Create New Lead</h4>
                    <p class="card-title-desc">Fill out the details for the new lead.</p>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs nav-tabs-custom nav-justified" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#contact" role="tab">
                                <span class="d-block d-sm-none"><i class="fas fa-address-book"></i></span>
                                <span class="d-none d-sm-block">Contact</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#dependents" role="tab">
                                <span class="d-block d-sm-none"><i class="fas fa-users"></i></span>
                                <span class="d-none d-sm-block">Dependents</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#opportunities" role="tab">
                                <span class="d-block d-sm-none"><i class="fas fa-users"></i></span>
                                <span class="d-none d-sm-block">Opporunities</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#policies" role="tab">
                                <span class="d-block d-sm-none"><i class="fas fa-file-alt"></i></span>
                                <span class="d-none d-sm-block">Policies</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#notes" role="tab">
                                <span class="d-block d-sm-none"><i class="fas fa-sticky-note"></i></span>
                                <span class="d-none d-sm-block">Notes</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#recording" role="tab">
                                <span class="d-block d-sm-none"><i class="fas fa-microphone"></i></span>
                                <span class="d-none d-sm-block">Recording</span>
                            </a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content p-3 text-muted">
                        <!-- Contact Tab -->
                        <div class="tab-pane active" id="contact" role="tabpanel">
                            <form action="" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-4">
                                        <label for="first_name" class="form-label">First Name</label>
                                        <input type="text" class="form-control" id="first_name" name="first_name" required>
                                        @error('first_name')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-4">
                                        <label for="middle_name" class="form-label">Middle Name</label>
                                        <input type="text" class="form-control" id="middle_name" name="middle_name">
                                        @error('middle_name')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-4">
                                        <label for="last_name" class="form-label">Last Name</label>
                                        <input type="text" class="form-control" id="last_name" name="last_name" required>
                                        @error('last_name')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-4">
                                        <label for="phone_number" class="form-label">Phone Number</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="phone_number" name="phone_number" required>
                                            <select class="form-select" id="phone_type" name="phone_type" style="max-width: 150px;" required>
                                                <option value="" disabled selected>Select type</option>
                                                <option value="mobile">Mobile</option>
                                                <option value="home">Home</option>
                                                <option value="work">Work</option>
                                            </select>
                                        </div>
                                        @error('phone_number')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-4">
                                        <label for="phone_2" class="form-label">Phone2</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="phone_2" name="phone_2">
                                            <select class="form-select" id="phone_type_2" name="phone_type_2" style="max-width: 150px;">
                                                <option value="" disabled selected>Select type</option>
                                                <option value="mobile">Mobile</option>
                                                <option value="home">Home</option>
                                                <option value="work">Work</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label for="phone_3" class="form-label">Phone3</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="phone_3" name="phone_3">
                                            <select class="form-select" id="phone_type_3" name="phone_type_3" style="max-width: 150px;">
                                                <option value="" disabled selected>Select type</option>
                                                <option value="mobile">Mobile</option>
                                                <option value="home">Home</option>
                                                <option value="work">Work</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <label for="address" class="form-label">Address</label>
                                        <input type="text" class="form-control" id="address" name="address" required>
                                        @error('address')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="address_2" class="form-label">Address2</label>
                                        <input type="text" class="form-control" id="address_2" name="address_2" required>
                                        @error('address_2')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="city" class="form-label">City</label>
                                        <input type="text" class="form-control" id="city" name="city" required>
                                        @error('city')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="state" class="form-label">State</label>
                                        <select name="state" class="form-select" required>
                                            <option value="1">California</option>
                                            <option value="2">Texas</option>
                                            <option value="3">Florida</option>
                                        </select>
                                    </div>

                                    <div class="col-4">
                                        <label for="zip" class="form-label">Zip</label>
                                        <input type="text" class="form-control" id="zip" name="zip" required>
                                        @error('zip')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="country" class="form-label">Country</label>
                                        <input type="text" class="form-control" id="country" name="country" required>
                                        @error('country')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="country2" class="form-label">Country</label>
                                        <select name="country2" class="form-select">
                                            <option value="1">USA</option>
                                            <option value="2">Canada</option>
                                            <option value="3">Mexico</option>
                                        </select>
                                    </div>

                                    <div class="col-4">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" class="form-control" id="email" name="email" required>
                                        @error('email')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="email2" class="form-label">Email2</label>
                                        <input type="email" class="form-control" id="email2" name="email2">
                                        @error('email2')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="age" class="form-label">Age</label>
                                        <input type="number" class="form-control" id="age" name="age" required>
                                        @error('age')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="dob" class="form-label">Date of Birth</label>
                                        <input type="date" class="form-control" id="dob" name="dob" required>
                                        @error('dob')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="gender" class="form-label">Gender</label>
                                        <select name="gender" class="form-select" required>
                                            <option value="male">Male</option>
                                            <option value="female">Female</option>
                                            <option value="other">Other</option>
                                        </select>
                                    </div>

                                    <div class="col-4">
                                        <label for="language" class="form-label">Language</label>
                                        <select name="language" class="form-select" required>
                                            <option value="english">English</option>
                                            <option value="spanish">Spanish</option>
                                            <option value="french">French</option>
                                        </select>
                                    </div>

                                    <div class="col-4">
                                        <label for="marital_status" class="form-label">Marital Status</label>
                                        <select name="marital_status" class="form-select" required>
                                            <option value="single">Single</option>
                                            <option value="married">Married</option>
                                            <option value="divorced">Divorced</option>
                                            <option value="widowed">Widowed</option>
                                        </select>
                                    </div>

                                    <div class="col-4">
                                        <label for="veteran" class="form-label">Vateran</label>
                                        <select name="veteran" class="form-select" >
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>

                                    <div class="col-4">
                                        <label for="contact_time" class="form-label">Contact time</label>
                                        <input type="time" class="form-control" id="contact_time" name="contact_time" required>
                                        @error('contact_time')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-4">
                                        <label for="contact_method" class="form-label">Contact Method</label>
                                        <select name="contact_method" class="form-select" required>
                                            <option value="phone">Phone</option>
                                            <option value="email">Email</option>
                                            <option value="sms">SMS</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <label for="mailing_zipcode" class="form-label">Mailing Zipcode</label>
                                        <input type="text" class="form-control" id="mailing_zipcode" name="mailing_zipcode" required>
                                    </div>
                                    <div class="col-3">
                                        <label for="mailing_city" class="form-label">Mailing City</label>
                                        <input type="text" class="form-control" id="mailing_city" name="mailing_city" required>
                                    </div>
                                    <div class="col-3">
                                        <label for="mailing_state" class="form-label">Mailing State</label>
                                        <input type="text" class="form-control" id="mailing_state" name="mailing_state" required>
                                    </div>
                                    <div class="col-3">
                                        <label for="mailing_address" class="form-label">Mailing Address</label>
                                        <input type="text" class="form-control" id="mailing_address" name="mailing_address" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <label for="taxable-household-member" class="form-label">Taxable Household Member</label>
                                        <input type="text" class="form-control" id="taxable-household-member" name="taxable-household-member">
                                    </div>
                                    <div class="col-3">
                                        <label for="consent-to-search-marketplace" class="form-label">Consent to search marketplace</label>
                                        <select name="consent-to-search-marketplace" class="form-select">
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>
                                    <div class="col-3">
                                        <label for="consent-to-assist-with-documents" class="form-label">Consent to assist with documents</label>
                                        <select name="consent-to-assist-with-documents" class="form-select">
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>
                                    <div class="col-3">
                                        <label for="consent-to-call" class="form-label">Consent to Call/Text/Email</label>
                                        <select name="consent-to-call" class="form-select">
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>
                                    <div class="col-3">
                                        <label for="consent-to-submit-application" class="form-label">Consent to submit application</label>
                                        <select name="consent-to-submit-application" class="form-select">
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>
                                    <div class="col-3">
                                        <label for="consent-to-call" class="form-label">Consent to Reenroll/renew</label>
                                        <select name="consent-to-reenroll" class="form-select">
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>
                                    <div class="col-3">
                                        <label for="understant-duration-of-consent" class="form-label">Understand duration of consent</label>
                                        <select name="duration-of-consent" class="form-select">
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="panel mt-4">
                                    <h4 class="panel-title">Financial Information</h4>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-3">
                                                <label for="occupation" class="form-label">Occupation</label>
                                                <input type="text" class="form-control" id="occupation" name="occupation" required>
                                            </div>
                                            <div class="col-3">
                                                <label for="budget" class="form-label">Budget</label>
                                                <input type="number" class="form-control" id="budget" name="budget" required>
                                            </div>
                                            <div class="col-3">
                                                <label for="annual_income" class="form-label">Annual Income</label>
                                                <input type="number" class="form-control" id="annual_income" name="annual_income" required>
                                            </div>
                                            <div class="col-3">
                                                <label for="monthly_income" class="form-label">Monthly Income</label>
                                                <input type="number" class="form-control" id="monthly_income" name="monthly_income" required>
                                            </div>
                                            <div class="col-3">
                                                <label for="weekly_income" class="form-label">Weekly Income</label>
                                                <input type="number" class="form-control" id="weekly_income" name="weekly_income" required>
                                            </div>
                                            <div class="col-3">
                                                <label for="household_annual_income" class="form-label">Household Annual Income</label>
                                                <input type="number" class="form-control" id="household_annual_income" name="household_annual_income" required>
                                            </div>
                                            <div class="col-3">
                                                <label for="household_monthly_income" class="form-label">Household Monthly Income</label>
                                                <input type="number" class="form-control" id="household_monthly_income" name="household_monthly_income" required>
                                            </div>
                                            <div class="col-3">
                                                <label for="household_weekly_income" class="form-label">Household Weekly Income</label>
                                                <input type="number" class="form-control" id="household_weekly_income" name="household_weekly_income" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel mt-4">
                                    <h4 class="panel-title">Medical Information</h4>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-6">
                                                <label for="medications" class="form-label">Medications</label>
                                                <textarea class="form-control" id="medications" name="medications"></textarea>
                                            </div>
                                            <div class="col-6">
                                                <label for="conditions" class="form-label">Conditions</label>
                                                <textarea class="form-control" id="conditions" name="conditions"></textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-3">
                                                <label for="is_smoker" class="for-label">Is smoker?</label>
                                                <select name="is_smoker" class="form-select">
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                            <div class="col-3">
                                                <label for="has_diabetes" class="for-label">Has diabetes?</label>
                                                <select name="has_diabetes" class="form-select">
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                            <div class="col-3">
                                                <label for="has_cancer" class="for-label">Has cancer?</label>
                                                <select name="has_cancer" class="form-select">
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                            <div class="col-3">
                                                <label for="has_heart_disease" class="for-label">Has heart disease?</label>
                                                <select name="has_heart_disease" class="form-select">
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-3">
                                                <label for="pcp_name" class="form-label">PCP Name</label>
                                                <input type="text" class="form-control" id="pcp_name" name="pcp_name">
                                            </div>
                                            <div class="col-3">
                                                <label for="pcp_id" class="form-label">PCP ID</label>
                                                <input type="text" class="form-control" id="pcp_id" name="pcp_id">
                                            </div>
                                            <div class="col-3">
                                                <label for="pcp_office" class="form-label">PCP Office</label>
                                                <input type="text" class="form-control" id="pcp_office" name="pcp_office">
                                            </div>
                                            <div class="col-3">
                                                <label for="mrn" class="form-label">MRN</label>
                                                <input type="text" class="form-control" id="mrn" name="mrn">
                                            </div>
                                            <div class="col-3">
                                                <label for="empi" class="form-label">EMPI</label>
                                                <input type="text" class="form-control" id="empi" name="empi">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel mt-4">
                                    <h4 class="panel-title">Medicare Information</h4>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-2">
                                                <label for="medicare_claim_number" class="form-label">Medicare claim Number</label>
                                                <input type="text" class="form-control" id="medicare_claim_number" name="medicare_claim_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicare_part_a" class="form-label">Medicare Part A</label>
                                                <input type="text" class="form-control" id="medicare_part_a" name="medicare_part_a">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicare_part_b" class="form-label">Medicare Part B</label>
                                                <input type="text" class="form-control" id="medicare_part_b" name="medicare_part_b">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicaid_number" class="form-label">Medicid Number</label>
                                                <input type="text" class="form-control" id="medicaid_number" name="medicaid_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicaid_level" class="form-label">Medicaid Level</label>
                                                <select name="medicaid_level" class="form-select">
                                                    <option value="1">Level 1</option>
                                                    <option value="2">Level 2</option>
                                                    <option value="3">Level 3</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="enrollment_eligibility" class="form-label">Enrollment Eligibility</label>
                                                <select name="enrollment_eligibility" class="form-select">
                                                    <option value="1">Level 1</option>
                                                    <option value="2">Level 2</option>
                                                    <option value="3">Level 3</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="scope_of_appointment" class="form-label">Scope of appointment</label>
                                                <select name="scope_of_appointment" class="form-select">
                                                    <option value="1">Level 1</option>
                                                    <option value="2">Level 2</option>
                                                    <option value="3">Level 3</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="medicaid_username" class="form-label">Medicid Username</label>
                                                <input type="text" class="form-control" id="medicaid_username" name="medicaid_username">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicaid_password" class="form-label">Medicid Password</label>
                                                <input type="text" class="form-control" id="medicaid_password" name="medicaid_password">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel mt-4">
                                    <h4 class="panel-title">Legal Information</h4>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-2">
                                                <label for="ssn" class="form-label">SSN</label>
                                                <input type="text" class="form-control" id="ssn" name="ssn">
                                            </div>
                                            <div class="col-2">
                                                <label for="tax_filing" class="form-label">Tax Filing</label>
                                                <select name="tax_filing" class="form-select">
                                                    <option value="1">Single</option>
                                                    <option value="2">Married</option>
                                                    <option value="3">Head of Household</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="drivers_license" class="form-label">Driver's License</label>
                                                <input type="text" class="form-control" id="drivers_license" name="drivers_license">
                                            </div>
                                            <div class="col-2">
                                                <label for="drivers_license_state" class="form-label">Driver's License State</label>
                                                <select name="drivers_license_state" class="form-select">
                                                    <option value="1">California</option>
                                                    <option value="2">Texas</option>
                                                    <option value="3">Florida</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="drivers_license_exp" class="form-label">Driver's License Expiration</label>
                                                <input type="date" class="form-control" id="drivers_license_exp" name="drivers_license_exp">
                                            </div>
                                            <div class="col-2">
                                                <label for="mothers_maiden_name" class="form-label">Mother's Maiden Name</label>
                                                <input type="text" class="form-control" id="mothers_maiden_name" name="mothers_maiden_name">
                                            </div>
                                            <div class="col-2">
                                                <label for="legal_status" class="form-label">Legal Status</label>
                                                <select name="legal_status" class="form-select">
                                                    <option value="1">Citizen</option>
                                                    <option value="2">Permanent Resident</option>
                                                    <option value="3">Work Visa</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="immegration_document" class="form-label">Immegration Document</label>
                                                <select name="immegration_document" class="form-select">
                                                    <option value="1">Passport</option>
                                                    <option value="2">Visa</option>
                                                    <option value="3">Green Card</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="alien_number" class="form-label">Alien #</label>
                                                <input type="text" class="form-control" id="alien_number" name="alien_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="i_94_number" class="form-label">I-94 #</label>
                                                <input type="text" class="form-control" id="i_94_number" name="i_94_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="green_card_number" class="form-label">Green Card #</label>
                                                <input type="text" class="form-control" id="green_card_number" name="green_card_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="immigration_status" class="form-label">Immigration Statuses</label>
                                                <select name="immigration_statuses" class="form-select">
                                                    <option value="1">Citizen</option>
                                                    <option value="2">Permanent Resident</option>
                                                    <option value="3">Work Visa</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="other-statuses" class="form-label">Other Statuses</label>
                                                <select name="other-statuses" class="form-select">
                                                    <option value="1">Citizen</option>
                                                    <option value="2">Permanent Resident</option>
                                                    <option value="3">Work Visa</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="savis_id" class="form-label">Savis ID</label>
                                                <input type="text" class="form-control" id="savis_id" name="savis_id">
                                            </div>
                                            <div class="col-2">
                                                <label for="passport" class="form-label">Passport</label>
                                                <input type="text" class="form-control" id="passport" name="passport">
                                            </div>
                                            <div class="col-2">
                                                <label for="passport_country" class="form-label">Passport Country</label>
                                                <select name="passport_country" class="form-select">
                                                    <option value="1">USA</option>
                                                    <option value="2">Canada</option>
                                                    <option value="3">Mexico</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="passport_expiration" class="form-label">Passport Expiration</label>
                                                <input type="date" class="form-control" id="passport_expiration" name="passport_expiration">
                                            </div>
                                            <div class="col-2">
                                                <label for="ead_card_number" class="form-label">EAD Card Number</label>
                                                <input type="text" class="form-control" id="ead_card_number" name="ead_card_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="ead_card_code" class="form-label">EAD Card Code</label>
                                                <input type="text" class="form-control" id="ead_card_code" name="ead_card_code">
                                            </div>
                                            <div class="col-2">
                                                <label for="ead_card_expiration" class="form-label">EAD Card Expiration</label>
                                                <input type="date" class="form-control" id="ead_card_expiration" name="ead_card_expiration">
                                            </div>
                                            <div class="col-2">
                                                <label for="naturalization" class="form-label">Naturalization</label>
                                                <input type="text" class="form-control" id="naturalization" name="naturalization">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel mt-4">
                                    <h4 class="panel-title">Insurance Information</h4>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-2">
                                                <label for="intrested_in" class="form-label">Intrested In</label>
                                                <select name="intrested_in" class="form-select">
                                                    <option value="1">Health</option>
                                                    <option value="2">Life</option>
                                                    <option value="3">Auto</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="insured_premium" class="form-label">Insured Premium</label>
                                                <input type="number" class="form-control" id="insured_premium" name="insured_premium">
                                            </div>
                                            <div class="col-2">
                                                <label for="insured_carrier" class="form-label">Insured Carrier</label>
                                                <input type="text" class="form-control" id="insured_carrier" name="insured_carrier">
                                            </div>
                                            <div class="col-2">
                                                <label for="insured_intent" class="form-label">Insured Intent</label>
                                                <select name="insured_intent" class="form-select">
                                                    <option value="1">Health</option>
                                                    <option value="2">Life</option>
                                                    <option value="3">Auto</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="term_wanted" class="form-label">Term Wanted</label>
                                                <input type="text" class="form-control" id="term_wanted" name="term_wanted">
                                            </div>
                                            <div class="col-2">
                                                <label for="coverage_wanted" class="form-label">Coverage Wanted</label>
                                                <input type="text" class="form-control" id="coverage_wanted" name="coverage_wanted">
                                            </div>
                                            <div class="col-2">
                                                <label for="is_insured" class="form-label">Is Insured ?</label>
                                                <select name="is_insured" class="form-select">
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Dependents Tab -->
                        <div class="tab-pane" id="dependents" role="tabpanel">
                            <form action="" method="POST">
                                @csrf
                                <!-- Dependents Form Fields -->
                                <div class="row">
                                    <div class="col-3">
                                        <label for="first_name" class="form-label">First Name</label>
                                        <input type="text" class="form-control" id="first_name" name="first_name" required>
                                    </div>
                                    <div class="col-3">
                                        <label for="middle_name" class="form-label">Middle Name</label>
                                        <input type="text" class="form-control" id="middle_name" name="middle_name">
                                    </div>
                                    <div class="col-3">
                                        <label for="last_name" class="form-label">Last Name</label>
                                        <input type="text" class="form-control" id="last_name" name="last_name" required>
                                    </div>
                                    <div class="col-3">
                                        <label for="relationship" class="form-label">Relationship</label>
                                        <select name="relationship" class="form-select" required>
                                            <option value="spouse">Spouse</option>
                                            <option value="child">Child</option>
                                            <option value="parent">Parent</option>
                                            <option value="sibling">Sibling</option>
                                        </select>
                                    </div>
                                    <div class="col-3">
                                        <label for="gender" class="form-label">Gender</label>
                                        <select name="gender" class="form-select" required>
                                            <option value="male">Male</option>
                                            <option value="female">Female</option>
                                            <option value="other">Other</option>
                                        </select>
                                    </div>
                                    <div class="col-3">
                                        <label for="phone_number" class="form-label">Phone Number</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="phone_number" name="phone_number" required>
                                            <select class="form-select" id="phone_type" name="phone_type" style="max-width: 150px;" required>
                                                <option value="" disabled selected>Select type</option>
                                                <option value="mobile">Mobile</option>
                                                <option value="home">Home</option>
                                                <option value="work">Work</option>
                                            </select>
                                        </div>
                                        @error('phone_number')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-3">
                                        <label for="phone_2" class="form-label">Phone2</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="phone_2" name="phone_2">
                                            <select class="form-select" id="phone_type_2" name="phone_type_2" style="max-width: 150px;">
                                                <option value="" disabled selected>Select type</option>
                                                <option value="mobile">Mobile</option>
                                                <option value="home">Home</option>
                                                <option value="work">Work</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <label for="phone_3" class="form-label">Phone3</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="phone_3" name="phone_3">
                                            <select class="form-select" id="phone_type_3" name="phone_type_3" style="max-width: 150px;">
                                                <option value="" disabled selected>Select type</option>
                                                <option value="mobile">Mobile</option>
                                                <option value="home">Home</option>
                                                <option value="work">Work</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <label for="dob" class="form-label">Date of Birth</label>
                                        <input type="date" class="form-control" id="dob" name="dob" required>
                                        @error('dob')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-3">
                                        <label for="age" class="form-label">Age</label>
                                        <input type="number" class="form-control" id="age" name="age" required>
                                        @error('age')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-3">
                                        <label for="height" class="form-label">Height</label>
                                        <input type="text" class="form-control" id="height" name="height">
                                    </div>
                                    <div class="col-3">
                                        <label for="weight" class="form-label">Weight</label>
                                        <input type="text" class="form-control" id="weight" name="weight">
                                    </div>
                                    <div class="col-3">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" class="form-control" id="email" name="email">
                                        @error('email')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-3">
                                        <label for="email_2" class="form-label">Email 2</label>
                                        <input type="email" class="form-control" id="email_2" name="email_2">
                                    </div>
                                    <div class="col-3">
                                        <label for="language" class="form-label">Language</label>
                                        <select name="language" class="form-select">
                                            <option value="english">English</option>
                                            <option value="spanish">Spanish</option>
                                            <option value="french">French</option>
                                        </select>
                                    </div>
                                    <div class="col-3">
                                        <label for="annual_income" class="form-label">Annual Income</label>
                                        <input type="number" class="form-control" id="annual_income" name="annual_income">
                                    </div>
                                    <div class="col-3">
                                        <label for="occupation" class="form-label">Occupation</label>
                                        <input type="text" class="form-control" id="occupation" name="occupation">
                                    </div>
                                    <div class="col-3">
                                        <label for="ssn" class="form-label">SSN</label>
                                        <input type="text" class="form-control" id="ssn" name="ssn">
                                    </div>
                                    <div class="col-3">
                                        <label for="address_same_as_contact" class="form-label">Address is same as contact</label>
                                        <select name="address_same_as_contact" class="form-select">
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="panel mt-4">
                                    <h4 class="panel-title">Medical Information</h4>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-3">
                                                <label for="medications" class="form-label">Medications</label>
                                                <input class="form-control" id="medications" name="medications">
                                            </div>
                                            <div class="col-3">
                                                <label for="conditions" class="form-label">Conditions</label>
                                                <input class="form-control" id="conditions" name="conditions">
                                            </div>
                                            <div class="col-3">
                                                <label for="mrn" class="form-label">MRN</label>
                                                <input type="text" class="form-control" id="mrn" name="mrn">
                                            </div>
                                            <div class="col-3">
                                                <label for="empi" class="form-label">EMPI</label>
                                                <input type="text" class="form-control" id="empi" name="empi">
                                            </div>
                                            <div class="col-3">
                                                <label for="pcp_name" class="form-label">PCP Name</label>
                                                <input type="text" class="form-control" id="pcp_name" name="pcp_name">
                                            </div>
                                            <div class="col-3">
                                                <label for="pcp_id" class="form-label">PCP ID</label>
                                                <input type="text" class="form-control" id="pcp_id" name="pcp_id">
                                            </div>
                                            <div class="col-3">
                                                <label for="pcp_office" class="form-label">PCP Office</label>
                                                <input type="text" class="form-control" id="pcp_office" name="pcp_office">
                                            </div>
                                            <div class="col-3">
                                                <label for="smoker" class="form-label">Smoker</label>
                                                <select name="smoker" class="form-select">
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                            <div class="col-3">
                                                <label for="student" class="form-label">Student</label>
                                                <select name="student" class="form-select">
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel mt-4">
                                    <h4 class="panel-title">Medicare Information</h4>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-2">
                                                <label for="medicare_claim_number" class="form-label">Medicare claim Number</label>
                                                <input type="text" class="form-control" id="medicare_claim_number" name="medicare_claim_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicare_part_a" class="form-label">Medicare Part A</label>
                                                <input type="text" class="form-control" id="medicare_part_a" name="medicare_part_a">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicare_part_b" class="form-label">Medicare Part B</label>
                                                <input type="text" class="form-control" id="medicare_part_b" name="medicare_part_b">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicaid_number" class="form-label">Medicid Number</label>
                                                <input type="text" class="form-control" id="medicaid_number" name="medicaid_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicaid_level" class="form-label">Medicaid Level</label>
                                                <select name="medicaid_level" class="form-select">
                                                    <option value="1">Level 1</option>
                                                    <option value="2">Level 2</option>
                                                    <option value="3">Level 3</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="enrollment_eligibility" class="form-label">Enrollment Eligibility</label>
                                                <select name="enrollment_eligibility" class="form-select">
                                                    <option value="1">Level 1</option>
                                                    <option value="2">Level 2</option>
                                                    <option value="3">Level 3</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="medicaid_username" class="form-label">Medicid Username</label>
                                                <input type="text" class="form-control" id="medicaid_username" name="medicaid_username">
                                            </div>
                                            <div class="col-2">
                                                <label for="medicaid_password" class="form-label">Medicid Password</label>
                                                <input type="text" class="form-control" id="medicaid_password" name="medicaid_password">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel mt-4">
                                    <h4 class="panel-title">Legal Information</h4>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-2">
                                                <label for="legal_status" class="form-label">Legal Status</label>
                                                <select name="legal_status" class="form-select">
                                                    <option value="1">Citizen</option>
                                                    <option value="2">Permanent Resident</option>
                                                    <option value="3">Work Visa</option>
                                                </select>
                                            </div>

                                            <div class="col-2">
                                                <label for="immegration_document" class="form-label">Immegration Document</label>
                                                <select name="immegration_document" class="form-select">
                                                    <option value="1">Passport</option>
                                                    <option value="2">Visa</option>
                                                    <option value="3">Green Card</option>
                                                </select>
                                            </div>

                                            <div class="col-2">
                                                <label for="alien_number" class="form-label">Alien #</label>
                                                <input type="text" class="form-control" id="alien_number" name="alien_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="i_94_number" class="form-label">I-94 #</label>
                                                <input type="text" class="form-control" id="i_94_number" name="i_94_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="green_card_number" class="form-label">Green Card #</label>
                                                <input type="text" class="form-control" id="green_card_number" name="green_card_number">
                                            </div>
                                            <div class="col-2">
                                                <label for="savis_id" class="form-label">Savis ID</label>
                                                <input type="text" class="form-control" id="savis_id" name="savis_id">
                                            </div>
                                            <div class="col-2">
                                                <label for="passport" class="form-label">Passport</label>
                                                <input type="text" class="form-control" id="passport" name="passport">
                                            </div>
                                            <div class="col-2">
                                                <label for="passport_country" class="form-label">Passport Country</label>
                                                <select name="passport_country" class="form-select">
                                                    <option value="1">USA</option>
                                                    <option value="2">Canada</option>
                                                    <option value="3">Mexico</option>
                                                </select>
                                            </div>
                                            <div class="col-2">
                                                <label for="passport_expiration" class="form-label">Passport Expiration</label>
                                                <input type="date" class="form-control" id="passport_expiration" name="passport_expiration">
                                            </div>

                                            <div class="col-2">
                                                <label for="employment_card" class="form-label">Employment Card</label>
                                                <input type="text" class="form-control" id="employment_card" name="employment_card">
                                            </div>
                                            <div class="col-2">
                                                <label for="employment_code" class="form-label">Employment Code</label>
                                                <input type="text" class="form-control" id="employment_code" name="employment_code">
                                            </div>
                                            <div class="col-2">
                                                <label for="employment_expiration" class="form-label">Employment Expiration</label>
                                                <input type="date" class="form-control" id="employment_expiration" name="employment_expiration">
                                            </div>
                                            <div class="col-2">
                                                <label for="naturalization" class="form-label">Naturalization</label>
                                                <input type="text" class="form-control" id="naturalization" name="naturalization">
                                            </div>

                                            <div class="col-2">
                                                <label for="immigration_status" class="form-label">Immigration Statuses</label>
                                                <select name="immigration_statuses" class="form-select">
                                                    <option value="1">Citizen</option>
                                                    <option value="2">Permanent Resident</option>
                                                    <option value="3">Work Visa</option>
                                                </select>
                                            </div>

                                            <div class="col-2">
                                                <label for="other-statuses" class="form-label">Other Statuses</label>
                                                <select name="other-statuses" class="form-select">
                                                    <option value="1">Citizen</option>
                                                    <option value="2">Permanent Resident</option>
                                                    <option value="3">Work Visa</option>
                                                </select>
                                            </div>

                                            <div class="col-2">
                                                <label for="exclude-from-policies" class="form-label">Exclude from Policies ?</label>
                                                <select name="exclude-from-policies" class="form-select">
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>


                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        {{-- Opporunities Tab --}}
                        <div class="tab-pane" id="opportunities" role="tabpanel">
                            <form action="" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-6">
                                        <label for="carrier" class="form-label">Carrier</label>
                                        <select name="carrier" class="form-select">
                                            <option value="1">Carrier 1</option>
                                            <option value="2">Carrier 2</option>
                                            <option value="3">Carrier 3</option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label for="product" class="form-label">Product</label>
                                        <select name="product" class="form-select">
                                            <option value="1">Product 1</option>
                                            <option value="2">Product 2</option>
                                            <option value="3">Product 3</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        <label for="application-number" class="form-label">Application Number</label>
                                        <input type="text" class="form-control" id="application-number" name="application-number">
                                    </div>
                                    <div class="col-2">
                                        <label for="policy-number" class="form-label">Policy Number</label>
                                        <input type="text" class="form-control" id="policy-number" name="policy-number">
                                    </div>
                                    <div class="col-2">
                                        <label for="member-id" class="form-label">Member ID</label>
                                        <input type="text" class="form-control" id="member-id" name="member-id">
                                    </div>
                                    <div class="col-2">
                                        <label for="policy-name" class="form-label">Policy Name</label>
                                        <input type="text" class="form-control" id="policy-name" name="policy-name">
                                    </div>
                                    <div class="col-2">
                                        <label for="policy-code" class="form-label">Policy Code</label>
                                        <input type="text" class="form-control" id="policy-code" name="policy-code">
                                    </div>
                                    <div class="col-2">
                                        <label for="primary-policy" class="form-label">Primary Policy</label>
                                        <select name="primary-policy" class="form-select">
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>
                                    <div class="col-2">
                                        <label for="premium" class="form-label">Premium</label>
                                        <input type="number" class="form-control" id="premium" name="premium">
                                    </div>
                                    <div class="col-2">
                                        <label for="enrollment-fee" class="form-label">Enrollment Fee</label>
                                        <input type="number" class="form-control" id="enrollment-fee" name="enrollment-fee">
                                    </div>
                                    <div class="col-2">
                                        <label for="admin-fee" class="form-label">Admin Fee</label>
                                        <input type="number" class="form-control" id="admin-fee" name="admin-fee">
                                    </div>
                                    <div class="col-2">
                                        <label for="deposit" class="form-label">Deposit</label>
                                        <input type="number" class="form-control" id="deposit" name="deposit">
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Policies Tab -->
                        <div class="tab-pane" id="policies" role="tabpanel">
                            <form action="" method="POST">
                                @csrf
                                <!-- Policies Form Fields -->
                                <div id="policies-container">
                                    <div class="input-group mb-2">
                                        <input type="text" class="form-control" name="policies[]" placeholder="Enter policy name" required>
                                        <button type="button" class="btn btn-outline-secondary add-policy"><i class="fas fa-plus"></i></button>
                                        <button type="button" class="btn btn-outline-danger remove-policy d-none"><i class="fas fa-minus"></i></button>
                                    </div>
                                </div>
                                <div class="input-group mb-2 template d-none">
                                    <input type="text" class="form-control" name="policies[]" placeholder="Enter policy name" required>
                                    <button type="button" class="btn btn-outline-secondary add-policy"><i class="fas fa-plus"></i></button>
                                    <button type="button" class="btn btn-outline-danger remove-policy"><i class="fas fa-minus"></i></button>
                                </div>
                                <button type="submit" class="btn btn-primary">Add Policies</button>
                            </form>
                        </div>

                        <!-- Notes Tab -->
                        <div class="tab-pane" id="notes" role="tabpanel">
                            <form action="" method="POST">
                                @csrf
                                <!-- Notes Form Fields -->
                                <div id="notes-container">
                                    <div class="input-group mb-2">
                                        <textarea class="form-control" name="notes[]" placeholder="Enter note" required></textarea>
                                        <button type="button" class="btn btn-outline-secondary add-note"><i class="fas fa-plus"></i></button>
                                        <button type="button" class="btn btn-outline-danger remove-note d-none"><i class="fas fa-minus"></i></button>
                                    </div>
                                </div>
                                <div class="input-group mb-2 template d-none">
                                    <textarea class="form-control" name="notes[]" placeholder="Enter note" required></textarea>
                                    <button type="button" class="btn btn-outline-secondary add-note"><i class="fas fa-plus"></i></button>
                                    <button type="button" class="btn btn-outline-danger remove-note"><i class="fas fa-minus"></i></button>
                                </div>
                                <button type="submit" class="btn btn-primary">Add Notes</button>
                            </form>
                        </div>

                        <!-- Recording Tab -->
                        <div class="tab-pane" id="recording" role="tabpanel">
                            <form action="" method="POST" enctype="multipart/form-data">
                                @csrf
                                <!-- Recording Form Fields -->
                                <div class="mb-3">
                                    <label for="recording_file" class="form-label">Upload Recording</label>
                                    <input type="file" class="form-control" id="recording_file" name="recording_file">
                                    @error('recording_file')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <button type="submit" class="btn btn-primary">Upload Recording</button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-specific-script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const containers = {
            dependents: document.getElementById('dependents-container'),
            policies: document.getElementById('policies-container'),
            notes: document.getElementById('notes-container')
        };

        // Add and Remove functionality for dependents, policies, and notes
        function handleTabAction(containerId, addClass, removeClass) {
            const container = containers[containerId];

            container.addEventListener('click', function (e) {
                if (e.target.classList.contains(addClass)) {
                    e.preventDefault();
                    const template = document.querySelector(`.${containerId}-container .template`).cloneNode(true);
                    template.classList.remove('template', 'd-none');
                    container.appendChild(template);
                }

                if (e.target.classList.contains(removeClass)) {
                    e.preventDefault();
                    e.target.closest('.input-group').remove();
                    updateRemoveButtonVisibility(containerId);
                }
            });

            function updateRemoveButtonVisibility(id) {
                const inputGroups = containers[id].querySelectorAll('.input-group');
                const removeButtons = containers[id].querySelectorAll(`.${removeClass}`);
                removeButtons.forEach(button => button.classList.toggle('d-none', inputGroups.length <= 1));
            }

            // Initialize remove button visibility
            updateRemoveButtonVisibility(containerId);
        }

        // Initialize handlers for dependents, policies, and notes
        handleTabAction('dependents', 'add-dependent', 'remove-dependent');
        handleTabAction('policies', 'add-policy', 'remove-policy');
        handleTabAction('notes', 'add-note', 'remove-note');
    });
</script>
@endsection