@extends('layouts.master')

@section('title', 'Individual Participants')
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/quill.snow.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">

    rel="stylesheet" integrity="sha512-XXXX" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/bootstrap.css') }}">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">


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

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

    <!-- DataTables CSS -->

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

    <!-- DataTables CSS -->

    <!-- ApexCharts CSS -->

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <!-- ApexCharts CSS -->

    <!-- Admin CSS-->

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

    <!-- End Admin CSS -->


@endsection

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

@section('main_content')
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-3 col-sm-6">
                <div class="card h-100">
                    <div class="card-header card-no-border pb-0">
                        <div class="header-top daily-revenue-card">
                            <h4>Total Individual Participants</h4>
                            <div class="d-flex align-items-center gap-2">
                                <!-- Custom dropdown -->
                                <div class="dropdown icon-dropdown">
                                    <button class="btn" id="participantDropdownBtn" type="button">
                                        <i class="icon-more-alt"></i>
                                    </button>
                                    <div class="dropdown-menu d-none" id="participantDropdownMenu">
                                        <a class="dropdown-item" href="#" data-period="weekly">Weekly</a>
                                        <a class="dropdown-item" href="#" data-period="monthly">Monthly</a>
                                        <a class="dropdown-item" href="#" data-period="yearly">Yearly</a>
                                        <a class="dropdown-item" href="#" data-period="custom"
                                            id="customDateRangeBtn">Custom</a>
                                    </div>
                                </div>
                                <!-- Hidden date range picker -->
                                <input type="text" id="customDateRange" class="form-control form-control-sm d-none"
                                    placeholder="Select date range">
                            </div>
                        </div>
                    </div>
                    <div class="card-body total-sells">
                        <div class="d-flex align-items-center gap-3 mb-2">
                            <div class="flex-shrink-0">
                                <img src="{{ asset('assets/images/individual_participant/customers.png') }}"
                                    alt="icon">
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center gap-2">
                                    <h2 id="totalParticipants">0</h2>
                                    <p class="mt-2 text-center fw-semibold">Individual Participants</p>
                                    <div class="d-flex total-icon">
                                        <p class="mb-0 up-arrow bg-light-success">
                                            <i class="fa fa-arrow-up text-success"></i>
                                        </p>
                                        <span id="participantGrowth" class="f-w-500 font-success">0%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Chart with more space -->
                        <div id="participantChart" class="participant-chart"></div>
                    </div>
                </div>
                <!-- Text moved outside -->

            </div>


            <div class="col-xl-3 col-sm-6">
                <div class="card h-100">
                    <div class="card-header card-no-border pb-0">
                        <div class="header-top daily-revenue-card">
                            <h4>New Participants</h4>
                            <div class="d-flex align-items-center gap-2">
                                <!-- Custom dropdown -->
                                <div class="dropdown icon-dropdown">
                                    <button class="btn" id="newParticipantsDropdownBtn" type="button">
                                        <i class="icon-more-alt"></i>
                                    </button>
                                    <div class="dropdown-menu d-none" id="newParticipantsDropdownMenu">
                                        <a class="dropdown-item" href="#" data-period="weekly">Weekly</a>
                                        <a class="dropdown-item" href="#" data-period="monthly">Monthly</a>
                                        <a class="dropdown-item" href="#" data-period="yearly">Yearly</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body total-sells-2">
                        <div class="d-flex align-items-center gap-3 mb-2">
                            <div class="flex-shrink-0">
                                <img src="{{ asset('assets/images/individual_participant/new_customer.png') }}"
                                    alt="icon">
                            </div>


                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center gap-2">
                                    <h2 id="newParticipants">0</h2>
                                    <p class="mt-2 text-center fw-semibold" id="newParticipantsPeriod">Compared to last
                                        week
                                    </p>
                                    <div class="d-flex total-icon">
                                        <p class="mb-0 up-arrow bg-light-success">
                                            <i class="fa fa-arrow-up text-success"></i>
                                        </p>
                                        <span id="newParticipantsGrowth" class="f-w-500 font-success">+0%</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div id="newParticipantsChart" class="participant-chart"></div>
                    </div>
                </div>
            </div>

            <!-- Active Participants Card -->
            <div class="col-xl-3 col-sm-6">
                <div class="card h-100">
                    <div class="card-header card-no-border pb-0">
                        <div class="header-top daily-revenue-card">
                            <h4>Active Participants</h4>
                            <div class="dropdown icon-dropdown">
                                <button class="btn dropdown-toggle" id="activeParticipantsDropdown" type="button">
                                    <i class="icon-more-alt"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="activeParticipantsDropdown">
                                    <a class="dropdown-item" href="#" data-period="weekly">Weekly</a>
                                    <a class="dropdown-item" href="#" data-period="monthly">Monthly</a>
                                    <a class="dropdown-item" href="#" data-period="yearly">Yearly</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body pb-0 total-sells-3">
                        <div class="d-flex align-items-center gap-3">
                            <div class="flex-shrink-0">
                                <img src="{{ asset('assets/images/individual_participant/active_customer.png') }}" alt="icon">
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center gap-2">
                                    <h2 id="activeParticipants">0</h2>
                                    <div class="d-flex total-icon">
                                        <p class="mb-0 up-arrow bg-light-success">
                                            <i class="fa fa-arrow-up text-success"></i>
                                        </p>
                                        <span id="activeParticipantsGrowth" class="f-w-500 font-success">+0%</span>
                                    </div>
                                </div>
                                <p class="text-truncate" id="activeParticipantsPeriod">Compared to last week</p>
                            </div>
                        </div>
                        <div id="activeParticipantsChart"></div>
                    </div>
                </div>
            </div>

            <!-- Inactive Participants Card -->
            <div class="col-xl-3 col-sm-6">
                <div class="card h-100">
                    <div class="card-header card-no-border pb-0">
                        <div class="header-top daily-revenue-card">
                            <h4>Inactive Participants</h4>
                            <div class="dropdown icon-dropdown">
                                <button class="btn dropdown-toggle" id="inactiveParticipantsDropdown" type="button">
                                    <i class="icon-more-alt"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end"
                                    aria-labelledby="inactiveParticipantsDropdown">
                                    <a class="dropdown-item" href="#" data-period="weekly">Weekly</a>
                                    <a class="dropdown-item" href="#" data-period="monthly">Monthly</a>
                                    <a class="dropdown-item" href="#" data-period="yearly">Yearly</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body pb-0 total-sells-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="flex-shrink-0">
                                <img src="{{ asset('assets/images/individual_participant/inactive_customer.png') }}"
                                    alt="icon">
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center gap-2">
                                    <h2 id="inactiveParticipants">0</h2>
                                    <div class="d-flex total-icon">
                                        <p class="mb-0 up-arrow bg-light-danger">
                                            <i class="fa fa-arrow-down text-danger"></i>
                                        </p>
                                        <span id="inactiveParticipantsGrowth" class="f-w-500 font-danger">-0%</span>
                                    </div>
                                </div>
                                <p class="text-truncate" id="inactiveParticipantsPeriod">Compared to last week</p>
                            </div>
                        </div>
                        <div id="inactiveParticipantsChart"></div>
                    </div>
                </div>
            </div>

        </div>


        <div class="row">

            <div class="container-fluid py-4">


                <!-- DataTable Card -->
                <div class="card shadow">
                    <div class="card-header pb-0 card-no-border">

                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="mb-3"><i class="bi bi-people-fill me-2"></i> Individual Participants</h4>
                            <a href="{{ route('admin.participants.individual.create') }}" class="btn btn-success">
                                <i class="bi bi-plus-circle me-1"></i> Add New
                            </a>
                        </div>
                        <span>
                            This section lists all <strong>Takaful individual participants</strong>. Each participant
                            contributes to the shared risk pool,
                            managed according to Shariah principles. You can view, search, and manage participant records
                            including their
                            identification details, contributions, certificates, and claims history.
                        </span>

                    </div>
                    <div class="card-body">
                        <div class="table-responsive theme-scrollbar">
                        <table id="participantsTable" class="table table-sm table-bordered table-striped display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Profile</th> <!-- Shows profile picture or initials -->
                                    <th>Full Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Policy Status</th> <!-- Colored pills -->
                                    <th>Policy Progress</th> <!-- Start → Expiration progress bar -->
                                    <th>Actions</th> <!-- Edit / Details / Delete -->
                                </tr>
                            </thead>
                        </table>

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>




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

