@extends('layouts.app')

@section('title', 'Member Report')

@section('content')

    <!-- ========================================================= -->
    <!-- Breadcrumb -->
    <!-- ========================================================= -->

    <nav class="mb-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">

            <li>
                <a href="{{ url('dashboard') }}"
                   class="hover:text-blue-600">
                    Dashboard
                </a>
            </li>

            <li>
                <svg class="w-4 h-4 text-gray-400"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
                    <path stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M9 5l7 7-7 7">
                    </path>
                </svg>
            </li>

            <li class="text-gray-900 font-medium">
                Member Report
            </li>

        </ol>
    </nav>


    <!-- ========================================================= -->
    <!-- Metrics -->
    <!-- ========================================================= -->

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">

        <!-- Total -->
        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center">

            <div class="p-3 bg-blue-50 rounded-full">
                <svg class="w-6 h-6 text-blue-600"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">

                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M17 20h5v-2a3 3 0 00-5.356-1.857
                             M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857
                             M7 20H2v-2a3 3 0 015.356-1.857
                             M7 20v-2c0-.656.126-1.283.356-1.857
                             m0 0a5.002 5.002 0 019.288 0
                             M15 7a3 3 0 11-6 0 3 3 0 016 0z">
                    </path>

                </svg>
            </div>

            <div class="ml-4">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Total Members
                </p>

                <p id="totalMembersCard"
                   class="text-2xl font-semibold text-gray-900">
                    0
                </p>
            </div>

        </div>


        <!-- Active -->
        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center">

            <div class="p-3 bg-green-50 rounded-full">

                <svg class="w-6 h-6 text-green-600"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">

                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M9 12l2 2 4-4
                             m6 2a9 9 0 11-18 0
                             9 9 0 0118 0z">
                    </path>

                </svg>

            </div>

            <div class="ml-4">

                <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Active Members
                </p>

                <p id="activeMembersCard"
                   class="text-2xl font-semibold text-gray-900">
                    0
                </p>

            </div>

        </div>


        <!-- Inactive -->
        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center">

            <div class="p-3 bg-red-50 rounded-full">

                <svg class="w-6 h-6 text-red-600"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">

                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M10 14l2-2m0 0l2-2
                             m2 2l-2 2m2-2l2 2
                             m7-2a9 9 0 11-18 0
                             9 9 0 0118 0z">
                    </path>

                </svg>

            </div>

            <div class="ml-4">

                <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Inactive Members
                </p>

                <p id="inactiveMembersCard"
                   class="text-2xl font-semibold text-gray-900">
                    0
                </p>

            </div>

        </div>

    </div>


    <!-- ========================================================= -->
    <!-- Report Filters -->
    <!-- ========================================================= -->

    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6">

        <div class="flex flex-col gap-5">

            <!-- ================================================= -->
            <!-- Header -->
            <!-- ================================================= -->

            <div class="flex items-center justify-between">

                <div>
                    <h2 class="text-sm font-semibold text-gray-800">
                        Member Report
                    </h2>

                    <p class="text-xs text-gray-500 mt-1">
                        Select columns and filter member information
                        before viewing or downloading the report.
                    </p>
                </div>

            </div>


            <!-- ================================================= -->
            <!-- Select Report Columns -->
            <!-- ================================================= -->

            <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">

                <div class="flex flex-col sm:flex-row
                            sm:items-center sm:justify-between
                            gap-3 mb-4">

                    <div>

                        <h3 class="text-sm font-semibold text-gray-800">
                            Report Columns
                        </h3>

                        <p class="text-xs text-gray-500 mt-1">
                            Select the columns you want to display
                            and export.
                        </p>

                    </div>

                    <div class="flex items-center gap-3">

                        <button type="button"
                                id="selectAllColumns"
                                class="text-xs font-medium text-indigo-600 hover:text-indigo-800">

                            Select All

                        </button>

                        <button type="button"
                                id="clearAllColumns"
                                class="text-xs font-medium text-red-600 hover:text-red-800">

                            Clear All

                        </button>

                    </div>

                </div>


                <!-- Column Checkboxes -->

                <div class="grid grid-cols-2 sm:grid-cols-3
                            md:grid-cols-4 lg:grid-cols-5
                            gap-3">

                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="group_member_no"
                               checked>
                        Member ID
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="full_name"
                               checked>
                        Full Name
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="nick_name">
                        Nick Name
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="father_name">
                        Father Name
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="mother_name">
                        Mother Name
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="gender"
                               checked>
                        Gender
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="mobile_no"
                               checked>
                        Phone
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="email"
                               checked>
                        Email
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="member_category">
                        Member Category
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="date_of_birth">
                        Date of Birth
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="date_of_anniversary">
                        Anniversary
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="blood_group">
                        Blood Group
                    </label>

                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="spouse_name">
                        Spouse Name
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="nid">
                        NID
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="profession"
                               checked>
                        Profession
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="designation">
                        Designation
                    </label>

                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="division"
                               checked>
                        Division
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="district"
                               checked>
                        District
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="police_station">
                        Police Station
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="referance_name">
                        Reference 86 Club Name
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="referance_phone">
                        Reference Contact Number
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="business_office_address">
                        Business Address
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="permanent_address">
                        Permanent Address
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="present_address">
                        Present Address
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="ssc_school_name">
                        SSC School
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="status"
                               checked>
                        Status
                    </label>


                    <label class="flex items-center gap-2 text-xs text-gray-700">
                        <input type="checkbox"
                               class="report-column rounded border-gray-300
                                      text-indigo-600 focus:ring-indigo-500"
                               value="created_date">
                        Created Date
                    </label>

                </div>

            </div>


            <!-- ================================================= -->
            <!-- Filters -->
            <!-- ================================================= -->

            <div>

                <div class="flex items-center justify-between mb-3">

                    <div>
                        <h3 class="text-sm font-semibold text-gray-800">
                            Filters
                        </h3>

                        <p class="text-xs text-gray-500 mt-1">
                            Filter member information.
                        </p>
                    </div>

                </div>


                <div class="grid grid-cols-1 sm:grid-cols-2
                            lg:grid-cols-4 xl:grid-cols-5 gap-3">


                    <!-- Member ID -->

                    <div>

                        <label for="filterMemberId"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Member ID

                        </label>

                        <input type="text"
                               id="filterMemberId"
                               placeholder="Search member ID..."
                               class="w-full px-3 py-2 text-sm
                                      border border-gray-300 rounded-md
                                      focus:ring-1 focus:ring-indigo-500
                                      focus:border-indigo-500">

                    </div>


                    <!-- Name -->

                    <div>

                        <label for="filterName"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Member Name

                        </label>

                        <input type="text"
                               id="filterName"
                               placeholder="Search name..."
                               class="w-full px-3 py-2 text-sm
                                      border border-gray-300 rounded-md
                                      focus:ring-1 focus:ring-indigo-500
                                      focus:border-indigo-500">

                    </div>


                    <!-- Gender -->

                    <div>

                        <label for="filterGender"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Gender

                        </label>

                        <select id="filterGender"
                                class="w-full px-3 py-2 text-sm
                                       border border-gray-300 rounded-md
                                       focus:ring-1 focus:ring-indigo-500
                                       focus:border-indigo-500">

                            <option value="">
                                All Genders
                            </option>

                            <option value="male">
                                Male
                            </option>

                            <option value="female">
                                Female
                            </option>

                            <option value="other">
                                Other
                            </option>

                        </select>

                    </div>


                    <!-- Phone -->

                    <div>

                        <label for="filterPhone"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Phone

                        </label>

                        <input type="text"
                               id="filterPhone"
                               placeholder="Search phone..."
                               class="w-full px-3 py-2 text-sm
                                      border border-gray-300 rounded-md
                                      focus:ring-1 focus:ring-indigo-500
                                      focus:border-indigo-500">

                    </div>


                    <!-- Email -->

                    <div>

                        <label for="filterEmail"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Email

                        </label>

                        <input type="text"
                               id="filterEmail"
                               placeholder="Search email..."
                               class="w-full px-3 py-2 text-sm
                                      border border-gray-300 rounded-md
                                      focus:ring-1 focus:ring-indigo-500
                                      focus:border-indigo-500">

                    </div>


                    <!-- Profession -->

                    <div>

                        <label for="filterProfession"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Profession

                        </label>

                        <input type="text"
                               id="filterProfession"
                               placeholder="Search profession..."
                               class="w-full px-3 py-2 text-sm
                                      border border-gray-300 rounded-md
                                      focus:ring-1 focus:ring-indigo-500
                                      focus:border-indigo-500">

                    </div>


                    <!-- Designation -->

                    <div>

                        <label for="filterDesignation"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Designation

                        </label>

                        <input type="text"
                               id="filterDesignation"
                               placeholder="Search designation..."
                               class="w-full px-3 py-2 text-sm
                                      border border-gray-300 rounded-md
                                      focus:ring-1 focus:ring-indigo-500
                                      focus:border-indigo-500">

                    </div>


                    <!-- Division -->

                    <div>

                        <label for="filterDivision"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Division

                        </label>

                        <select id="filterDivision"
                                class="w-full px-3 py-2 text-sm
                                       border border-gray-300 rounded-md
                                       focus:ring-1 focus:ring-indigo-500
                                       focus:border-indigo-500">

                            <option value="">
                                All Divisions
                            </option>

                            @foreach($divisions ?? [] as $division)

                                <option value="{{ $division->id }}">
                                    {{ $division->name }}
                                </option>

                            @endforeach

                        </select>

                    </div>


                    <!-- District -->

                    <div>

                        <label for="filterDistrict"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            District

                        </label>

                        <select id="filterDistrict"
                                class="w-full px-3 py-2 text-sm
                                       border border-gray-300 rounded-md
                                       focus:ring-1 focus:ring-indigo-500
                                       focus:border-indigo-500">

                            <option value="">
                                All Districts
                            </option>

                            @foreach($districts ?? [] as $district)

                                <option value="{{ $district->id }}">
                                    {{ $district->name }}
                                </option>

                            @endforeach

                        </select>

                    </div>


                    <!-- Status -->

                    <div>

                        <label for="filterStatus"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Status

                        </label>

                        <select id="filterStatus"
                                class="w-full px-3 py-2 text-sm
                                       border border-gray-300 rounded-md
                                       focus:ring-1 focus:ring-indigo-500
                                       focus:border-indigo-500">

                            <option value="">
                                All Statuses
                            </option>

                            <option value="active">
                                Active
                            </option>

                            <option value="inactive">
                                Inactive
                            </option>

                        </select>

                    </div>


                    <!-- Blood Group -->

                    <div>

                        <label for="filterBloodGroup"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Blood Group

                        </label>

                        <select id="filterBloodGroup"
                                class="w-full px-3 py-2 text-sm
                                       border border-gray-300 rounded-md
                                       focus:ring-1 focus:ring-indigo-500
                                       focus:border-indigo-500">

                            <option value="">
                                All Blood Groups
                            </option>

                            <option value="A+">A+</option>
                            <option value="A-">A-</option>
                            <option value="B+">B+</option>
                            <option value="B-">B-</option>
                            <option value="AB+">AB+</option>
                            <option value="AB-">AB-</option>
                            <option value="O+">O+</option>
                            <option value="O-">O-</option>

                        </select>

                    </div>


                    <!-- T-Shirt -->

                    <div>

                        <label for="filterTshirtSize"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            T-Shirt Size

                        </label>

                        <select id="filterTshirtSize"
                                class="w-full px-3 py-2 text-sm
                                       border border-gray-300 rounded-md
                                       focus:ring-1 focus:ring-indigo-500
                                       focus:border-indigo-500">

                            <option value="">
                                All Sizes
                            </option>

                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                            <option value="XXL">XXL</option>

                        </select>

                    </div>


                    <!-- Police Station -->

                    <div>

                        <label for="filterPoliceStation"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Police Station

                        </label>

                        <input type="text"
                               id="filterPoliceStation"
                               placeholder="Search police station..."
                               class="w-full px-3 py-2 text-sm
                                      border border-gray-300 rounded-md
                                      focus:ring-1 focus:ring-indigo-500
                                      focus:border-indigo-500">

                    </div>


                    <!-- Reference Name -->

                    <div>

                        <label for="filterReferenceName"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Reference Name

                        </label>

                        <input type="text"
                               id="filterReferenceName"
                               placeholder="Search reference..."
                               class="w-full px-3 py-2 text-sm
                                      border border-gray-300 rounded-md
                                      focus:ring-1 focus:ring-indigo-500
                                      focus:border-indigo-500">

                    </div>


                    <!-- Per Page -->

                    <div>

                        <label for="perPage"
                               class="block text-xs font-medium
                                      text-gray-600 mb-1">

                            Records Per Page

                        </label>

                        <select id="perPage"
                                class="w-full px-3 py-2 text-sm
                                       border border-gray-300 rounded-md
                                       focus:ring-1 focus:ring-indigo-500
                                       focus:border-indigo-500">

                            <option value="10">
                                10
                            </option>

                            <option value="25" selected>
                                25
                            </option>

                            <option value="50">
                                50
                            </option>

                            <option value="100">
                                100
                            </option>

                        </select>

                    </div>

                </div>

            </div>


            <!-- ================================================= -->
            <!-- Buttons -->
            <!-- ================================================= -->

            <div class="flex flex-wrap items-center
                        justify-between gap-3">

                <div class="flex flex-wrap gap-2">

                    <!-- Filter -->

                    <button type="button"
                            id="btnFilter"
                            class="inline-flex items-center
                                   px-4 py-2
                                   bg-indigo-600 text-white
                                   text-sm font-medium
                                   rounded-md hover:bg-indigo-700
                                   transition">

                        <svg class="w-4 h-4 mr-1.5"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24">

                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M3 4h18M6 10h12M10 16h4">
                            </path>

                        </svg>

                        Filter Report

                    </button>


                    <!-- Reset -->

                    <button type="button"
                            id="btnReset"
                            class="inline-flex items-center
                                   px-4 py-2
                                   bg-gray-100 text-gray-700
                                   text-sm font-medium
                                   rounded-md hover:bg-gray-200
                                   transition">

                        Reset

                    </button>

                </div>


                <!-- Export Buttons -->

                <div class="flex flex-wrap gap-2">

                    <button type="button"
                            id="btnExportCsv"
                            class="inline-flex items-center
                                   px-3 py-2
                                   bg-gray-700 text-white
                                   text-sm font-medium
                                   rounded-md hover:bg-gray-800">

                        CSV

                    </button>


                    <button type="button"
                            id="btnExportExcel"
                            class="inline-flex items-center
                                   px-3 py-2
                                   bg-green-600 text-white
                                   text-sm font-medium
                                   rounded-md hover:bg-green-700">

                        Excel

                    </button>


                    <button type="button"
                            id="btnExportPdf"
                            class="inline-flex items-center
                                   px-3 py-2
                                   bg-red-600 text-white
                                   text-sm font-medium
                                   rounded-md hover:bg-red-700">

                        PDF

                    </button>

                </div>

            </div>

        </div>

    </div>


    <!-- ========================================================= -->
    <!-- Report Table -->
    <!-- ========================================================= -->

    <div class="bg-white rounded-lg shadow-sm
                border border-gray-100 overflow-hidden">

        <!-- Table Header -->

        <div class="px-4 py-3 border-b border-gray-200
                    flex flex-col sm:flex-row
                    items-start sm:items-center
                    justify-between gap-2">

            <div>

                <h2 class="text-sm font-semibold text-gray-800">
                    Member Information
                </h2>

                <p class="text-xs text-gray-500">
                    Filtered member records
                </p>

            </div>


            <div id="reportLoading"
                 class="hidden text-xs text-indigo-600">

                Loading...

            </div>

        </div>


        <!-- Table -->

        <div class="overflow-x-auto">

            <table class="min-w-full divide-y
                          divide-gray-200 text-sm">

                <thead class="bg-gray-50">

                <tr id="reportTableHead">

                    <th class="px-4 py-3 text-left
                                   text-xs font-semibold
                                   text-gray-500
                                   uppercase tracking-wider">

                        SL

                    </th>

                </tr>

                </thead>


                <tbody id="reportTableBody"
                       class="bg-white divide-y divide-gray-200">

                <tr>

                    <td colspan="20"
                        class="text-center py-10
                                   text-gray-500">

                        Loading member report...

                    </td>

                </tr>

                </tbody>

            </table>

        </div>


        <!-- ===================================================== -->
        <!-- Pagination -->
        <!-- ===================================================== -->

        <div class="px-4 py-3 bg-gray-50
                    border-t border-gray-200
                    flex flex-col sm:flex-row
                    items-center justify-between gap-3">

            <p id="paginationInfo"
               class="text-xs text-gray-600">

                Showing 0 to 0 of 0 entries

            </p>

            <div id="pagination"
                 class="flex items-center space-x-1">

            </div>

        </div>

    </div>

