@extends('layouts.master')

@section('title', 'Create Customers')
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/quill.snow.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.6.2/dist/select2-bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/flag-icon.css') }}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  



<!-- Admin CSS-->

<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/admin/admin_css.css') }}">

<!-- End Admin CSS -->


@endsection

@section('breadcrumb')
<div class="header-logo-wrapper col-auto">
  <div class="logo-wrapper"><a href="{{ route('admin.dashboard') }}"><img class="img-fluid for-light"
        src="{{ asset('assets/images/logo/logo.png') }}" alt="" /><img class="img-fluid for-dark"
        src="{{ asset('assets/images/logo/logo_light.png') }}" alt="" /></a></div>
</div>
<div class="col-4 col-xl-4 page-title">
  <h4 class="f-w-700">Create Customers</h4>
  <nav>
    <ol class="breadcrumb justify-content-sm-start align-items-center mb-0">
      <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <i data-feather="home"> </i></a></li>
      <li class="breadcrumb-item f-w-400">Create</li>
      <li class="breadcrumb-item f-w-400 active">Customers</li>
    </ol>
  </nav>
</div>
@endsection

@section('main_content')
<!-- Container-fluid starts-->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h4>Create new individual customer</h4>
          <p class="f-m-light mt-1">
            Please fill in this secure form to create a comprehensive client profile. Fields marked with <span class="text-danger">*</span> are required for policy compliance and underwriting purposes.</p>
        </div>
        <div class="card-body">
          <div class="vertical-main-wizard">
            <div class="row g-3">
              <form id="participantForm" data-url="{{ route('admin.participants.store') }}" class="row g-3 needs-validation custom-input" enctype="multipart/form-data">

              <div class="col-xxl-3 col-xl-4 col-12">
                <div class="position-sticky top-0">
                  <div class="nav flex-column header-vertical-wizard" id="wizard-tab" role="tablist" aria-orientation="vertical">

                    <!-- Personal -->
                    <a class="nav-link active" id="personal-tab" data-bs-toggle="pill" href="#personal" role="tab">
                      <div class="vertical-wizard">
                        <div class="stroke-icon-wizard"><i class="fa fa-user"></i></div>
                        <div class="vertical-wizard-content">
                          <h6>Personal Info</h6>
                          <p>Name, Gender, DOB</p>
                        </div>
                      </div>
                    </a>

                    <!-- Identification -->
                    <a class="nav-link" id="identification-tab" data-bs-toggle="pill" href="#identification" role="tab">
                      <div class="vertical-wizard">
                        <div class="stroke-icon-wizard"><i class="fa fa-id-card"></i></div>
                        <div class="vertical-wizard-content">
                          <h6>Identification</h6>
                          <p>TIN, National ID, Passport</p>
                        </div>
                      </div>
                    </a>

                    <!-- Employment -->
                    <a class="nav-link" id="employment-tab" data-bs-toggle="pill" href="#employment" role="tab">
                      <div class="vertical-wizard">
                        <div class="stroke-icon-wizard"><i class="fa fa-briefcase"></i></div>
                        <div class="vertical-wizard-content">
                          <h6>Employment Info</h6>
                          <p>Job, Employer, Income</p>
                        </div>
                      </div>
                    </a>

                    <!-- Contact -->
                    <a class="nav-link" id="contact-tab" data-bs-toggle="pill" href="#contact" role="tab">
                      <div class="vertical-wizard">
                        <div class="stroke-icon-wizard"><i class="fa fa-envelope"></i></div>
                        <div class="vertical-wizard-content">
                          <h6>Contact Info</h6>
                          <p>Phones, Emails</p>
                        </div>
                      </div>
                    </a>

                    <!-- Address -->
                    <a class="nav-link" id="address-tab" data-bs-toggle="pill" href="#individual-address" role="tab">
                      <div class="vertical-wizard">
                        <div class="stroke-icon-wizard"><i class="fa fa-map-marker"></i></div>
                        <div class="vertical-wizard-content">
                          <h6>Address Info</h6>
                          <p>Region, City, Woreda</p>
                        </div>
                      </div>
                    </a>

                    <!-- Policy -->
                    <a class="nav-link" id="policy-tab" data-bs-toggle="pill" href="#policy" role="tab">
                      <div class="vertical-wizard">
                        <div class="stroke-icon-wizard"><i class="fa fa-shield"></i></div>
                        <div class="vertical-wizard-content">
                          <h6>Policy Info</h6>
                          <p>Policy No, Coverage</p>
                        </div>
                      </div>
                    </a>

                    <!-- KYC & AML -->
                    <a class="nav-link" id="kyc-tab" data-bs-toggle="pill" href="#kyc" role="tab">
                      <div class="vertical-wizard">
                        <div class="stroke-icon-wizard"><i class="fa fa-check-square-o"></i></div>
                        <div class="vertical-wizard-content">
                          <h6>KYC & AML</h6>
                          <p>Verification & Screening</p>
                        </div>
                      </div>
                    </a>

                    <!-- Next of Kin -->
                    <a class="nav-link" id="kin-tab" data-bs-toggle="pill" href="#kin" role="tab">
                      <div class="vertical-wizard">
                        <div class="stroke-icon-wizard"><i class="fa fa-users"></i></div>
                        <div class="vertical-wizard-content">
                          <h6>Next of Kin</h6>
                          <p>Name, Relation, Phone</p>
                        </div>
                      </div>
                    </a>

                    <!-- Preferences -->
                    <a class="nav-link" id="preferences-tab" data-bs-toggle="pill" href="#preferences" role="tab">
                      <div class="vertical-wizard">
                        <div class="stroke-icon-wizard"><i class="fa fa-cogs"></i></div>
                        <div class="vertical-wizard-content">
                          <h6>Preferences</h6>
                          <p>Language & Consents</p>
                        </div>
                      </div>
                    </a>

                    <!-- Buttons -->
                    <div class="p-2 border-bottom bg-white">
                      <button type="submit" id="submitBtn" class="btn btn-primary w-100">
                        <i class="fa fa-paper-plane me-1"></i> Submit
                      </button>
                    </div>

                    <div class="p-2 border-top bg-white">
                      <button type="button" class="btn btn-secondary w-100">
                        <i class="fa fa-save me-1"></i> Save as Draft
                      </button>
                    </div>

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

                <div class="col-xxl-9 col-xl-8 col-12">
                  <!--Tab Content -->
                  <div class="tab-content" id="wizard-tabContent">
                    <div class="tab-content" id="wizard-tabContent">

                      {{-- PERSONAL INFORMATION --}}
                      <div class="tab-content" id="wizard-tabContent">
                        <div class="tab-pane fade show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
                          <div class="col-12">
                            <div class="card shadow-none border" id="card-personal-info">
                              <div class="card-header">
                                <h4>Basic Customer Information</h4>
                              </div>
                              <div class="card-body row g-3">

                                <!-- First Name EN -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="first_name_en">First Name (EN) <span class="text-danger">*</span></label>
                                  <input class="form-control" id="first_name_en" name="first_name_en" type="text" placeholder="Enter first name in English">
                                </div>

                                <!-- Middle Name EN -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="middle_name_en">Middle Name (EN) <span class="text-danger">*</span></label>
                                  <input class="form-control" id="middle_name_en" name="middle_name_en" type="text" placeholder="Enter middle name in English">
                                </div>

                                <!-- Last Name EN -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="last_name_en">Last Name (EN) <span class="text-danger">*</span></label>
                                  <input class="form-control" id="last_name_en" name="last_name_en" type="text" placeholder="Enter last name in English">
                                </div>

                                <!-- First Name AM -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="first_name_am">First Name (AM)</label>
                                  <input class="form-control" id="first_name_am" name="first_name_am" type="text" placeholder="አማርኛ ስም ያስገቡ">
                                </div>

                                <!-- Middle Name AM -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="middle_name_am">Middle Name (AM)</label>
                                  <input class="form-control" id="middle_name_am" name="middle_name_am" type="text" placeholder="አማርኛ የአባት ስም ያስገቡ">
                                </div>

                                <!-- Last Name AM -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="last_name_am">Last Name (AM)</label>
                                  <input class="form-control" id="last_name_am" name="last_name_am" type="text" placeholder="አማርኛ የአያት ስም ያስገቡ">
                                </div>

                                <!-- Preferred Name -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="preferred_name">Preferred Name</label>
                                  <input class="form-control" id="preferred_name" name="preferred_name" type="text" placeholder="Enter preferred name">
                                </div>

                                <!-- Gender -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="gender">Gender <span class="text-danger">*</span></label>
                                  <select class="form-select" id="gender" name="gender">
                                    <option selected disabled value="">Choose...</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                  </select>
                                </div>

                                <!-- Date of Birth -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="date_of_birth">Date of Birth <span class="text-danger">*</span></label>
                                  <input class="form-control" id="date_of_birth" name="date_of_birth" type="date">
                                </div>

                                <!-- Marital Status -->
                                <div class="col-xxl-4 col-sm-6">
                                  <label class="form-label" for="marital_status">Marital Status <span class="text-danger">*</span></label>
                                  <select class="form-select" id="marital_status" name="marital_status" required>
                                    <option selected disabled value="">Choose...</option>
                                    <option value="single">Single</option>
                                    <option value="married">Married</option>
                                    <option value="divorced">Divorced</option>
                                    <option value="widowed">Widowed</option>
                                  </select>
                                </div>

                                <!-- Profile Picture Upload -->
                                <div class="col-xxl-4 col-sm-6 text-center">
                                    <label class="form-label d-block mb-2">Profile Picture</label>

                                    <div id="profile-dropzone" class="position-relative mx-auto"
                                        style="width:150px; height:150px; border:2px dashed #ced4da; border-radius:50%; overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center;">
                                      
                                        <!-- Preview Image -->
                                        <img id="profile_picture_preview" src="{{ asset('assets/images/avtar/default.png') }}" 
                                            style="width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;">
                                        
                                        <!-- Overlay -->
                                        <div class="dropzone-overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-white"
                                            style="background: rgba(0,0,0,0.5); opacity:0; transition: opacity 0.3s; border-radius:50%;">
                                          <i class="fa fa-camera fa-2x"></i>
                                          <span class="mt-1">Click or Drop Image</span>
                                        </div>

                                        <!-- Hidden file input -->
                                        <input type="file" name="profile_picture" id="profile_picture" accept="image/*" style="display:none;">
                                    </div>
                                </div>



                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      {{-- END PERSONAL INFORMATION --}}



                      <!-- Identification Details -->
                      <div class="tab-pane fade" id="identification" role="tabpanel" aria-labelledby="identification-tab">
                        <div class="col-12">
                          <div class="card shadow-none border" id="card-identification">
                            <div class="card-header"><h4>Identification Details</h4></div>
                            <div class="card-body row g-3">

                              <!-- Identification Type -->
                              <div class="col-xxl-4 col-sm-6">
                                <label class="form-label" for="identification_information_type">Identification Type <span class="text-danger">*</span></label>
                                <select class="form-select" id="identification_information_type" name="identification_information_type">
                                  <option selected disabled value="">Choose...</option>
                                  <option value="Passport">Passport</option>
                                  <option value="Kebele ID">Kebele ID</option>
                                  <option value="National ID">National ID</option>
                                  <option value="Driving License">Driving License</option>
                                  <option value="Student ID">Student ID</option>
                                  <option value="TIN No.">TIN No.</option>
                                  <option value="House Number">House Number</option>
                                  <option value="Letter from corporate">Letter from corporate</option>
                                  <option value="Other">Other</option>
                                </select>
                              </div>

                              <!-- Identification Number -->
                              <div class="col-xxl-4 col-sm-6">
                                <label class="form-label" for="identification_number">Identification Number</label>
                                <input class="form-control" id="identification_number" name="identification_number" type="text" placeholder="Enter identification number">
                              </div>

                              <!-- TIN Number -->
                              <div class="col-xxl-4 col-sm-6">
                                <label class="form-label" for="tin_number">TIN Number</label>
                                <input class="form-control" id="tin_number" name="tin_number" type="text" placeholder="Enter TIN number">
                              </div>

                              <!-- National ID -->
                              <div class="col-xxl-4 col-sm-6">
                                <label class="form-label" for="national_id">National ID</label>
                                <input class="form-control" id="national_id" name="national_id" type="text" placeholder="Enter national ID">
                              </div>

                              <!-- Passport Number -->
                              <div class="col-xxl-4 col-sm-6">
                                <label class="form-label" for="passport_number">Passport Number</label>
                                <input class="form-control" id="passport_number" name="passport_number" type="text" placeholder="Enter passport number">
                              </div>

                              <!-- Passport Country -->
                              <div class="col-xxl-4 col-sm-6">
                                <label class="form-label" for="passport_country_id">Passport Country</label>
                                <select class="form-select" id="passport_country_id" name="passport_country_id" style="width:100%">
                                  <option selected disabled value="">Select Country</option>
                                  @foreach($countries as $country)
                                    <option value="{{ $country->id }}" data-iso="{{ strtolower($country->iso_code) }}">
                                      {{ $country->name }}
                                    </option>
                                  @endforeach
                                </select>
                              </div>



                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Identification Details -->



                        <!-- Employment Information -->
                        <div class="tab-pane fade" id="employment" role="tabpanel" aria-labelledby="employment-tab">
                          <div class="col-12">
                            <div class="card shadow-none border" id="card-employment">
                              <div class="card-header"><h4>Employment Information</h4></div>
                              <div class="card-body row g-3">
                                <!-- Occupation -->
                                <div class="col-md-6">
                                  <label class="form-label" for="occupation">Occupation</label>
                                  <input type="text" class="form-control" id="occupation" placeholder="Enter occupation">
                                </div>

                                <!-- Employer Name -->
                                <div class="col-md-6">
                                  <label class="form-label" for="employer_name">Employer Name</label>
                                  <input type="text" class="form-control" id="employer_name" placeholder="Enter employer name">
                                </div>

                                <!-- Employer Address -->
                                <div class="col-12">
                                  <label class="form-label" for="employer_address">Employer Address</label>
                                  <textarea class="form-control" id="employer_address" rows="2" placeholder="Enter employer address"></textarea>
                                </div>

                                <!-- Employment Status -->
                                <div class="col-md-6">
                                  <label class="form-label" for="employment_status">Employment Status</label>
                                  <select class="form-select" id="employment_status" aria-label="Employment status">
                                    <option selected disabled value="">Choose...</option>
                                    <option>Employed</option>
                                    <option>Unemployed</option>
                                    <option>Self-employed</option>
                                    <option>Retired</option>
                                    <option>Student</option>
                                  </select>
                                </div>

                                <!-- Annual Income -->
                                <div class="col-md-6">
                                  <label class="form-label" for="annual_income">Annual Income</label>
                                  <input type="number" step="0.01" class="form-control" id="annual_income" placeholder="Enter income">
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Employment Information -->

                        
                        <!-- Contact Information -->
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                          <div class="col-12">
                            <div class="card shadow-none border" id="card-contact">
                              <div class="card-header"><h4>Contact Information</h4></div>
                              <div class="card-body row g-3">

                                <!-- Mobile Phone -->
                                <div class="col-md-4">
                                  <label for="mobile_phone" class="form-label">Mobile Phone <span class="text-danger">*</span></label>
                                  <input type="tel" class="form-control ethiopian-phone" id="mobile_phone" name="mobile_phone" placeholder="+251 9XX XXX XXX">
                                </div>

                                <!-- Home Phone -->
                                <div class="col-md-4">
                                  <label for="home_phone" class="form-label">Home Phone</label>
                                  <input type="tel" class="form-control" id="home_phone" name="home_phone" placeholder="+251 111 XXX XXX">
                                </div>

                                <!-- Work Phone -->
                                <div class="col-md-4">
                                  <label for="work_phone" class="form-label">Work Phone</label>
                                  <input type="tel" class="form-control" id="work_phone" name="work_phone" placeholder="+251 9XX XXX XXX or +251 111 XXX XXX">
                                </div>

                                <!-- Primary Email -->
                                <div class="col-md-6">
                                  <label for="primary_email" class="form-label">Primary Email <span class="text-danger">*</span></label>
                                  <input type="email" class="form-control" id="primary_email" name="primary_email" placeholder="Enter primary email">
                                </div>

                                <!-- Secondary Email -->
                                <div class="col-md-6">
                                  <label for="secondary_email" class="form-label">Secondary Email</label>
                                  <input type="email" class="form-control" id="secondary_email" name="secondary_email" placeholder="Enter secondary email">
                                </div>

                                <!-- Country -->
                                <div class="col-md-6">
                                  <label for="country_id" class="form-label">Country</label>
                                  <select id="country_id" name="country_id"  class="form-select select2-country" data-toggle="tooltip" title="">
                                    <option value="" disabled selected>Select Country</option>
                                  @foreach($countries as $country)
                                    <option value="{{ $country->id }}" data-iso="{{ strtolower($country->iso_code) }}">
                                      {{ $country->name }}
                                    </option>
                                  @endforeach
                                  </select>
                                </div>

                                <!-- Nationality -->
                                <div class="col-md-6">
                                  <label for="nationality_id" class="form-label">Nationality</label>
                                  <select id="nationality_id" name="nationality_id" class="form-select select2" style="width:100%">
                                    <option value="" disabled selected>Select Nationality</option>
                                    @foreach($nationalities as $nationality)
                                      <option value="{{ $nationality->id }}">{{ $nationality->name }}</option>
                                    @endforeach
                                  </select>
                                </div>
                                                               
                                <!-- Latitude -->
                                <div class="col-md-6">
                                  <label for="latitude" class="form-label">Latitude</label>
                                  <input type="text" class="form-control" id="latitude" name="latitude" placeholder="Enter latitude">
                                </div>

                                <!-- Longitude -->
                                <div class="col-md-6">
                                  <label for="longitude" class="form-label">Longitude</label>
                                  <input type="text" class="form-control" id="longitude" name="longitude" placeholder="Enter longitude">
                                </div>

                                <!-- Button to open modal -->
                                <div class="col-md-12 mt-2">
                                  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#mapModal">
                                    Pick Coordinates
                                  </button>
                                </div>


                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Contact Information -->



                          <!-- Address Information -->
                          <div class="tab-pane fade" id="individual-address" role="tabpanel" aria-labelledby="address-tab">
                            <div class="col-12">
                              <div class="card shadow-none border">
                                <div class="card-header"><h4>Address Information</h4></div>
                                <div class="card-body row g-3">

                                  <!-- Region -->
                                  <div class="col-md-4 position-relative">
                                    <label for="region_id" class="form-label">Administrative Region/City</label> 
                                    <select id="region_id" name="region_id" class="form-select select2"  data-toggle="tooltip" title="">
                                      <option value="" selected disabled>Select Region</option>
                                    </select>
                                   <div id="region-spinner" class="spinner-border d-none"></div>
                                  </div>

                                  <!-- City -->
                                  <div class="col-md-4 position-relative">
                                    <label for="city_id" class="form-label">Sub city/Zone</label>
                                    <select id="city_id" name="city_id" class="form-select select2"  data-toggle="tooltip" title="">
                                      <option value="" selected disabled>Select City</option>
                                    </select>
                                    <div id="city-spinner" class="spinner-border text-primary position-absolute end-0 top-50 translate-middle-y d-none"
                                      style="width: 1rem; height: 1rem;" role="status"></div>
                                  </div>

                                  <!-- Woreda -->
                                  <div class="col-md-4 position-relative">
                                    <label for="woreda_id" class="form-label">Wereda/Town</label>
                                    <select id="woreda_id" name="woreda_id" class="form-select select2"  data-toggle="tooltip" title="">
                                      <option value="" selected disabled>Select Woreda</option>
                                    </select>
                                    <div id="woreda-spinner" class="spinner-border text-primary position-absolute end-0 top-50 translate-middle-y d-none"
                                      style="width: 1rem; height: 1rem;" role="status"></div>
                                  </div>

                                  <!-- Kebele -->
                                  <div class="col-md-4">
                                      <label for="kebele_input" class="form-label">Kebele</label>
                                      <select id="kebele_input" name="kebele_id" class="form-select"></select>
                                  </div>

                                  <!-- House Number -->
                                  <div class="col-md-4">
                                    <label for="house_number" class="form-label">House No.</label>
                                    <input type="text" class="form-control" id="house_number" name="house_number" placeholder="Enter house no">
                                  </div>

                                  <!-- Address Line 1 -->
                                  <div class="col-12">
                                    <label for="address_line1" class="form-label">Address Line 1</label>
                                    <textarea class="form-control" id="address_line1" name="address_line1" rows="2" placeholder="Enter address line 1"></textarea>
                                  </div>

                                  <!-- Address Line 2 -->
                                  <div class="col-12">
                                    <label for="address_line2" class="form-label">Address Line 2</label>
                                    <textarea class="form-control" id="address_line2" name="address_line2" rows="2" placeholder="Enter address line 2"></textarea>
                                  </div>

                                  <!-- Street / Landmark -->
                                  <div class="col-12">
                                    <label for="street_address" class="form-label">Street / Landmark</label>
                                    <div class="input-group">
                                      <input type="text" class="form-control" id="street_address" name="street_address" placeholder="Enter Street or Landmark">
                                      <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#streetPickerModal">
                                        Pick from Map
                                      </button>
                                    </div>
                                  </div>

                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Address Information -->


                          <!-- Policy Tab Content -->
                          <div class="tab-pane fade" id="policy" role="tabpanel" aria-labelledby="policy-tab">
                            <div class="col-12">
                              <div class="card shadow-none border">
                                <div class="card-header"><h4>Policy Information</h4></div>
                                <div class="card-body row g-3">

                                  <!-- Policy Number -->
                                  <div class="col-md-6">
                                    <label for="policy_number" class="form-label">Policy Number <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="policy_number" name="policy_number" placeholder="Enter Policy Number">
                                  </div>

                                  <!-- Product -->
                                  <div class="col-md-6">
                                    <label for="product_id" class="form-label">Product</label>
                                    <select id="product_id" name="product_id" class="form-select select2">
                                      <option value="" selected disabled>Select Product</option>
                                    </select>
                                  </div>

                                  <!-- Template -->
                                  <div class="col-md-6">
                                    <label for="template_id" class="form-label">Template</label>
                                    <select id="template_id" name="template_id" class="form-select select2">
                                      <option value="" selected disabled>Select Template</option>
                                    </select>
                                  </div>

                                  <!-- Coverage Type -->
                                  <div class="col-md-6">
                                    <label for="coverage_type" class="form-label">Coverage Type <span class="text-danger">*</span></label>
                                    <select id="coverage_type" name="coverage_type" class="form-select">
                                      <option value="" selected disabled>Select Coverage</option>
                                      <option value="third_party">Third Party</option>
                                      <option value="comprehensive">Comprehensive</option>
                                      <option value="custom">Custom</option>
                                    </select>
                                  </div>

                                  <!-- Sum Assured -->
                                  <div class="col-md-6">
                                    <label for="sum_assured" class="form-label">Sum Assured</label>
                                    <input type="number" step="0.01" class="form-control" id="sum_assured" name="sum_assured" placeholder="Enter Sum Assured">
                                  </div>

                                  <!-- Contribution Amount -->
                                  <div class="col-md-6">
                                    <label for="contribution_amount" class="form-label">Contribution Amount</label>
                                    <input type="number" step="0.01" class="form-control" id="contribution_amount" name="contribution_amount" placeholder="Enter Contribution">
                                  </div>

                                  <!-- Frequency -->
                                  <div class="col-md-6">
                                    <label for="frequency" class="form-label">Payment Frequency</label>
                                    <select id="frequency" name="frequency" class="form-select">
                                      <option value="" selected disabled>Select Frequency</option>
                                      <option value="monthly">Monthly</option>
                                      <option value="quarterly">Quarterly</option>
                                      <option value="semi_annually">Semi-Annually</option>
                                      <option value="annually">Annually</option>
                                    </select>
                                  </div>

                                  <!-- Start Date -->
                                  <div class="col-md-6">
                                    <label for="start_date" class="form-label">Start Date</label>
                                    <input type="date" class="form-control" id="start_date" name="start_date">
                                  </div>

                                  <!-- End Date -->
                                  <div class="col-md-6">
                                    <label for="end_date" class="form-label">End Date</label>
                                    <input type="date" class="form-control" id="end_date" name="end_date">
                                  </div>

                                  <!-- Status -->
                                  <div class="col-md-6">
                                    <label for="status" class="form-label">Status</label>
                                    <select id="status" name="status" class="form-select">
                                      <option value="" selected disabled>Select Status</option>
                                      <option value="active">Active</option>
                                      <option value="expired">Expired</option>
                                      <option value="cancelled">Cancelled</option>
                                      <option value="pending">Pending</option>
                                    </select>
                                  </div>

                                  <!-- Additional Terms -->
                                  <div class="col-12">
                                    <label for="additional_terms" class="form-label">Additional Terms</label>
                                    <textarea class="form-control" id="additional_terms" name="additional_terms" rows="3" placeholder="Enter additional terms"></textarea>
                                  </div>

                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Policy Tab Content -->


                        <!-- KYC & AML Tab Content -->
                        <div class="tab-pane fade" id="kyc" role="tabpanel" aria-labelledby="kyc-tab">
                          <div class="col-12">
                            <div class="card shadow-none border">
                              <div class="card-header"><h4>KYC & AML Information</h4></div>
                              <div class="card-body row g-3">

                                <!-- KYC Status -->
                                <div class="col-md-6">
                                  <label for="kyc_status" class="form-label">KYC Status</label>
                                  <select id="kyc_status" name="kyc_status" class="form-select">
                                    <option value="" selected disabled>Select Status</option>
                                    <option value="pending">Pending</option>
                                    <option value="verified">Verified</option>
                                    <option value="rejected">Rejected</option>
                                  </select>
                                </div>

                                <!-- AML Screening -->
                                <div class="col-md-6">
                                  <label for="aml_screening" class="form-label">AML Screening</label>
                                  <select id="aml_screening" name="aml_screening" class="form-select">
                                    <option value="" selected disabled>Select Result</option>
                                    <option value="unknown">Unknown</option>
                                    <option value="safe">Safe</option>
                                    <option value="watchlist">Watchlist</option>
                                    <option value="matched">Matched</option>
                                  </select>
                                </div>

                                <!-- Screening Notes -->
                                <div class="col-12">
                                  <label for="screening_notes" class="form-label">Notes / Comments</label>
                                  <textarea class="form-control" id="screening_notes" name="screening_notes" rows="3" placeholder="Enter any notes regarding KYC / AML screening"></textarea>
                                </div>

                                <!-- Verification Date -->
                                <div class="col-md-6">
                                  <label for="verification_date" class="form-label">Verification Date</label>
                                  <input type="date" class="form-control" id="verification_date" name="verification_date">
                                </div>

                                <!-- Verified By -->
                                <div class="col-md-6">
                                  <label for="verified_by" class="form-label">Verified By</label>
                                  <input type="text" class="form-control" id="verified_by" name="verified_by" placeholder="Enter verifier's name">
                                </div>

                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End KYC & AML Tab Content -->

                        <!-- Next of Kin Tab Content -->
                        <div class="tab-pane fade" id="kin" role="tabpanel" aria-labelledby="kin-tab">
                          <div class="col-12">
                            <div class="card shadow-none border">
                              <div class="card-header"><h4>Next of Kin Information</h4></div>
                              <div class="card-body row g-3">

                                <!-- Kin Name -->
                                <div class="col-md-6">
                                  <label for="kin_name" class="form-label">Full Name</label>
                                  <input type="text" class="form-control" id="kin_name" name="kin_name" placeholder="Enter full name">
                                </div>

                                <!-- Relationship -->
                                <div class="col-md-6">
                                  <label for="kin_relation" class="form-label">Relationship</label>
                                  <input type="text" class="form-control" id="kin_relation" name="kin_relation" placeholder="Enter relation (e.g., Father, Spouse)">
                                </div>

                                <!-- Phone -->
                                <div class="col-md-6">
                                  <label for="kin_phone" class="form-label">Phone Number</label>
                                  <input type="text" class="form-control" id="kin_phone" name="kin_phone" placeholder="Enter phone number">
                                </div>

                                <!-- Email (Optional) -->
                                <div class="col-md-6">
                                  <label for="kin_email" class="form-label">Email</label>
                                  <input type="email" class="form-control" id="kin_email" name="kin_email" placeholder="Enter email (optional)">
                                </div>

                                <!-- Address -->
                                <div class="col-12">
                                  <label for="kin_address" class="form-label">Address</label>
                                  <textarea class="form-control" id="kin_address" name="kin_address" rows="2" placeholder="Enter full address"></textarea>
                                </div>

                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Next of Kin Tab Content -->


                          <!-- Preferences Tab Content -->
                          <div class="tab-pane fade" id="preferences" role="tabpanel" aria-labelledby="preferences-tab">
                            <div class="col-12">
                              <div class="card shadow-none border">
                                <div class="card-header"><h4>Preferences</h4></div>
                                <div class="card-body row g-3">

                                  <!-- Preferred Language -->
                                  <div class="col-md-6">
                                      <label for="preferred_language" class="form-label">Preferred Language</label>
                                      <select class="form-select" id="preferred_language" name="preferred_language">
                                          <option value="">Select Language</option>
                                          @foreach($languages as $lang)
                                              <option value="{{ $lang->code }}">
                                                  @if($lang->flag_icon)
                                                      <img src="{{ asset('flags/' . $lang->flag_icon) }}" alt="" style="width:16px; margin-right:4px;">
                                                  @endif
                                                  {{ $lang->native_name }}
                                              </option>
                                          @endforeach
                                      </select>
                                  </div>


                                  <!-- Communication Consent -->
                                  <div class="col-md-6">
                                    <label class="form-label">Communication Consent</label>
                                    <div class="form-check">
                                      <input class="form-check-input" type="checkbox" value="email" id="consent_email" name="consent_email">
                                      <label class="form-check-label" for="consent_email">Email Notifications</label>
                                    </div>
                                    <div class="form-check">
                                      <input class="form-check-input" type="checkbox" value="sms" id="consent_sms" name="consent_sms">
                                      <label class="form-check-label" for="consent_sms">SMS Notifications</label>
                                    </div>
                                  </div>

                                  <!-- Marketing Consent -->
                                  <div class="col-12">
                                    <div class="form-check">
                                      <input class="form-check-input" type="checkbox" value="marketing" id="consent_marketing" name="consent_marketing">
                                      <label class="form-check-label" for="consent_marketing">I agree to receive marketing communications</label>
                                    </div>
                                  </div>

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

                          <!-- End Preferences Tab Content -->




                      
                    </div>
                  </div>
                </div>