@section('scripts')

       <!-- latest jquery-->


    <!-- calendar js-->
    <script src="{{ asset('assets/js/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2/select2-custom.js') }}"></script>
    <script src="{{ asset('assets/js/editors/quill.js') }}"></script>

    <script src="{{ asset('assets/js/bootstrap/bootstrap.bundle.min.js') }}"></script>

    <script src="{{ asset('assets/js/bookmark/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom-validation/validation.js') }}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

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

    <!-- datatables js -->

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

    <!-- datatables js -->


    <!-- Moment.js (required by daterangepicker) -->
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

    <!-- Date Range Picker -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <!-- ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <!-- Include daterangepicker -->

    <!-- Admin Script-->
    <script src="{{ asset('assets/js/admin/participants/individual/index.blade.js') }}"></script>
    <script src="{{ asset('assets/js/admin/participants/individual/participants_individual_dashboard.js') }}"></script>

    <!--Admin Script-->


    <script>
        const participantDataUrl = "{{ route('admin.participants.individual.data') }}";
        const allparticipantDataUrl = "{{ route('admin.dashboard.participant.count') }}";
        const newParticipantsDataUrl = "{{ route('admin.participants.individual.new.data') }}";
        const activeParticipantUrl = "{{ route('admin.participants.active.data') }}";
        const inactiveParticipantUrl = "{{ route('admin.participants.inactive.data') }}";
    </script>


@endsection