@include('panCardZip.layout.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row">
        <div class="col-12 my-auto pb-2">
            <div class="back_arrow">

            </div>
        </div>
        <div class="col-auto my-auto">
            <h2 class="main_title"></h2>
        </div>
    </div>

    <div class="row mb-3">
    </div>

    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-auto my-auto">
                            <h2 class="main_title">PanCard Zip Download</h2>
                        </div>
                        <div class="col-lg-auto ms-auto">
                            <button type="button" id="generateZipButton" onclick="generateZip()"
                                class="btn btn-success"><i class="fa-solid fa-download me-2"></i> Generate Zip
                            </button>
                        </div>
                    </div>

                    <div class="row ">
                        <table id="" class="table table-striped data-table-dr" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Total Count</th>
                                    <th>File Uploaded</th>
                                    <th>Action</th>
                                    <th>Comment</th>
                                    <th>Date And Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- <tr>
                                    <td>1</td>
                                    <td>
                                        <span class="badge text-bg-info">5</span>
                                    </td>
                                    <td>
                                        <div class="d-flex justify-content-center align-items-center"><a href=""
                                                style="color: #07529b;" download>
                                                <i class="fa-solid fa-download me-2"></i>
                                            </a>
                                            <div class="button_group">
                                                <span style="cursor: pointer;"
                                                    class="badge text-bg-success">Completed</span>
                                            </div>
                                        </div>

                                    </td>
                                    <td>
                                        <p class="mb-0">
                                            <span class="d-flex justify-content-center align-items-center"><i
                                                    class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                            <span class="d-flex justify-content-center align-items-center time_span"><i
                                                    class="fa fa-clock me-2"></i>07:00AM</span>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>
                                        <span class="badge text-bg-info">8</span>
                                    </td>
                                    <td>
                                        <div class="button_group">
                                            <span style="cursor: pointer;" class="badge text-bg-warning">Pending</span>
                                        </div>

                                    </td>
                                    <td>
                                        <p class="mb-0">
                                            <span class="d-flex justify-content-center align-items-center"><i
                                                    class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                            <span class="d-flex justify-content-center align-items-center time_span"><i
                                                    class="fa fa-clock me-2"></i>07:00AM</span>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>
                                        <span class="badge text-bg-info">15</span>
                                    </td>
                                    <td>
                                        <div class="button_group">
                                            <span style="cursor: pointer;" class="badge text-bg-info">In Process</span>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">
                                            <span class="d-flex justify-content-center align-items-center"><i
                                                    class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                            <span class="d-flex justify-content-center align-items-center time_span"><i
                                                    class="fa fa-clock me-2"></i>07:00AM</span>
                                        </p>
                                    </td>
                                </tr> --}}
                            <tbody>
                        </table>
                    </div>




                </div>
            </div>
        </div>

    </div>
    <div class="row">



    </div>

</div>





@include('division.layout.footer')

<script>
    function generateZip() {
        $('#generateZipButton').prop('disabled', true);
        $.ajax({
            type: "POST",
            url: "{{ route('generatePanZip') }}",
            data: {
                '_token': "{{ csrf_token() }}"
            },
            success: function(response) {
                $('#generateZipButton').prop('disabled', false);
                if (response.status === 1) {
                    $.notify(response.message, "success");
                    filterData()
                } else {
                    $.notify(response.message, "error");
                }
            },
            error: function(xhr, status, error) {
                $('#generateZipButton').prop('disabled', false);
                $.notify("An error occurred while generating the zip file request.", "error");
            }
        });
    }
</script>

<script>
    function filterData() {
        var i = 1;
        var table = $('.table').DataTable({
            scrollX: true,
            destroy: true,
            processing: true,
            serverSide: true,
            responsive: true,
            autoWidth: false,
            language: {
                searchPlaceholder: "Search"
            },
            ajax: {
                url: "{{ route('pan_card_paginate') }}",
                data: function(d) {
                    _token: "{{ csrf_token() }}";
                },
            },
            "drawCallback": function(settings) {
                // new VenoBox({
                //     selector: ".vbox-item",
                //     numeration: true,
                //     infinigall: true,
                //     share: true,
                //     spinner: 'plane'
                // });
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'count',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'success_count',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'comment',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'created_at',
                    orderable: false,
                    searchable: false
                }
            ],
            columnDefs: [{
                "aTargets": [1, 2, 3, 4, 5],
                "mRender": function(data, type, full) {
                    if (data != null) {
                        return data;
                    } else {
                        return '-';
                    }
                },
            }, ],

        });

    }

    $(document).ready(function() {
        filterData();
    });
</script>