@extends('user.layout')

@section('pagename')
    - {{ __('Service Form') }}
@endsection

@section('content')
    <style>
        body {
            background-color: #f0f2f5;
        }

        .emergency-box {
            background-color: #ffffff;
            border-radius: 6px;
            padding: 20px 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            color: #333;
            text-align: center;
            border: 1px solid #e0e0e0;
        }

        .select2-container--default .select2-selection--single {
            height: 35px;
            padding: 6px 12px;
            font-size: 1rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 35px;
        }

        .select2-container--default .select2-selection--single::placeholder {
            color: #000;
            font-weight: 500;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .alert {
            border-radius: 8px;
            font-size: 1.05rem;
            padding: 15px 20px;
            margin-bottom: 30px;
            text-align: center;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
        }

        .alert-warning {
            background-color: #fff3cd;
            color: #856404;
            font-weight: 500;
        }

        .form-header {
            background-color: #6c757d;
            color: #fff !important;
            padding: 8px 10px;
            border-radius: 6px;
            margin-bottom: 10px;
            font-size: 1.1rem;
            font-weight: bold;
            text-align: center;
            width: 100%;
        }

        .custome-btn {
            padding: 6px !important;
            margin-left: 10px;
        }

        @media (max-width: 767.98px) {
            .emergency-box {
                padding: 10px 5px;
            }

            .emergency-box .form-control,
            .emergency-box .btn-danger {
                padding: 10px 15px;
                font-size: 1rem;
            }

            .form-group.col-md-6 {
                width: 100%;
            }
        }

        #experience_table th {
            font-size: 16px;
            text-align: center;
        }
        label{
            font-size:16px;
        }
        input{
            height: 34px !important;
        }
        #previewButton{
            background-color: #74D8D8;
            border: 1px solid #74D8D8;
        }
        #previewButton:hover{
            color: #000;
        }
        #submitForm{
            background-color: #74D8D8 !important;
            border: 1px solid #74D8D8 !important;
            padding:8px !important;
        }
        #printPreview{
            background-color: #8e8edf !important;
            border: 1px solid #8e8edf !important;
            padding:8px !important;
        }
        .table td{
            font-size:14px;
        }
        p{
            font-size:14px;
        }
        table td{
            font-size:14px;
        }
    </style>


    @php
        $value = $user->email;
        $isEmail = filter_var($value, FILTER_VALIDATE_EMAIL);
        $isPhone = preg_match('/^\+?[0-9]{6,20}$/', $value); // basic phone check
    @endphp
    <section class="user-dashbord">
        <div class="container">
            <div class="row">
                <!--<div class="col-lg-3 col-md-4">-->
                <!--    {{-- Dashboard Options (Sidebar) --}}-->
                <!--    @include('user.inc.site_bar')-->
                <!--</div>-->

                <div class="col-md-12" style="margin-top:10px;">
                    <div class="container py-3">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        <div class="row justify-content-center">
                            <div class="emergency-box">
                                <div class="emergency-icon">
                                    <img class="img-fluid" style="width:100px; height: 80px;"
                                        src="{{ asset('assets/front/img/services/' . $service->main_image) }}"
                                        alt="Service Image">
                                </div>
                                <h3 class="font-bold">{{ $service->title }}</h3>
                                <h4>Hi, {{ $user->username }}
                                    <small> This is your serial number, {{ $user->user_sl }} pls remember this /
                                        এটা আপনার আইডি, দয়া করে মনে রাখবেন। <small>
                                </h4>
                                <form method="POST" action="{{ route('user-service-order-store') }}" class="text-left mt-4"
                                    id="service-order-form">
                                    @csrf

                                    <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                                    <input type="hidden" name="member_id" value="{{ auth()->user()->member->id }}">
                                    <input type="hidden" name="user_sl" value="{{ auth()->user()->user_sl }}">
                                    <input type="hidden" name="service_id" value="{{ $service->id }}">
                                    <input type="hidden" name="service_name" value="{{ $service->title }}">

                                    <div class="row">
                                        <div class="col-12 mb-3">
                                            <p class="form-header" style="background-color:#74D8D8"> Help Detail / সাহায্য
                                                বিস্তারিত </p>
                                        </div>

                                        <!--for dead body service-->
                                        
                                        @if ($service->id == 315)
                                            <div class="form-group col-md-6">
                                                <label for="help_name"  >Name of Patient or Dead Person / রোগী বা মৃত ব্যক্তির নাম </label>
                                                <input type="text" name="help_name" class="form-control"
                                                    required>
                                                @if ($errors->has('help_name'))
                                                    <small class="text-danger">{{ $errors->first('help_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="help_pasport">Passport No / পাসপোর্ট নম্বর </label>
                                                <input type="text" name="help_pasport" class="form-control" required>
                                                @if ($errors->has('help_pasport'))
                                                    <small class="text-danger">{{ $errors->first('help_pasport') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="help_father_name" >Father's Name / পিতার নাম  </label>
                                                <input type="text" name="help_father_name" class="form-control"
                                                    required>
                                                @if ($errors->has('help_father_name'))
                                                    <small class="text-danger">{{ $errors->first('help_father_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label  >Mother's Name / মাতার নাম </label>
                                                <input type="text" name="help_mother_name" class="form-control"
                                                    required>
                                                @if ($errors->has('help_mother_name'))
                                                    <small class="text-danger">{{ $errors->first('help_mother_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="current_country" >Country /রোগী কোন দেশে </label>
                                                <input type="text" name="current_country" class="form-control" required>
                                                @if ($errors->has('current_country'))
                                                    <small class="text-danger">{{ $errors->first('current_country') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="help_hospital" >Hospital name / হাসপাতালের নাম </label>
                                                <input type="text" name="help_hospital" class="form-control"
                                                    required>
                                                @if ($errors->has('help_hospital'))
                                                    <small class="text-danger">{{ $errors->first('help_hospital') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="dead_date" >Dead Date / মৃত্যুর তারিখ  </label>
                                                <input type="text" name="dead_date" class="form-control datepicker">
                                                @if ($errors->has('dead_date'))
                                                    <small class="text-danger">{{ $errors->first('dead_date') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                            <label >Hospital Person / হাসপাতাল এ বাক্তি</label>
                                                <input type="text" name="hospital_person" class="form-control">
                                                @if ($errors->has('hospital_person'))
                                                    <small
                                                        class="text-danger">{{ $errors->first('hospital_person') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                            <label >Hospital Person mobile number / হাসপাতাল এ বাক্তির মোবাইল নাম্বার</label>
                                                <input type="text" name="hospital_person_mobile" class="form-control" required>
                                                @if ($errors->has('hospital_person_mobile'))
                                                    <small
                                                        class="text-danger">{{ $errors->first('hospital_person_mobile') }}</small>
                                                @endif
                                            </div>
                                        @elseif($service->id == 313)
                                            <div class="form-group col-md-6">
                                                <label for="help_name"  >Name of Patient/ রোগীর নাম </label>
                                                <input type="text" name="help_name" class="form-control"
                                                    required>
                                                @if ($errors->has('help_name'))
                                                    <small class="text-danger">{{ $errors->first('help_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="help_father_name" >Father's Name / পিতার নাম  </label>
                                                <input type="text" name="help_father_name" class="form-control"
                                                    required>
                                                @if ($errors->has('help_father_name'))
                                                    <small class="text-danger">{{ $errors->first('help_father_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="help_pasport">Passport No / পাসপোর্ট নম্বর </label>
                                                <input type="text" name="help_pasport" class="form-control" required>
                                                @if ($errors->has('help_pasport'))
                                                    <small class="text-danger">{{ $errors->first('help_pasport') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="current_country" >Country Name / দেশের নাম </label>
                                                <input type="text" name="current_country" class="form-control" required>
                                                @if ($errors->has('current_country'))
                                                    <small class="text-danger">{{ $errors->first('current_country') }}</small>
                                                @endif
                                            </div>@if ($service->id != 322)
                                            <div class="form-group col-md-6">
                                                <label for="flight_number">Flight No / ফ্লাইট নম্বর  </label>
                                                <input type="text" name="flight_number" class="form-control">
                                                @if ($errors->has('flight_number'))
                                                    <small class="text-danger">{{ $errors->first('flight_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="flight_date">Flight Date and Time / ফ্লাইটের তারিখ ও সময়</label>
                                                <input type="datetime-local" id="flight_date" name="flight_date" 
                                                       class="form-control" value="{{ old('flight_date') }}">
                                                
                                                @if ($errors->has('flight_date'))
                                                    <small class="text-danger">{{ $errors->first('flight_date') }}</small>
                                                @endif
                                            </div>
                                            @endif
                                            <div class="form-group col-md-6">
                                                <label for="whatsapp_number">whatsApp N0. / হোয়াটস অ্যাপ নাম্বার </label>
                                                <input type="text" id="whatsapp_number" name="whatsapp_number" 
                                                       class="form-control" value="{{ old('whatsapp_number') }}">
                                                
                                                @if ($errors->has('whatsapp_number'))
                                                    <small class="text-danger">{{ $errors->first('whatsapp_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="whatsapp_number">Disease Name / রোগের নাম  </label>
                                                <input type="text" name="disease_name" 
                                                       class="form-control" value="{{ old('disease_name') }}">
                                                
                                                @if ($errors->has('disease_name'))
                                                    <small class="text-danger">{{ $errors->first('disease_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="account_holder_name">Account Holer Name / হিসাবধারীর নাম </label>
                                                <input type="text" name="account_holder_name" 
                                                       class="form-control" value="{{ old('account_holder_name') }}">
                                                
                                                @if ($errors->has('account_holder_name'))
                                                    <small class="text-danger">{{ $errors->first('account_holder_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="relation_member">Relation With Member / কর্মীর সাথে সম্পর্ক  </label>
                                                <input type="text" name="relation_member" 
                                                       class="form-control" value="{{ old('relation_member') }}">
                                                
                                                @if ($errors->has('relation_member'))
                                                    <small class="text-danger">{{ $errors->first('relation_member') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="account_number">Account Number / হিসাব নাম্বার  </label>
                                                <input type="text" name="account_number" 
                                                       class="form-control" value="{{ old('account_number') }}">
                                                
                                                @if ($errors->has('account_number'))
                                                    <small class="text-danger">{{ $errors->first('account_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="bank_name">Bank Name / ব্যাংক নাম  </label>
                                                <input type="text" name="bank_name" 
                                                       class="form-control" value="{{ old('bank_name') }}">
                                                
                                                @if ($errors->has('bank_name'))
                                                    <small class="text-danger">{{ $errors->first('bank_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="routing_number">Routing Number /  রাওউটিং নাম্বার   </label>
                                                <input type="text" name="routing_number" 
                                                       class="form-control" value="{{ old('routing_number') }}">
                                                
                                                @if ($errors->has('routing_number'))
                                                    <small class="text-danger">{{ $errors->first('routing_number') }}</small>
                                                @endif
                                            </div>
                                            
                                        @elseif($service->id == 321)
                                            <div class="form-group col-md-6">
                                                <label for="help_name"  >Name of Patient or Dead Person / রোগী বা মৃত ব্যক্তির নাম </label>
                                                <input type="text" name="help_name" class="form-control"
                                                    required>
                                                @if ($errors->has('help_name'))
                                                    <small class="text-danger">{{ $errors->first('help_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="help_father_name" >Father's Name / পিতার নাম  </label>
                                                <input type="text" name="help_father_name" class="form-control"
                                                    required>
                                                @if ($errors->has('help_father_name'))
                                                    <small class="text-danger">{{ $errors->first('help_father_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="help_pasport">Passport No / পাসপোর্ট নম্বর </label>
                                                <input type="text" name="help_pasport" class="form-control" required>
                                                @if ($errors->has('help_pasport'))
                                                    <small class="text-danger">{{ $errors->first('help_pasport') }}</small>
                                                @endif
                                            </div>
                                            
                                            <div class="form-group col-md-6">
                                                <label for="current_country" >Country Name / দেশের নাম </label>
                                                <input type="text" name="current_country" class="form-control" required>
                                                @if ($errors->has('current_country'))
                                                    <small class="text-danger">{{ $errors->first('current_country') }}</small>
                                                @endif
                                            </div>@if ($service->id != 322)
                                            <div class="form-group col-md-6">
                                                <label for="flight_number">Flight No / ফ্লাইট নম্বর  </label>
                                                <input type="text" name="flight_number" class="form-control">
                                                @if ($errors->has('flight_number'))
                                                    <small class="text-danger">{{ $errors->first('flight_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="flight_date">Flight Date and Time / ফ্লাইটের তারিখ ও সময়</label>
                                                <input type="datetime-local" id="flight_date" name="flight_date" 
                                                       class="form-control" value="{{ old('flight_date') }}">
                                                
                                                @if ($errors->has('flight_date'))
                                                    <small class="text-danger">{{ $errors->first('flight_date') }}</small>
                                                @endif
                                            </div>
                                            
                                            
                                            <div class="form-group col-md-6">
                                                <label >Distance / গন্তব্যের দূরত্ব</label>
                                                <input type="text" name="distance_code" class="form-control">
                                                @if ($errors->has('distance_code'))
                                                    <small
                                                        class="text-danger">{{ $errors->first('distance_code') }}</small>
                                                @endif
                                            </div>
                                            @endif
                                        @else
                                            <div class="form-group col-md-6">
                                                <label for="help_name"  >Name / ব্যক্তির নাম </label>
                                                <input type="text" name="help_name" class="form-control"
                                                    required>
                                                @if ($errors->has('help_name'))
                                                    <small class="text-danger">{{ $errors->first('help_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="help_father_name" >Father's Name / পিতার নাম  </label>
                                                <input type="text" name="help_father_name" class="form-control"
                                                    required>
                                                @if ($errors->has('help_father_name'))
                                                    <small class="text-danger">{{ $errors->first('help_father_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="help_pasport">Passport No / পাসপোর্ট নম্বর </label>
                                                <input type="text" name="help_pasport" class="form-control" required>
                                                @if ($errors->has('help_pasport'))
                                                    <small class="text-danger">{{ $errors->first('help_pasport') }}</small>
                                                @endif
                                            </div>
                                            
                                            <div class="form-group col-md-6">
                                                <label for="current_country" >Country Name / দেশের নাম </label>
                                                <input type="text" name="current_country" class="form-control" required>
                                                @if ($errors->has('current_country'))
                                                    <small class="text-danger">{{ $errors->first('current_country') }}</small>
                                                @endif
                                            </div>@if ($service->id != 322)
                                            <div class="form-group col-md-6">
                                                <label for="flight_number">Flight No / ফ্লাইট নম্বর  </label>
                                                <input type="text" name="flight_number" class="form-control">
                                                @if ($errors->has('flight_number'))
                                                    <small class="text-danger">{{ $errors->first('flight_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="flight_date">Flight Date and Time / ফ্লাইটের তারিখ ও সময়</label>
                                                <input type="datetime-local" id="flight_date" name="flight_date" 
                                                       class="form-control" value="{{ old('flight_date') }}">
                                                
                                                @if ($errors->has('flight_date'))
                                                    <small class="text-danger">{{ $errors->first('flight_date') }}</small>
                                                @endif
                                            </div>
                                            
                                            
                                            <div class="form-group col-md-6">
                                                <label >Distance / গন্তব্যের দূরত্ব</label>
                                                <input type="text" name="distance_code" class="form-control">
                                                @if ($errors->has('distance_code'))
                                                    <small
                                                        class="text-danger">{{ $errors->first('distance_code') }}</small>
                                                @endif
                                            </div>
                                            @endif
                                        @endif
                                        @if ($service->id == 322)
                                            <div class="form-group col-md-6">
                                                <label style="font-size:16px;"> Amount of financial help /আর্থিক সাহায্যের পরিমাণ </label>
                                                <input type="text" name="financial_amount" class="form-control">
                                                @if ($errors->has('financial_amount'))
                                                    <small
                                                        class="text-danger">{{ $errors->first('financial_amount') }}</small>
                                                @endif
                                            </div>
                                            
                                        @endif
                                        
                                        <div class="form-group col-md-6">
                                            <label  >Select Division / বিভাগ নির্বাচন করুন *</label>
                                            <select class="form-control select-2" name="help_division_id"
                                                id="divisionSelect">
                                                <option value=""> Select Division </option>
                                                @foreach ($division as $div)
                                                    <option value="{{ $div->id }}">{{ $div->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @if ($errors->has('help_division_id'))
                                                <small class="text-danger">{{ $errors->first('help_division_id') }}</small>
                                            @endif
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label >Select District / জেলা নির্বাচন করুন</label>
                                            <select class="form-control select-2" name="help_district_id"
                                                id="districtSelect">
                                                <option value="">Select District</option>
                                            </select>
                                            @if ($errors->has('help_district_id'))
                                                <small class="text-danger">{{ $errors->first('help_district_id') }}</small>
                                            @endif
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label >Select Upazilla / উপজেলা নির্বাচন করুন</label>
                                            <select class="form-control select-2" name="help_thana_id"
                                                id="upazillaSelect">
                                                <option value="">Select Upazilla</option>
                                            </select>
                                            @if ($errors->has('help_thana_id'))
                                                <small class="text-danger">{{ $errors->first('help_thana_id') }}</small>
                                            @endif
                                        </div>

                                        <div class="form-group col-md-6">
                                            <label > Help Post Code / পোস্ট কোড  </label>
                                            <input type="text" name="help_post_code" class="form-control">
                                            @if ($errors->has('help_post_code'))
                                                <small class="text-danger">{{ $errors->first('help_post_code') }}</small>
                                            @endif
                                        </div>

                                        <div class="form-group col-md-6">
                                            <label >Where Help is Needed / যে স্থানে সাহায্যের প্রয়োজন  </label>
                                            <textarea name="help_address" class="form-control" rows="1" ></textarea>
                                            @if ($errors->has('help_address'))
                                                <small class="text-danger">{{ $errors->first('help_address') }}</small>
                                            @endif
                                        </div>
                                        
                                        <div class="form-group col-md-6">
                                            <label >Local Contact / স্থানীয় যোগাযোগ নম্বর  </label>
                                            <input type="text" name="help_contact" class="form-control">
                                            @if ($errors->has('help_contact'))
                                                <small class="text-danger">{{ $errors->first('help_contact') }}</small>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-12 d-flex justify-content-center">
                                            <button type="submit" class="btn btn-primary mt-4" id="previewButton">
                                                <i class="fa fa-book"></i> Preview
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="previewModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                        <div id="previewArea">
                            
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="printPreview" class="btn btn-Primary" form="service-order-form">
                            Print
                        </button>
                        <button type="submit" id="submitForm" class="btn btn-success" form="service-order-form">
                            Confirm & Submit
                        </button>
                        <button type="button" id="closePreview" class="btn btn-secondary" data-dismiss="modal">Edit</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $('.datepicker').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true
        });
        $('#previewButton').on('click', function () {
            let formData = $('#service-order-form').serializeArray();
            let $table = $('#previewTable');
            $table.empty();
        
            $.each(formData, function (i, field) {
                if ($.trim(field.value) !== '') {
                    let row = $('<tr>');
                    row.append($('<td>').text(field.name));
                    row.append($('<td>').text(field.value));
                    $table.append(row);
                }
            });
        
            $('#previewModal').show(); // Or use .modal('show') if it's a Bootstrap modal
        
            $('html, body').animate({
                scrollTop: $('#previewModal').offset().top
            }, 500);
        });
        $(document).ready(function () {
            var $form = $('#service-order-form');
            var $previewButton = $('#previewButton');
            var $previewModal = $('#previewModal');
            var $previewContent = $('#previewArea'); // Updated to match your modal
            var $printPreview = $('#printPreview');
            var service_id = @json($service->id);
            var service_title = @json($service->title);
            var member_name = @json(auth()->user()->member->customer_name);
            var mobile_number = @json(auth()->user()->member->mobile_number);
            
            // Get today's date in dd-mm-yyyy format
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); // Months are zero-based
            var yyyy = today.getFullYear();
            today = dd + '-' + mm + '-' + yyyy;
            
            
            function validateSection(section) {
                let isValid = true;
                // Clear previous error messages
                section.find('.error-message').remove();
                section.find('input[required], select[required], textarea[required]').each(function() {
                    if (!$(this).val() || $(this).val().trim() === '') {
                        $(this).addClass('error');
                        const label = $(this).closest('.form-group').find('label').first();
                        label.after('<br><span class="error-message text-danger" style="font-size:14px;">This field is required</span>');
                        isValid = false;
                    } else {
                        $(this).removeClass('error');
                    }
                });
                return isValid;
            }
        
            $previewButton.on('click', function (e) {
                e.preventDefault();
                if (!validateSection($form)) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        text: 'Please fill all required fields before preview.',
                        confirmButtonText: 'OK'
                    });
                    return; // stop here if invalid
                }

        
                $previewContent.empty();
        
                // Collect form data
                let data = {};
                $.each($form.serializeArray(), function (i, field) {
                    data[field.name] = field.value || '—';
                });
        
                // Map select IDs to option text
                $.each(['help_division_id', 'help_district_id', 'help_thana_id'], function (i, name) {
                    let $select = $form.find(`[name="${name}"]`);
                    if ($select.length && data[name]) {
                        let $option = $select.find(`option[value="${data[name]}"]`);
                        if ($option.length) data[name] = $.trim($option.text());
                    }
                });
        
                // Build preview HTML
                let html = '';
                if (service_id == 321) {
                    html = `
                        <p>বরাবর</p>
                        <p class="pl-5">প্রবাস সার্ভিস ফাউন্ডেশন</p>
                        <p class="font-bold">বিষয়: অ্যাম্বুলেন্স সেবা প্রাপ্তির জন্য আবেদন।</p>
                        <p>মহোদয়,</p>
                        <p class="pl-5">আমি নিম্নস্বাক্ষরকারী প্রবাসী কর্মীর মরদেহ/অসুস্থ প্রবাসী কর্মী পরিবহনের জন্য প্রবাস সার্ভিস ফাউন্ডেশন এর অ্যাম্বুলেন্স সেবা গ্রহনের জন্য আবেদন জানাচ্ছি। এ বিষয়ে প্রয়োজনীয় ব্যবস্থা গ্রহণ করে বাধিত করবেন। তথ্যাদি নিম্নরূপ:</p>
                        <table class="table table-bordered pl-5">
                            <tr><td style="width:30px;">০১</td><td style="width:200px">মৃত বা অসুস্থ ব্যক্তির নাম</td><td style="width:20px">:</td><td>${data['help_name']}</td></tr>
                            <tr><td>০২</td><td>পিতার নাম</td><td>:</td><td>${data['help_father_name']}</td></tr>
                            <tr><td>০৩</td><td>পাসপোর্ট নম্বর</td><td>:</td><td>${data['help_pasport']}</td></tr>
                            <tr><td>০৪</td><td>দেশের নাম</td><td>:</td><td>${data['current_country']}</td></tr>
                            <tr><td>০৫</td><td>ফ্লাইট নম্বর</td><td>:</td><td>${data['flight_number']}</td></tr>
                            <tr><td>০৬</td><td>ফ্লাইটের তারিখ ও সময়</td><td>:</td><td>${data['flight_date']}</td></tr>
                            <tr><td rowspan="4">০৭</td><td>গন্তব্য স্থানের বর্ণনা</td><td>:</td><td>${data['help_address']}</td></tr>
                            <tr><td>ক) জেলা</td><td>:</td><td>${data['help_district_id']}</td></tr>
                            <tr><td>খ) উপজেলা</td><td>:</td><td>${data['help_thana_id']}</td></tr>
                            <tr><td>গ) পোস্ট কোড</td><td>:</td><td>${data['help_post_code']}</td></tr>
                            <tr><td>০৮</td><td>গন্তব্যের দূরত্ব<td>:</td></td><td>${data['distance_code']}</td></tr>
                        </table>
                        <div class="row">
                            <div class="col-8"></div>
                            <div class="col-4">
                                <table style="width:100%; border:none;">
                                    <tr><td>আবেদন কারীর নাম </td><td>:</td><td>${member_name}</td></tr>
                                    <tr><td>তারিখ</td><td>:</td><td>${today}</td></tr>
                                    <tr><td>মোবাইল নাম্বার</td><td>:</td><td>${mobile_number}</td></tr>
                                </table>
                            </div>
                        </div>
                    `;
                }
                
                else if (service_id == 315) {
                    html = `
                        <p>বরাবর</p>
                        <p>প্রবাস সার্ভিস ফাউন্ডেশন</p>
                        <p>দৃষ্টি আকর্ষণ: পরিচালক</p>
                        <p class="font-bold">বিষয়: মৃত <span style="border-bottom:1px dotted;">${data['help_name'] || '—'}</span> এর মৃতদেহ দেশে আনয়নের আবেদন</p>
                        <p>জনাব,</p>
                        <p class="pl-5">
                            সবিনয় নিবেদন এই যে মৃত <span style="border-bottom:1px dotted;">${data['help_name'] || '—'}</span> 
                            পাসপোর্ট নং <span style="border-bottom:1px dotted;">${data['help_pasport'] || '—'}</span>, 
                            পিতা / স্বামী <span style="border-bottom:1px dotted;">${data['help_father_name'] || '—'}</span>,  
                            মাতা / স্ত্রী <span style="border-bottom:1px dotted;">${data['help_mother_name'] || '—'}</span> 
                            (মোবাইল <span style="border-bottom:1px dotted;">${data['help_contact'] || '—'}</span>) 
                            গ্রাম: <span style="border-bottom:1px dotted;">${data['help_address'] || '—'}</span>, 
                            ডাকঘর/পোস্ট কোড: <span style="border-bottom:1px dotted;">${data['help_post_code'] || '—'}</span>, 
                            উপজেলা: <span style="border-bottom:1px dotted;">${data['help_thana_id'] || '—'}</span>,  
                            জেলা: <span style="border-bottom:1px dotted;">${data['help_district_id'] || '—'}</span> 
                            গত <span style="border-bottom:1px dotted;">${data['dead_date'] || '—'}</span> তারিখে 
                            <span style="border-bottom:1px dotted;">${data['current_country'] || '—'}</span> মৃত্যুবরণ করেন। 
                            মৃতদেহ বর্তমানে সে দেশের <span style="border-bottom:1px dotted;">${data['help_hospital'] || '—'}</span> 
                            হাসপাতালে সংরক্ষিত রয়েছে। উক্ত দেশে অবস্থানকারী জনাব 
                            <span style="border-bottom:1px dotted;">${data['hospital_person'] || '—'}</span> 
                            (মোবাইল <span style="border-bottom:1px dotted;">${data['hospital_person_mobile'] || '—'}</span>) 
                            এর সাথে যোগাযোগ করলে এই বিষয়ে বিস্তারিত তথ্য জানা যাবে। 
                            মৃতদেহ দেশে এলে তার জনাব/মিসেস <span style="border-bottom:1px dotted;">${data['help_father_name'] || '—'}</span> 
                            (মোবাইল <span style="border-bottom:1px dotted;">${data['help_contact'] || '—'}</span>) 
                            হযরত শাহজালাল/ওসমানী আন্তর্জাতিক বিমানবন্দর ঢাকা / চট্টগ্রাম / সিলেট থেকে গ্রহণ করবে।
                        </p>
                        <p class="pl-5">
                            অতএব মহোদয়ের নিকট আবেদন এই যে আমার মৃতদেহ দেশে আনয়নের জন্য আপনার সদয় মর্জি হয়।
                        </p>
                        <p class="mt-4">তারিখ: <span style="border-bottom:1px dotted;">${today}</span></p>
                
                        <div class="row">
                            <div class="col-8"></div>
                            <div class="col-4">
                                <p class="text-center">বিনীত নিবেদক</p>
                                <table style="width:100%; border:none;">
                                    <tr>
                                        <td style="border:none;">আবেদন কারীর নাম</td>
                                        <td style="border:none;">:</td>
                                        <td style="border:none;">${member_name}</td>
                                    </tr>
                                    <tr>
                                        <td style="border:none;">মোবাইল নাম্বার</td>
                                        <td style="border:none;">:</td>
                                        <td style="border:none;">${mobile_number}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    `;
                }

                else if (service_id == 313) {
                    html = `
                        <p>বরাবর</p>
                        <p class="pl-5">প্রবাস সার্ভিস ফাউন্ডেশন</p>
                        <p class="font-bold">বিষয়:  চিকিৎসা সহায়তার জন্য আবেদন।</p>
                        <table class="table table-bordered pl-5">
                            <tr><td style="width:200px"> অসুস্থকর্মীর  নাম</td><td>${data['help_name']}</td></tr>
                            <tr><td>পিতার নাম</td><td>${data['help_father_name']}</td></tr>
                            <tr><td>পাসপোর্ট নম্বর</td><td>${data['help_pasport']}</td></tr>
                            <tr><td>দেশের নাম</td><td>${data['current_country']}</td></tr>
                            <tr><td>ফ্লাইট নম্বর</td><td>${data['flight_number']}</td></tr>
                            <tr><td>ফ্লাইটের তারিখ ও সময়</td><td>${data['flight_date']}</td></tr>
                            <tr><td>গন্তব্য স্থানের বর্ণনা</td><td>${data['help_address']}</td></tr>
                            <tr><td>ক) জেলা</td><td>${data['help_district_id']}</td></tr>
                            <tr><td>খ) উপজেলা</td><td>${data['help_thana_id']}</td></tr>
                            <tr><td>গ) পোস্ট কোড</td><td>${data['help_post_code']}</td></tr>
                            <tr><td> মোবাইল নাম্বার </td><td>${data['help_contact']}</td></tr>
                            <tr><td> হোয়াটস  অ্যাপ নাম্বার </td><td>${data['whatsapp_number']}</td></tr>
                            <tr><td> রোগের নাম </td><td>${data['disease_name']}</td></tr>
                            <tr><td colspan="2" style="text-align:center; font-weight:bold;"> ব্যাংক হিসাবের তথ্য </td></tr>
                            <tr><td> হিসাবধারীর নাম </td><td>${data['account_holder_name']}</td></tr>
                            <tr><td> কর্মীর সাথে সম্পর্ক  </td><td>${data['relation_member']}</td></tr>
                            <tr><td> হিসাব নাম্বার  </td><td>${data['account_number']}</td></tr>
                            <tr><td> ব্যাংকের নাম  </td><td>${data['bank_name']}</td></tr>
                            <tr><td> রাউটিং নাম্বার  </td><td>${data['routing_number']}</td></tr>
                        </table>
                        <p> অতএব, প্রবাস সার্ভিস ফাউন্ডেশন হতে চিকিৎসার জন্য আরথিক সহায়তা প্রদানে মহোদয়ের সদয় মর্জি হয়।</p>
                        <div class="row">
                            <div class="col-8"></div>
                            <div class="col-4">
                                <p class="text-center">নিবেদক</p>
                                <table style="width:100%; border:none;">
                                    <tr><td>আবেদন কারীর নাম </td><td>:</td><td>${member_name}</td></tr>
                                    <tr><td>তারিখ</td><td>:</td><td>${today}</td></tr>
                                    <tr><td>মোবাইল নাম্বার</td><td>:</td><td>${mobile_number}</td></tr>
                                </table>
                            </div>
                        </div>
                    `;
                }
                else{
                    html = `
                        <p>বরাবর</p>
                        <p class="pl-5">প্রবাস সার্ভিস ফাউন্ডেশন</p>
                        <p class="font-bold">${service_title}</p>
                        <p>মহোদয়,</p>
                        <table class="table table-bordered pl-5">
                            <tr><td style="width:30px;">০১</td><td style="width:200px">ব্যক্তির নাম</td><td style="width:20px">:</td><td>${data['help_name']}</td></tr>
                            <tr><td>০২</td><td>পিতার নাম</td><td>:</td><td>${data['help_father_name']}</td></tr>
                            <tr><td>০৩</td><td>পাসপোর্ট নম্বর</td><td>:</td><td>${data['help_pasport']}</td></tr>
                            <tr><td>০৪</td><td>দেশের নাম</td><td>:</td><td>${data['current_country']}</td></tr>
                            <tr><td>০৫</td><td>ফ্লাইট নম্বর</td><td>:</td><td>${data['flight_number']}</td></tr>
                            <tr><td>০৬</td><td>ফ্লাইটের তারিখ ও সময়</td><td>:</td><td>${data['flight_date']}</td></tr>
                            <tr><td rowspan="4">০৭</td><td>গন্তব্য স্থানের বর্ণনা</td><td>:</td><td>${data['help_address']}</td></tr>
                            <tr><td>ক) জেলা</td><td>:</td><td>${data['help_district_id']}</td></tr>
                            <tr><td>খ) উপজেলা</td><td>:</td><td>${data['help_thana_id']}</td></tr>
                            <tr><td>গ) পোস্ট কোড</td><td>:</td><td>${data['help_post_code']}</td></tr>
                            <tr><td>০৮</td><td>গন্তব্যের দূরত্ব<td>:</td></td><td>${data['distance_code']}</td></tr>
                        </table>
                        <div class="row">
                            <div class="col-8"></div>
                            <div class="col-4">
                                <table style="width:100%; border:none;">
                                    <tr><td>আবেদন কারীর নাম </td><td>:</td><td>${member_name}</td></tr>
                                    <tr><td>তারিখ</td><td>:</td><td>${today}</td></tr>
                                    <tr><td>মোবাইল নাম্বার</td><td>:</td><td>${mobile_number}</td></tr>
                                </table>
                            </div>
                        </div>
                    `;
                }
                $previewContent.html(html);
        
                // Show the modal using Bootstrap
                $previewModal.modal('show');
                $('html, body').animate({ scrollTop: 0 }, 500);
            });
        
            $printPreview.on('click', function () {
                const printContents = $previewContent.html();
                const originalContents = $('body').html();
                $('body').html(`<h3 style="text-align:center; margin-bottom:5px;">{{ $service->title }}</h3>${printContents}`);
                window.print();
            });
        
            // Close modal when clicking outside (optional)
            $previewModal.on('click', function (e) {
                if ($(e.target).is($previewModal)) {
                    $previewModal.modal('hide');
                }
            });
        });



    </script>
    <script>
        $('.datepicker').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true
        });
    </script>
    <script>
        $(document).ready(function() {
            // Load all countries
            $.ajax({
                url: 'https://countriesnow.space/api/v0.1/countries/positions',
                method: 'GET',
                success: function(response) {
                    if (response.data) {
                        response.data.forEach(function(country) {
                            $('.foreign_country').append(
                                `<option value="${country.name}">${country.name}</option>`
                            );
                        });
                    }
                }
            });

            // Load states on country change
            $('#countrySelect').on('change', function() {
                const country = $(this).val();
                $('#stateSelect').html('<option value="">Loading...</option>');

                if (country) { // Only fetch if a country is selected
                    $.ajax({
                        url: 'https://countriesnow.space/api/v0.1/countries/states',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            country: country
                        }),
                        success: function(response) {
                            $('#stateSelect').html('<option value="">Select State</option>');
                            if (response.data && response.data.states) {
                                response.data.states.forEach(function(state) {
                                    $('#stateSelect').append(
                                        `<option value="${state.name}">${state.name}</option>`
                                    );
                                });
                            }
                        },
                        error: function() {
                            $('#stateSelect').html(
                                '<option value="">Error loading states</option>');
                        }
                    });
                } else {
                    $('#stateSelect').html(
                        '<option value="">Select State</option>'); // Reset if no country selected
                }
            });

            // Initialize Select2
            $('.select-2').select2({
                width: '100%', // Ensure full width
                placeholder: function() {
                    // Dynamic placeholder based on field
                    if ($(this).attr('name') === 'country') return 'Select Country';
                    if ($(this).attr('name') === 'state') return 'Select State';
                    return '';
                },
                allowClear: true // Allows clearing selection
            });
        });

        $(document).ready(function() {
            $('#divisionSelect').on('change', function() {
                var divisionId = $(this).val();
                console.log(divisionId);
                $('#districtSelect').html('<option value="">Loading...</option>');
                $('#upazillaSelect').html('<option value="">Select Upazilla</option>');
                if (divisionId) {
                    $.ajax({
                        url: '/get-districts/' + divisionId,
                        type: 'GET',
                        success: function(data) {
                            $('#districtSelect').html(
                                '<option value="">Select District</option>');
                            $.each(data, function(key, district) {
                                $('#districtSelect').append('<option value="' + district
                                    .id + '">' + district.name + '</option>');
                            });
                        }
                    });
                }
            });

            // Load Upazillas on District Select
            $('#districtSelect').on('change', function() {
                var districtId = $(this).val();
                $('#upazillaSelect').html('<option value="">Loading...</option>');
                if (districtId) {
                    $.ajax({
                        url: '/get-upazillas/' + districtId,
                        type: 'GET',
                        success: function(data) {
                            $('#upazillaSelect').html(
                                '<option value="">Select Upazilla</option>');
                            $.each(data, function(key, upazilla) {
                                $('#upazillaSelect').append('<option value="' + upazilla
                                    .id + '">' + upazilla.name + '</option>');
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection