@extends('layouts.dash')

@section('content')

<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1
                        class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                        District Coordinator</h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->

                </div>
                <!--end::Page title-->
                
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-xxl">
                <!--begin::Card-->
                <div class="card">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-6">
                        <!--begin::Card title-->
                        <div class="card-title d-flex gap-3">
                            



                            <!--begin::Search-->
                            <div class="d-flex align-items-center position-relative my-1">
                                <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>
                                <input type="text" data-kt-user-table-filter="search"
                                    class="form-control form-control-solid w-250px ps-13"
                                    placeholder="Search user" />
                            </div>
                            <!--end::Search-->
                        </div>
                        <!--begin::Card title-->
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar">
                            <!--begin::Toolbar-->
                            <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                                
                                <!--begin::Export-->
                                <button type="button" class="btn btn-light-primary me-3"
                                    data-bs-toggle="modal" id="exportBtn">
                                    <i class="ki-duotone ki-exit-up fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>Export</button>
                                <!--end::Export-->
                                <!--begin::Add user-->
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#kt_modal_add_user" id="addBtn">
                                    <i class="ki-duotone ki-plus fs-2"></i>Add District</button>
                                <!--end::Add user-->
                            </div>
                            <!--end::Toolbar-->
                            <!--begin::Modal - Adjust Balance-->
                            <div class="modal fade" id="kt_modal_export_users" tabindex="-1"
                                aria-hidden="true">
                                <!--begin::Modal dialog-->
                                <div class="modal-dialog modal-dialog-centered mw-650px">
                                    <!--begin::Modal content-->
                                    <div class="modal-content">
                                        <!--begin::Modal header-->
                                        <div class="modal-header">
                                            <!--begin::Modal title-->
                                            <h2 class="fw-bold">Export Users</h2>
                                            <!--end::Modal title-->
                                            <!--begin::Close-->
                                            <div class="btn btn-icon btn-sm btn-active-icon-primary"
                                                data-kt-users-modal-action="close">
                                                <i class="ki-duotone ki-cross fs-1">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                            </div>
                                            <!--end::Close-->
                                        </div>
                                        <!--end::Modal header-->
                                        <!--begin::Modal body-->
                                        <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                                            <!--begin::Form-->
                                            <form id="kt_modal_export_users_form" class="form"
                                                action="#">
                                                <!--begin::Input group-->
                                                <div class="fv-row mb-10">
                                                    <!--begin::Label-->
                                                    <label
                                                        class="fs-6 fw-semibold form-label mb-2">Select
                                                        Roles:</label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <select name="role" data-control="select2"
                                                        data-placeholder="Select a role"
                                                        data-hide-search="true"
                                                        class="form-select form-select-solid fw-bold">
                                                        <option></option>
                                                        <option value="Administrator">Administrator
                                                        </option>
                                                        <option value="Analyst">Analyst</option>
                                                        <option value="Developer">Developer</option>
                                                        <option value="Support">Support</option>
                                                        <option value="Trial">Trial</option>
                                                    </select>
                                                    <!--end::Input-->
                                                </div>
                                                <!--end::Input group-->
                                                <!--begin::Input group-->
                                                <div class="fv-row mb-10">
                                                    <!--begin::Label-->
                                                    <label
                                                        class="required fs-6 fw-semibold form-label mb-2">Select
                                                        Export Format:</label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <select name="format" data-control="select2"
                                                        data-placeholder="Select a format"
                                                        data-hide-search="true"
                                                        class="form-select form-select-solid fw-bold">
                                                        <option></option>
                                                        <option value="excel">Excel</option>
                                                        <option value="pdf">PDF</option>
                                                        <option value="cvs">CVS</option>
                                                        <option value="zip">ZIP</option>
                                                    </select>
                                                    <!--end::Input-->
                                                </div>
                                                <!--end::Input group-->
                                                <!--begin::Actions-->
                                                <div class="text-center">
                                                    <button type="reset" class="btn btn-light me-3"
                                                        data-kt-users-modal-action="cancel">Discard</button>
                                                    <button type="submit" class="btn btn-primary"
                                                        data-kt-users-modal-action="submit">
                                                        <span class="indicator-label">Submit</span>
                                                        <span class="indicator-progress">Please wait...
                                                            <span
                                                                class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                                    </button>
                                                </div>
                                                <!--end::Actions-->
                                            </form>
                                            <!--end::Form-->
                                        </div>
                                        <!--end::Modal body-->
                                    </div>
                                    <!--end::Modal content-->
                                </div>
                                <!--end::Modal dialog-->
                            </div>
                            <!--end::Modal - New Card-->
                            <!--begin::Modal - Add task-->
                            <div class="modal fade" id="kt_modal_add_user" tabindex="-1"
                                aria-hidden="true">
                                <!--begin::Modal dialog-->
                                <div class="modal-dialog modal-dialog-centered mw-650px">
                                    <!--begin::Modal content-->
                                    <div class="modal-content">
                                        <!--begin::Modal header-->
                                        <div class="modal-header" id="kt_modal_add_user_header">
                                            <!--begin::Modal title-->
                                            <h2 class="fw-bold" id="kt_modal_add_edit">Add District</h2>
                                            <!--end::Modal title-->
                                            <!--begin::Close-->
                                            <div class="btn btn-icon btn-sm btn-active-icon-primary"
                                                data-bs-dismiss="modal">
                                                <i class="ki-duotone ki-cross fs-1">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                            </div>
                                            <!--end::Close-->
                                        </div>
                                        <!--end::Modal header-->
                                        <!--begin::Modal body-->
                                        <div class="modal-body px-5 my-7">
                                            <!--begin::Form-->
                                            <form id="kt_modal_add_user_form" class="form">
                                                @csrf
                                                <!--begin::Scroll-->
                                                <div class="scroll-y me-n7 pe-7"
                                                    id="kt_modal_new_address_scroll"
                                                    data-kt-scroll="true"
                                                    data-kt-scroll-activate="{default: false, lg: true}"
                                                    data-kt-scroll-max-height="auto"
                                                    data-kt-scroll-dependencies="#kt_modal_new_address_header"
                                                    data-kt-scroll-wrappers="#kt_modal_new_address_scroll"
                                                    data-kt-scroll-offset="350px">
                                                    <!--begin::Notice-->
                                                    <!--begin::Notice-->

                                                    <!--end::Notice-->
                                                    <!--end::Notice-->
                                                    <!--begin::Input group-->
                                                    <div class="row mb-5">
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--begin::Label-->
                                                            <label
                                                                class="fs-5 fw-semibold mb-2">Name<span style="color: red;">*</span></label>
                                                            <!--end::Label-->
                                                            <!--begin::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="name" />
                                                                <span id="name-error" class="text-danger"></span>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label
                                                                class="fs-5 fw-semibold mb-2">Phone<span style="color: red;">*</span></label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="phone" />
                                                                <span id="phone-error" class="text-danger"></span>
                                                            <!--end::Input-->
                                                        </div>
                                                        
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--begin::Label-->
                                                            <label
                                                                class="fs-5 fw-semibold mb-2">Email<span style="color: red;">*</span></label>
                                                            <!--end::Label-->
                                                            <!--begin::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="email" />
                                                                <span id="email-error" class="text-danger"></span>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        
                                                    </div>
                                                    <div class="row mb-5">
                                                        
                                                        
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label
                                                                class="fs-5 fw-semibold mb-2">District<span style="color: red;">*</span></label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <!--<select name="district[]" id="district1" class="form-control form-control-solid" multiple >
                                                                <option value="">Select</option>
                                                                <option value="Alappuzha">Alappuzha</option>
                                                                <option value="Ernakulam">Ernakulam</option>
                                                                <option value="Idukki">Idukki</option>
                                                                <option value="Kannur">Kannur</option>
                                                                <option value="Kasaragod">Kasaragod</option>
                                                                <option value="Kollam">Kollam</option>
                                                                <option value="Kottayam">Kottayam</option>
                                                                <option value="Kozhikode">Kozhikode</option>
                                                                <option value="Malappuram">Malappuram</option>
                                                                <option value="Palakkad">Palakkad</option>
                                                                <option value="Pathanamthitta">Pathanamthitta</option>
                                                                <option value="Thiruvananthapuram">Thiruvananthapuram</option>
                                                                <option value="Thrissur">Thrissur</option>
                                                                <option value="Wayanad">Wayanad</option>

                                                            </select>--->
                                                            <select class="form-select form-select-solid" data-control="select2" name="district[]" id="district1" data-placeholder="Select an option" data-allow-clear="true" multiple="multiple">
                                                                <option value="">Select</option>
                                                                <option value="Alappuzha">Alappuzha</option>
                                                                <option value="Ernakulam">Ernakulam</option>
                                                                <option value="Idukki">Idukki</option>
                                                                <option value="Kannur">Kannur</option>
                                                                <option value="Kasaragod">Kasaragod</option>
                                                                <option value="Kollam">Kollam</option>
                                                                <option value="Kottayam">Kottayam</option>
                                                                <option value="Kozhikode">Kozhikode</option>
                                                                <option value="Malappuram">Malappuram</option>
                                                                <option value="Palakkad">Palakkad</option>
                                                                <option value="Pathanamthitta">Pathanamthitta</option>
                                                                <option value="Thiruvananthapuram">Thiruvananthapuram</option>
                                                                <option value="Thrissur">Thrissur</option>
                                                                <option value="Wayanad">Wayanad</option>
                                                            </select>
                                                            <span id="district-error" class="text-danger"></span>
                                                             
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        <!--begin::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label
                                                                class="fs-5 fw-semibold mb-2">Address<span style="color: red;">*</span></label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="address" />
                                                                <span id="addr-error" class="text-danger"></span>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        <div class="col-md-4 fv-row">
                                                            <!--end::Label-->
                                                            <label class="fs-5 fw-semibold mb-2">Office
                                                                Phone</label>
                                                            <!--end::Label-->
                                                            <!--end::Input-->
                                                            <input type="text"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="office_phone" />
                                                                <span id="office-error" class="text-danger"></span>
                                                            <!--end::Input-->
                                                        </div>
                                                    </div>

                                                    <div class="row mb-5">
                                                        <!--begin::Col-->
                                                        <div class="col-md-6 fv-row">
                                                            <!--begin::Label-->
                                                            <label class=" fs-5 fw-semibold mb-2">Option
                                                                to upload id</label>
                                                            <!--end::Label-->
                                                            <!--begin::Input-->
                                                            <input type="file"
                                                                class="form-control form-control-solid"
                                                                placeholder="" name="file" />
                                                                <span id="fileInput"></span>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Col-->
                                                        <!--begin::Col-->


                                                    </div>
                                                    <input type="hidden" name="user_type" value="district_co" />
                                                   
                                                </div>
                                                <!--end::Scroll-->
                                                <!--begin::Actions-->
                                                <div class="text-center pt-10">
                                                    <button type="reset" class="btn btn-light me-3"
                                                        data-bs-dismiss="modal">Discard</button>
                                                    <button type="submit" class="btn btn-primary">
                                                        <span class="indicator-label">Submit</span>
                                                        <span class="indicator-progress">Please wait...
                                                            <span
                                                                class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                                    </button>
                                                    
                                                </div>
                                                <!--end::Actions-->
                                            </form>
                                            <!--end::Form-->
                                        </div>
                                        <!--end::Modal body-->
                                    </div>
                                    <!--end::Modal content-->
                                </div>
                                <!--end::Modal dialog-->
                            </div>
                            <!--end::Modal - Add task-->
                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5"
                            id="kt_table_users">
                            <thead>
                                
                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                    
                                    <th class="min-w-90px">Name</th>
                                    <th class="min-w-90px">District</th>
                                    <th class="min-w-100px">Phone</th>
                                    <th class="min-w-125px">Email</th>
                                    <th class="min-w-125px">Address</th>
                                    <th class=" min-w-100px">Office Phone</th>
                                    <th class=" min-w-100px"></th>
                                    <th class=" min-w-100px">Status</th>
                                    <th class="text-end min-w-50px"></th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold">
                                @if($List)
                                @foreach($List as $li)
                               
                                <tr>
                                    <td>{{ $li->user->name }}</td>
                                    <td>{{ $li->district }}</td>
                                    <td>{{ $li->phone_no }}</td>
                                    <td>{{ $li->user->email }}</td>
                                    <td>{{ $li->address }}</td>
                                    <td>{{ $li->office_phone }}</td>

                                    <td>
														    @if($li->file)
                                                            <a href="{{ $li->file }}" download 
                                                               style="display: inline-block; padding: 10px 20px; background-color: #1D4ED8; color: white; font-size: 14px; font-weight: 500; text-align: center; border-radius: 6px; text-decoration: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease;">
                                                                Download
                                                            </a>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <div class="col-xl-9">
                                                                <div class="form-check form-switch form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" id="status-{{ $li->user_id }}" name="status" data-user-id="{{ $li->user_id }}" {{ $li->status ? 'checked' : '' }}>
                                                                    <label class="form-check-label fw-semibold text-gray-500 ms-3" for="status">
                                                                        {{ $li->status == 1 ? 'Active' : 'Blocked' }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </td>
                                    <td class="text-end">
                                        <a href="#"
                                            class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm"
                                            data-kt-menu-trigger="click"
                                            data-kt-menu-placement="bottom-end"><i
                                                class="fas fa-ellipsis-v ki-down"></i>
                                        </a>
                                        <!--begin::Menu-->
                                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                            data-kt-menu="true">
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <!--<a href="Pages/user-management/users/view.html"
                                                    class="menu-link px-3">Edit</a>-->
                                                <button type="button" class="menu-link px-3" id="editBtn" onclick="handleEditClick({{ $li->id }})" data-id="{{ $li->id }}" style="border: none;background: white;" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">
                                                        Edit</button>
                                            </div>
                                            <!--end::Menu item-->
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                    <form action="{{ route('districtco.delete', $li->id) }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="menu-link px-3" style="border: none;background: white;">Delete</button>
                                                    </form>
                                            </div>
                                            <!--end::Menu item-->
                                        </div>
                                        <!--end::Menu-->
                                    </td>
                                </tr>

                                @endforeach
                                @endif
                            </tbody>
                        </table>
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
    <!--begin::Footer-->
    <div id="kt_app_footer" class="app-footer">
        <!--begin::Footer container-->
        <div
            class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
            <!--begin::Copyright-->
            <div class="text-gray-900 order-2 order-md-1">
                <span class="text-muted fw-semibold me-1">2024&copy;</span>
                <a href="https://keenthemes.com" target="_blank"
                    class="text-gray-800 text-hover-primary">Keenthemes</a>
            </div>
            <!--end::Copyright-->
            <!--begin::Menu-->
            <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                <li class="menu-item">
                    <a href="https://keenthemes.com" target="_blank" class="menu-link px-2">About</a>
                </li>
                <li class="menu-item">
                    <a href="https://devs.keenthemes.com" target="_blank"
                        class="menu-link px-2">Support</a>
                </li>
                <li class="menu-item">
                    <a href="https://1.envato.market/EA4JP" target="_blank"
                        class="menu-link px-2">Purchase</a>
                </li>
            </ul>
            <!--end::Menu-->
        </div>
        <!--end::Footer container-->
    </div>
    <!--end::Footer-->
</div>
<div id="page-loader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 9999; text-align: center;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <div class="spinner-border text-light" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</div>
<!--end:::Main-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>  

function handleEditClick(userId) {
    
    
    $.ajax({
            url: 'districtco/edit/' + userId,
            type: 'GET',
            success: function(data) {

               
               
                $('#kt_modal_add_user_form').attr('action', '{{ url("/districtco/update") }}/' + userId); 
                 $('#kt_modal_add_edit').text('Edit District CoOrdinator');
                $('#kt_modal_add_user_form button[type=submit]').text('Update User'); 

                let districtsArray = data.district.split(",");
               
                $('[name="name"]').val(data.user.name);
                $('[name="email"]').val(data.user.email);
                //$('[name="district"]').val(data.district);
                $('[name="phone"]').val(data.phone_no);
                $('[name="address"]').val(data.address);
                $('[name="office_phone"]').val(data.office_phone);
                $('#fileInput').html(data.file);
                
                let selectedDistricts = districtsArray; // This should be an array of districts, e.g., ["Ernakulam", "Kollam"]
                $('#district1').val(selectedDistricts).trigger('change');
	
                
            },
            error: function(xhr) {
                alert('Error loading data');
            }
        });
}

/*document.addEventListener("DOMContentLoaded", function () {
                        // Select all input and select fields that need validation
                        const fields = document.querySelectorAll("input, select");
                    
                        fields.forEach((field) => {
                            field.addEventListener("input", function () {
                                // Find the error container directly after the field
                                const errorContainer = this.closest(".fv-row").querySelector(".text-danger");
                    
                                // Skip validation if no error container is found
                                if (!errorContainer) return;
                    
                                // Add or clear validation message
                                if (this.value.trim() === "" || (this.tagName === "SELECT" && this.value === "default")) {
                                    errorContainer.textContent = `The ${this.name || this.placeholder || "field"} is required.`;
                                } else {
                                    errorContainer.textContent = ""; // Clear error if input is valid
                                }
                            });
                        });
                    }); */
    
$(document).ready(function () {
    // Add user form submission
    $('#kt_modal_add_user_form').on('submit', function (e) {
    e.preventDefault(); // Prevent the default form submission

    const form = document.getElementById("kt_modal_add_user_form");
    const submitButton = form.querySelector("button[type='submit']");

    submitButton.disabled = true; 
    
    let formData = new FormData(this);
    console.log(formData);
    const actionUrl = $(this).attr('action'); // Fetch the form action URL again right before submitting
    console.log("Submitting form to: ", actionUrl); // Log to ensure it's not undefined
    
    if (!actionUrl) {
        console.error("Form action URL is undefined or empty.");
        return;
    }
    $('#page-loader').show();
    $.ajax({
        url: actionUrl, // Use the action URL for the current operation
        type: actionUrl.includes('/RegisterUsers/') ? "PUT" : "POST", // Change to PUT if editing
        data: formData,
        contentType: false,
        processData: false,
        success: function (response) {
            //alert(response);
            if (response.success) {
                $('#kt_modal_add_user_form').trigger("reset"); 
                $('#kt_modal_export_users').modal('hide'); 
                location.reload(); 
            }
        },
        error: function (xhr) {
            $('#page-loader').hide();
            submitButton.disabled = false; 
            $('.text-danger').remove(); 
            let errors = xhr.responseJSON.errors;
            if (errors) {
                for (let key in errors) {
                    let errorMessage = errors[key][0];
                    if(key.includes("district")){alert(errorMessage);
                        keyd="district";
                        $(`input[name="${keyd}"]`).after(`<span class="text-danger">${errorMessage}</span>`);
                        $(`#${keyd}-error`).text(errorMessage);
                    }else{
                        console.log(errorMessage);
                                            
                        $(`input[name="${key}"]`).after(`<span class="text-danger">${errorMessage}</span>`);
                        $(`#${key}-error`).text(errorMessage);
                        //$('input[name="' + key + '"]').after('<span class="text-danger">' + errorMessage + '</span>');
                    }
                }
            }
        }
    });
});


$('#addBtn').on('click', function() {
    
    const actionUrl = "{{ url('RegisterUsers') }}"; 
    //alert(actionUrl);
    $('#kt_modal_add_user_form').attr('action', actionUrl); 
    console.log("Form action URL set to: ", actionUrl); // Log the URL to check
    $('#kt_modal_add_edit').text('Add District CoOrdinator');
    $('#kt_modal_add_user_form button[type=submit]').text('Add User'); 
    $('#kt_modal_add_user_form')[0].reset(); 
    $('#fileInput').html('');
});
    
    
});


/*$('#editBtn').on('click', function() {
        var userId = $(this).data('id');
    alert(userId);
       
        $.ajax({
            url: 'districtco/edit/' + userId,
            type: 'GET',
            success: function(data) {

               
               alert(data);
                $('#kt_modal_add_user_form').attr('action', '{{ url("/districtco/update") }}/' + userId); 
                 $('#kt_modal_add_edit').text('Edit District CoOrdinator');
                $('#kt_modal_add_user_form button[type=submit]').text('Update User'); 

               
                $('[name="name"]').val(data.user.name);
                $('[name="email"]').val(data.user.email);
                $('[name="district"]').val(data.district);
                $('[name="phone"]').val(data.phone_no);
                $('[name="address"]').val(data.address);
                $('[name="office_phone"]').val(data.office_phone);
                $('#fileInput').html(data.file);
	
                
            },
            error: function(xhr) {
                alert('Error loading data');
            }
        });
    });*/
    
    
document.getElementById('exportBtn').addEventListener('click', function () {
                        let table = document.getElementById('kt_table_users');
                        
                        let rows = Array.from(table.querySelectorAll('tr'));

                        // Create CSV data excluding the "Actions" column (last column)
                        let csvContent = rows.map(row => {
                            let cols = Array.from(row.querySelectorAll('th, td'));
                            
                            // Filter out the last column (index -1 means skip the last column)
                            let filteredCols = cols.slice(0, -2);
                    
                            // Join the content as CSV format
                            return filteredCols.map(col => `"${col.textContent}"`).join(',');
                        }).join('\n');
                    
                        // Create a downloadable link
                        let csvBlob = new Blob([csvContent], { type: 'text/csv' });
                        let csvUrl = URL.createObjectURL(csvBlob);
                        let link = document.createElement('a');
                        link.href = csvUrl;
                        link.download = 'export.csv';
                    
                        // Trigger the download
                        link.click();
                    });
                    
                    
                    document.querySelectorAll('.form-check-input').forEach((checkbox) => {
                                checkbox.addEventListener('change', function () {
                                    // Retrieve user ID from the data attribute
                                    const userId = this.dataset.userId;
                                    console.log('User ID:', userId); // Debugging step to ensure userId is correct
                            
                                    if (!userId) {
                                        alert('User ID not found! Check the data-user-id attribute.');
                                        return;
                                    }
                            
                                    // Construct the URL
                                    const url = `{{ url('/toggleStatusDis') }}?id=${userId}`;
                                    console.log('URL:', url); // Debugging step to check URL format
                            
                                    // Perform the API call
                                    fetch(url, {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                                        },
                                        body: JSON.stringify({})
                                    })
                                        .then(response => response.json())
                                        .then(data => {
                                            console.log('Response:', data); // Debugging step to check API response
                                            if (data.success) {
                                                alert(data.message);
                                            } else {
                                                alert('Failed to update status.');
                                            }
                                        })
                                        .catch(error => console.error('Error:', error));
                                });
                            });
					</script>
@endsection