<div id="toast-container" class="position-fixed top-0 end-0 p-3" style="z-index: 1100;"></div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Map Modal -->
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="mapModalLabel">Select Location</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="map" style="height: 500px; width: 100%;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" id="saveLocation" class="btn btn-success" data-bs-dismiss="modal">Save Location</button>
      </div>
    </div>
  </div>
</div>
<!-- End Map Modal -->



<!-- Leaflet Street Picker Modal -->

<div class="modal fade" id="streetPickerModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-fullscreen-md-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Pick Street / Landmark</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <!-- Search input (optional, Leaflet Control Geocoder adds its own input) -->
        <div id="streetMap" style="height: 500px;"></div>
      </div>
      <div class="modal-footer">
        <button id="confirmStreetBtn" class="btn btn-primary" data-bs-dismiss="modal">Confirm</button>
      </div>
    </div>
  </div>
</div>

<!-- End Street / Landmark -->

<!-- Container-fluid Ends-->
@endsection


@section('scripts')

<!-- latest jquery-->


<!-- calendar js-->
<script src="{{ asset('assets/js/select2/select2.full.min.js') }}"></script>
<script src="{{ asset('assets/js/select2/select2-custom.js') }}"></script>
<script src="{{ asset('assets/js/editors/quill.js') }}"></script>
<script src="{{ asset('assets/js/custom-add-product4.js') }}"></script>
<script src="{{ asset('assets/js/bookmark/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/custom-validation/validation.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


<!-- Admin Script-->
<script src="{{ asset('assets/js/admin/admin_individual_customers_create.js') }}"></script> 
<script src="{{ asset('assets/js/admin/beneficiary_input_rows.js') }}"></script> 
<script src="{{ asset('assets/js/admin/bootstrap_input.js') }}"></script> 
<script src="{{ asset('assets/js/admin/dropzone_profile.js') }}"></script> 
<script src="{{ asset('assets/js/admin/highlight_card_and_tab.js') }}"></script> 
<script src="{{ asset('assets/js/admin/tab_navigation_and_smooth_scrolling.js') }}"></script> 
<script src="{{ asset('assets/js/admin/map_picker.js') }}"></script> 
<script src="{{ asset('assets/js/admin/participant_submission.js') }}"></script> 


<!--Admin Script--> 


@endsection