@extends('user.layouts')
@section('title', 'Jilla Coordinator')
@section('header')


    <!-- DataTable CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">



@endsection
@section('content')


    <div class="container-fluid page-wrapper">

        <div class="row">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <div class="breadcrumb-box" onclick="redirectToPreviousPage()">
                        <i class="fa-solid fa-chevron-left"></i>
                    </div>
                    <div class="ms-3">
                        <h3 class="page-top-heading" style="font-weight:600 !important;">Jilla Coordinator<span
                                class="ms-2 text-primary text-decoration-underline">99455</span></h3>
                    </div>
                </div>
            </div>
        </div>


        <div class="row mt-4">
            <div class="card basic-card">
                <div class="card-body">
                    <div class="row mt-2">
                        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
                            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                                <div class="card-body">
                                    <p class="card-title">Wallet Balance</p>
                                    <h6 class="value-show"><span class="pe-2">₹</span>12</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
                            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                                <div class="card-body">
                                    <p class="card-title">Total Reward</p>
                                    <h6 class="value-show"><span class="pe-2">₹</span>950</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
                            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                                <div class="card-body">
                                    <p class="card-title">Withdraw</p>
                                    <h6 class="value-show"><span class="pe-2">₹</span>50</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
                            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                                <div class="card-body">
                                    <p class="card-title">Total Referral</p>
                                    <h6 class="value-show">10</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Table Row -->
                    <div class="row mt-5">
                        <div class="table-header d-flex justify-content-between align-items-center mt-2 mb-3">
                            <div class="d-flex align-items-center">
                                <h5 class="table-sub-heading me-4">Total Referrals</h5>
                                <div>
                                    <select class="form-select month-filter-select" aria-label="MonthFilterSelect">
                                        <option value="jan"selected>January</option>
                                        <option value="1">February</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>
                            <button class="btn btn-primary excel-btn excel-jc"><i
                                    class="ri-file-excel-2-line me-2"></i>Excel</button>
                        </div>
                        <table id="data-table" class="table nowrap align-middle" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>DATE</th>
                                    <th>NAME</th>
                                    <th>PHONE NO</th>
                                    <th>DISTRICT</th>
                                    <th>AGENT ID</th>
                                    <th>JC ID</th>
                                    <th>REFERRAL A ID</th>
                                    <th>REWARD</th>
                                    <th>STATUS</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>04 Feb 2024</td>
                                    <td>John Smith</td>
                                    <td>+91 1234567890</td>
                                    <td>Kollam</td>
                                    <td>4545455</td>
                                    <td>7898965</td>
                                    <td>6563536</td>
                                    <td>₹ 25.00</td>
                                    <td>
                                        <span class="badge success-badge">Redeemed</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>04 Feb 2024</td>
                                    <td>John Smith</td>
                                    <td>+91 1234567890</td>
                                    <td>Kottayam</td>
                                    <td>4545455</td>
                                    <td></td>
                                    <td>6563536</td>
                                    <td>₹ 25.00</td>
                                    <td>
                                        <span class="badge warning-badge">In Progress</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>04 Feb 2024</td>
                                    <td>John Smith</td>
                                    <td>+91 1234567890</td>
                                    <td>Thiruvanantha Puram</td>
                                    <td>4545455</td>
                                    <td></td>
                                    <td>6563536</td>
                                    <td>₹ 25.00</td>
                                    <td>
                                        <span class="badge success-badge">Redeemed</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>






    </div>
    <!-- Container Fluid ends -->





@endsection
@section('footer')



    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- Datatable JS -->
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>



    <script>
        $(document).ready(function() {
            var table1 = $('#data-table').DataTable({
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    text: 'Export to Excel',
                    className: 'd-none',
                    filename: 'Jilla Coordinator'
                }],
                responsive: true
            });

            $('.excel-jc').on('click', function() {
                table1.button('.buttons-excel').trigger();
            });
        });
    </script>



@endsection