@endsection


@push('scripts')

    <script>

        let currentPage = 1;


        /*
        |--------------------------------------------------------------------------
        | Column Labels
        |--------------------------------------------------------------------------
        */

        const columnLabels = {

            group_member_no: 'Member ID',
            full_name: 'Full Name',
            nick_name: 'Nick Name',
            father_name: 'Father Name',
            mother_name: 'Mother Name',
            gender: 'Gender',
            mobile_no: 'Phone',
            email: 'Email',
            member_category: 'Member Category',
            nrb: 'NRB',
            date_of_birth: 'Date of Birth',
            date_of_anniversary: 'Anniversary',
            blood_group: 'Blood Group',
            tshirt_size: 'T-Shirt Size',
            spouse_name: 'Spouse Name',
            number_of_children: 'Children',
            nid: 'NID',
            profession: 'Profession',
            designation: 'Designation',
            zone_district_country: 'Zone / District / Country',
            division: 'Division',
            district: 'District',
            police_station: 'Police Station',
            facebook_id: 'Facebook',
            insta_id: 'Instagram',
            linkdin_id: 'LinkedIn',
            twitter_id: 'Twitter',
            referance_name: 'Reference Name',
            referance_phone: 'Reference Phone',
            business_office_address: 'Business Address',
            permanent_address: 'Permanent Address',
            present_address: 'Present Address',
            ssc_school_name: 'SSC School',
            status: 'Status',
            created_date: 'Created Date'

        };


        /*
        |--------------------------------------------------------------------------
        | Get Selected Columns
        |--------------------------------------------------------------------------
        */

        function getSelectedColumns() {

            return $('.report-column:checked')
                .map(function () {
                    return $(this).val();
                })
                .get();

        }


        /*
        |--------------------------------------------------------------------------
        | Render Table Header
        |--------------------------------------------------------------------------
        */

        function renderTableHeader() {

            let html = `

            <th class="px-4 py-3 text-left
                       text-xs font-semibold
                       text-gray-500 uppercase
                       tracking-wider">

                SL

            </th>

        `;

            const columns = getSelectedColumns();

            columns.forEach(function (column) {

                html += `

                <th class="px-4 py-3 text-left
                           text-xs font-semibold
                           text-gray-500 uppercase
                           tracking-wider
                           whitespace-nowrap">

                    ${escapeHtml(
                    columnLabels[column] ?? column
                )}

                </th>

            `;

            });

            $('#reportTableHead').html(html);

        }


        /*
        |--------------------------------------------------------------------------
        | Get Member Column Value
        |--------------------------------------------------------------------------
        */

        function getMemberValue(member, column) {

            switch (column) {

                case 'group_member_no':
                    return member.group_member_no;

                case 'full_name':
                    return member.full_name;

                case 'nick_name':
                    return member.nick_name;

                case 'father_name':
                    return member.father_name;

                case 'mother_name':
                    return member.mother_name;

                case 'gender':
                    return member.gender;

                case 'mobile_no':
                    return member.mobile_no;

                case 'email':
                    return member.email;

                case 'member_category':
                    return member.member_category;

                case 'nrb':
                    return member.nrb;

                case 'date_of_birth':
                    return member.date_of_birth;

                case 'date_of_anniversary':
                    return member.date_of_anniversary;

                case 'blood_group':
                    return member.blood_group;

                case 'tshirt_size':
                    return member.tshirt_size;

                case 'spouse_name':
                    return member.spouse_name;

                case 'number_of_children':
                    return member.number_of_children;

                case 'nid':
                    return member.nid;

                case 'profession':
                    return member.profession;

                case 'designation':
                    return member.designation;

                case 'zone_district_country':
                    return member.zone_district_country;

                case 'division':
                    return member.division_name;

                case 'district':
                    return member.district_name;

                case 'police_station':
                    return member.police_station;

                case 'facebook_id':
                    return member.facebook_id;

                case 'insta_id':
                    return member.insta_id;

                case 'linkdin_id':
                    return member.linkdin_id;

                case 'twitter_id':
                    return member.twitter_id;

                case 'referance_name':
                    return member.referance_name;

                case 'referance_phone':
                    return member.referance_phone;

                case 'business_office_address':
                    return member.business_office_address;

                case 'permanent_address':
                    return member.permanent_address;

                case 'present_address':
                    return member.present_address;

                case 'ssc_school_name':
                    return member.ssc_school_name;

                case 'status':
                    return member.status;

                case 'created_date':
                    return member.created_date;

                default:
                    return null;

            }

        }


        /*
        |--------------------------------------------------------------------------
        | Render Member Row
        |--------------------------------------------------------------------------
        */

        function renderMemberRow(member, sl) {

            let row = `

            <tr class="hover:bg-gray-50 transition">

                <td class="px-4 py-3 text-xs
                           font-mono text-gray-500">

                    ${sl}

                </td>

        `;


            const columns = getSelectedColumns();


            columns.forEach(function (column) {

                const value =
                    getMemberValue(member, column);


                /*
                |--------------------------------------------------------------------------
                | Status
                |--------------------------------------------------------------------------
                */

                if (column === 'status') {

                    let statusBadge = '';

                    if (value === 'active') {

                        statusBadge = `

                        <span class="inline-flex items-center
                                     px-2 py-0.5
                                     rounded-full
                                     text-xs font-semibold
                                     bg-green-100
                                     text-green-800">

                            Active

                        </span>

                    `;

                    } else if (value === 'inactive') {

                        statusBadge = `

                        <span class="inline-flex items-center
                                     px-2 py-0.5
                                     rounded-full
                                     text-xs font-semibold
                                     bg-red-100
                                     text-red-800">

                            Inactive

                        </span>

                    `;

                    } else {

                        statusBadge =
                            escapeHtml(value ?? '-');

                    }


                    row += `

                    <td class="px-4 py-3 text-xs
                               whitespace-nowrap">

                        ${statusBadge}

                    </td>

                `;

                } else {

                    row += `

                    <td class="px-4 py-3 text-xs
                               text-gray-600">

                        ${escapeHtml(value ?? '-')}

                    </td>

                `;

                }

            });


            row += `</tr>`;

            return row;

        }


        /*
        |--------------------------------------------------------------------------
        | Get Current Filters
        |--------------------------------------------------------------------------
        */

        function getReportFilters(page = 1) {

            return {
                page: page,
                perPage: $('#perPage').val(),
                columns: getSelectedColumns(),
                group_member_no: $('#filterMemberId').val(),
                name: $('#filterName').val(),
                gender: $('#filterGender').val(),
                email: $('#filterEmail').val(),
                phone: $('#filterPhone').val(),
                profession: $('#filterProfession').val(),
                designation: $('#filterDesignation').val(),
                division: $('#filterDivision').val(),
                district: $('#filterDistrict').val(),
                status: $('#filterStatus').val(),
                blood_group: $('#filterBloodGroup').val(),
                tshirt_size: $('#filterTshirtSize').val(),
                police_station: $('#filterPoliceStation').val(),
                referance_name: $('#filterReferenceName').val()

            };

        }


        /*
        |--------------------------------------------------------------------------
        | Load Report
        |--------------------------------------------------------------------------
        */

        function loadReport(page = 1) {
            currentPage = page;
            renderTableHeader();
            const filters = getReportFilters(page);

            $('#reportLoading').removeClass('hidden');
            $.ajax({
                url: "{{ route('member.report.data') }}",
                type: "GET",
                data: filters,
                beforeSend: function () {
                    const colspan = getSelectedColumns().length + 1;
                    $('#reportTableBody').html(`
                    <tr>
                        <td colspan="${colspan}"
                            class="text-center py-10
                                   text-gray-500">

                            <div class="inline-flex
                                        items-center gap-2">

                                <svg class="animate-spin
                                            h-5 w-5
                                            text-indigo-600"
                                     xmlns="http://www.w3.org/2000/svg"
                                     fill="none"
                                     viewBox="0 0 24 24">

                                    <circle
                                        class="opacity-25"
                                        cx="12"
                                        cy="12"
                                        r="10"
                                        stroke="currentColor"
                                        stroke-width="4">
                                    </circle>

                                    <path
                                        class="opacity-75"
                                        fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373
                                           0 0 5.373 0 12h4zm2 5.291A7.962
                                           7.962 0 014 12H0c0 3.042
                                           1.135 5.824 3 7.938l3-2.647z">
                                    </path>

                                </svg>
                                Loading member report...
                            </div>

                        </td>

                    </tr>

                `);

                },


                /*
                |--------------------------------------------------------------------------
                | Success
                |--------------------------------------------------------------------------
                */

                success: function (res) {
                    $('#reportLoading').addClass('hidden');

                    if (res.metrics) {
                        $('#totalMembersCard').text(res.metrics.total ?? 0);
                        $('#activeMembersCard').text(res.metrics.active ?? 0);
                        $('#inactiveMembersCard').text(res.metrics.inactive ?? 0);
                    }
                    const members = res.members;
                    let tbody = '';

                    if (!members.data || members.data.length === 0) {
                        const colspan = getSelectedColumns().length + 1;
                        tbody = `
                        <tr>
                            <td colspan="${colspan}"
                                class="text-center py-10 text-gray-500">
                                No members found
                                matching your filters.
                            </td>
                        </tr>
                    `;
                    }
                    else {
                        members.data.forEach(
                            function (member, index) {
                                const sl = ((members.current_page - 1) * members.per_page) + index + 1;
                                tbody += renderMemberRow(member, sl);
                            }
                        );
                    }

                    $('#reportTableBody').html(tbody);
                    const from = members.from ?? 0;
                    const to = members.to ?? 0;
                    const total = members.total ?? 0;
                    $('#paginationInfo').text(
                        `Showing ${from} to ${to} of ${total} entries`
                    );
                    renderPagination(members);
                },
                error: function () {
                    $('#reportLoading').addClass('hidden');
                    const colspan = getSelectedColumns().length + 1;
                    $('#reportTableBody').html(`
                    <tr>

                        <td colspan="${colspan}"
                            class="text-center py-10
                                   text-red-500">
                            Something went wrong while
                            loading the member report.

                        </td>

                    </tr>

                `);

                }

            });

        }


        /*
        |--------------------------------------------------------------------------
        | Pagination
        |--------------------------------------------------------------------------
        */

        function renderPagination(data) {

            let html = '';


            if (data.last_page <= 1) {

                $('#pagination').html('');

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | Previous
            |--------------------------------------------------------------------------
            */

            html += `

            <button
                onclick="loadReport(${data.current_page - 1})"
                ${data.current_page === 1 ? 'disabled' : ''}
                class="px-3 py-1 border border-gray-300
                       rounded-md text-xs font-medium
                       ${
                data.current_page === 1
                    ? 'opacity-50 cursor-not-allowed'
                    : 'hover:bg-gray-100'
            }">

                &laquo;

            </button>

        `;


            /*
            |--------------------------------------------------------------------------
            | Page Numbers
            |--------------------------------------------------------------------------
            */

            let start = Math.max(
                1,
                data.current_page - 2
            );


            let end = Math.min(
                data.last_page,
                start + 4
            );


            for (
                let i = start;
                i <= end;
                i++
            ) {

                const active =
                    i === data.current_page;


                html += `

                <button
                    onclick="loadReport(${i})"
                    class="px-3 py-1 border text-xs
                           font-medium rounded-md
                           ${
                    active
                        ? 'bg-indigo-600 text-white border-indigo-600'
                        : 'border-gray-300 hover:bg-gray-100 text-gray-700'
                }">

                    ${i}

                </button>

            `;

            }


            /*
            |--------------------------------------------------------------------------
            | Next
            |--------------------------------------------------------------------------
            */

            html += `

            <button
                onclick="loadReport(${data.current_page + 1})"
                ${
                data.current_page === data.last_page
                    ? 'disabled'
                    : ''
            }
                class="px-3 py-1 border border-gray-300
                       rounded-md text-xs font-medium
                       ${
                data.current_page === data.last_page
                    ? 'opacity-50 cursor-not-allowed'
                    : 'hover:bg-gray-100'
            }">

                &raquo;

            </button>

        `;
            $('#pagination').html(html);

        }


        /*
        |--------------------------------------------------------------------------
        | Escape HTML
        |--------------------------------------------------------------------------
        */

        function escapeHtml(value) {
            if (value === null || value === undefined) {
                return '-';
            }
            return $('<div>').text(value).html();
        }


        /*
        |--------------------------------------------------------------------------
        | Export Report
        |--------------------------------------------------------------------------
        */

        function exportReport(type) {

            const filters =
                getReportFilters();


            const params =
                new URLSearchParams();


            /*
            |--------------------------------------------------------------------------
            | Filters
            |--------------------------------------------------------------------------
            */

            Object.keys(filters).forEach(function (key) {

                if (key === 'page' || key === 'perPage' || key === 'columns') {
                    return;
                }
                const value = filters[key];

                if (value !== null && value !== undefined && value !== '') {
                    params.append(key, value);
                }
            });


            /*
            |--------------------------------------------------------------------------
            | Selected Columns
            |--------------------------------------------------------------------------
            */

            getSelectedColumns().forEach(function (column) {
                    params.append('columns[]', column);
                });

            /*
            |--------------------------------------------------------------------------
            | URL
            |--------------------------------------------------------------------------
            */
            let url = '';
            if (type === 'csv') {

                url =
                    "{{ route('member.report.csv') }}";

            }
            else if (type === 'excel') {

                url =
                    "{{ route('member.report.excel') }}";

            }
            else if (type === 'pdf') {

                url =
                    "{{ route('member.report.pdf') }}";

            }
            window.location.href = url + '?' + params.toString();
        }

        /*
        |--------------------------------------------------------------------------
        | Select All Columns
        |--------------------------------------------------------------------------
        */

        $('#selectAllColumns').on('click', function () {
                $('.report-column').prop('checked', true);
                loadReport(1);
        });
        /*
        |--------------------------------------------------------------------------
        | Clear All Columns
        |--------------------------------------------------------------------------
        */
        $('#clearAllColumns').on('click', function () {
                $('.report-column').prop('checked', false);
                /*
                |--------------------------------------------------------------------------
                | Keep at least one column
                |--------------------------------------------------------------------------
                */
                $('.report-column[value="full_name"]').prop('checked', true);
                loadReport(1);
            }
        );
        /*
        |--------------------------------------------------------------------------
        | Column Selection Changed
        |--------------------------------------------------------------------------
        */
        $(document).on('change', '.report-column', function () {
                if ($('.report-column:checked').length === 0) {
                    $(this).prop('checked', true);
                    return;
                }
                loadReport(1);
        });
        /*
        |--------------------------------------------------------------------------
        | Document Ready
        |--------------------------------------------------------------------------
        */
        $(document).ready(function () {
            /*
            |--------------------------------------------------------------------------
            | Initial Load
            |--------------------------------------------------------------------------
            */
            loadReport(1);
            /*
            |--------------------------------------------------------------------------
            | Filter Button
            |--------------------------------------------------------------------------
            */
            $('#btnFilter').on('click', function () {
                    loadReport(1);
                }
            );
            /*
            |--------------------------------------------------------------------------
            | Enter Key
            |--------------------------------------------------------------------------
            */
            $('#filterMemberId, ' +'#filterName, ' +'#filterPhone, ' +
                '#filterEmail, ' +'#filterProfession, ' +'#filterDesignation, ' +
                '#filterPoliceStation, ' +'#filterReferenceName').on('keypress', function (e) {
                    if (e.which === 13) {
                        loadReport(1);
                    }
                }
            );
            /*
            |--------------------------------------------------------------------------
            | Select Filters
            |--------------------------------------------------------------------------
            */
            $('#filterGender, ' +'#filterDivision, ' +'#filterDistrict, ' +
                '#filterStatus, ' +'#filterBloodGroup, ' + '#filterTshirtSize').on('change',function () {
                    loadReport(1);
            });
            /*
            |--------------------------------------------------------------------------
            | Per Page
            |--------------------------------------------------------------------------
            */
            $('#perPage').on('change', function () {
                    loadReport(1);
            });
            /*
            |--------------------------------------------------------------------------
            | Reset
            |--------------------------------------------------------------------------
            */

            $('#btnReset').on('click', function () {
                    $('#filterMemberId').val('');
                    $('#filterName').val('');
                    $('#filterGender').val('');
                    $('#filterPhone').val('');
                    $('#filterEmail').val('');
                    $('#filterProfession').val('');
                    $('#filterDesignation').val('');
                    $('#filterDivision').val('');
                    $('#filterDistrict').val('');
                    $('#filterStatus').val('');
                    $('#filterBloodGroup').val('');
                    $('#filterTshirtSize').val('');
                    $('#filterPoliceStation').val('');
                    $('#filterReferenceName').val('');
                    $('#perPage').val('25');
                    /*
                    |--------------------------------------------------------------------------
                    | Restore Default Columns
                    |--------------------------------------------------------------------------
                    */
                    $('.report-column').prop('checked', false);
                    const defaultColumns = [
                        'group_member_no',
                        'full_name',
                        'gender',
                        'mobile_no',
                        'email',
                        'profession',
                        'division',
                        'district',
                        'status'
                    ];
                    defaultColumns.forEach(function (column) {
                            $(`.report-column[value="${column}"]`).prop('checked', true);
                        }
                    );
                    loadReport(1);
            });
            /*
            |--------------------------------------------------------------------------
            | CSV
            |--------------------------------------------------------------------------
            */
            $('#btnExportCsv').on('click', function () {
                    exportReport('csv');
                }
            );
            /*
            |--------------------------------------------------------------------------
            | Excel
            |--------------------------------------------------------------------------
            */
            $('#btnExportExcel').on('click', function () {
                    exportReport('excel');
                }
            );
            /*
            |--------------------------------------------------------------------------
            | PDF
            |--------------------------------------------------------------------------
            */
            $('#btnExportPdf').on('click', function () {
                    exportReport('pdf');
                }
            );
        });

    </script>

@endpush