@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.bootstrap5.min.css">
<style>
    .dt-search {
        display: none !important;
    }
</style>
@section('content')
    <div class="row d-flex justify-content-between">
        <div class="col-auto">
            <h5>

                Popup Report
            </h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('popup_manager_form') }}" class="btn btn-primary mb-2">
                <i class="ti tabler-plus"></i>&nbsp;Add Popup
            </a>
            <a href="{{ route('completed_popup') }}" class="btn btn-primary mb-2">
                Completed Popups
            </a>
        </div>
    </div>
    <div class="card p-0 mt-3">
        <div class="row mb-3 g-1 align-items-center p-3">

            <!-- Page Length -->
            <div class="col-md-1 mt-auto mb-2">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>

            <div class="col d-flex justify-content-end align-items-center gap-3 mt-auto">

                <div class="position-relative mb-2">
                    <input type="text" id="searchBox" class="form-control" placeholder="Search...">
                </div>

                <button class="btn btn-label-secondary mb-2" id="exportExcel">
                    <i class="ti tabler-download"></i>&nbsp;Export
                </button>

            </div>


        </div>
        <div class="card-datatable table-responsive pt-0">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table id="dept" class="table">
                            <thead>
                                <th class="text-nowrap">S.No</th>
                                <th class="text-nowrap">Date & Time</th>
                                <th class="text-nowrap">User Name</th>
                                <th class="text-nowrap">Description</th>
                                <th style="display:none;">Description Export</th>
                                <th class="text-nowrap">Popup Status</th>
                                <th class="text-nowrap">Noted Count</th>
                                <th class="text-nowrap">Done Status</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Status Change Modal -->
    <div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-sm">

            <div class="modal-content border-0 shadow-lg">

                <div class="modal-header border-0">



                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

                </div>

                <div class="modal-body text-center">
                    <h5 class="text-center">
                        Change Status
                    </h5>
                    <div class="mb-3">
                        <i class="fa-solid fa-circle-exclamation text-warning" style="font-size:55px;"></i>
                    </div>

                    <h4 class="fw-bold mb-2">
                        Confirm Action
                    </h4>

                    <p class="text-muted mb-0" id="statusMessage">
                        Do you want to inactive?
                    </p>

                </div>

                <div class="text-center mb-5">



                    <button type="button" class="btn btn-danger" id="confirmStatusBtn">

                        Yes, Continue

                    </button>

                </div>

            </div>

        </div>

    </div>
    <!-- Description Modal -->
    <div class="modal fade" id="descriptionModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content border-0 shadow-lg">

                <div class="modal-header">
                    <h5 class="modal-title">Popup Description</h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>

                <div class="modal-body">
                    <p id="popupDescription" class="mb-0"></p>
                </div>

            </div>

        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.bootstrap5.min.js"></script>

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

    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.html5.min.js"></script>
    <script>
        $(document).ready(function () {

            let table = $('#dept').DataTable({

                processing: true,
                serverSide: true,
                ajax: "{{ route('getPopups') }}",
                dom: 'Brtip',

                buttons: [{
                    extend: 'excelHtml5',

                    title: 'Popup Report',

                    text: 'Export Excel',

                    className: 'd-none',

                    exportOptions: {
                        columns: [0, 1, 2, 4, 5, 6, 7]
                    }
                }],
                pageLength: 10,
                lengthChange: false,
                searching: true,
                ordering: true,
                info: true,

                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap text-center align-middle'
                }],

                columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false
                },

                {
                    data: 'datetime',
                    name: 'created_at'
                },

                {
                    data: 'username',
                    name: 'username'
                },
                {
                    data: 'description',
                    name: 'message'
                },

                {
                    data: 'description_export',
                    name: 'description_export',
                    visible: false
                },

                {
                    data: 'popup_status',
                    render: function (data, type, row) {

                        let label = data === 'active' ? 'Active' : 'Inactive';

                        let badgeClass = data === 'active' ?
                            'bg-label-success' :
                            'bg-label-danger';

                        return `
                        <span class="badge ${badgeClass} popup-status-btn"
                            role="button"
                            data-id="${row.id}"
                            data-status="${data}">
                            ${label}
                        </span>
                    `;
                    }
                },


                {
                    data: 'noted_count',
                    name: 'count',
                    render: function (data) {
                        return `<span class="badge bg-label-primary">${data}</span>`;
                    }
                },

                {
                    data: 'done_status',
                    name: 'done_status',
                    render: function (data) {

                        let label = (data === 'done') ? 'Completed' : 'Pending';

                        let statusClass = (data === 'done') ?
                            'bg-label-success' :
                            'bg-label-warning';

                        return `
                                    <span class="badge ${statusClass}">
                                        ${label}
                                    </span>
                                `;
                    }
                }
                ]
            });

            // Custom Search
            $('#searchBox').on('keyup', function () {
                table.search($(this).val()).draw();
            });

            // Custom Page Length
            $('#pageLength').on('change', function () {

                let value = $(this).val();

                if (value === 'All') {
                    table.page.len(-1).draw();
                } else {
                    table.page.len(parseInt(value)).draw();
                }

            });
            $('#exportExcel').on('click', function () {

                table.button('.buttons-excel').trigger();

            });

        });
    </script>
    <script>
        $(document).on('click', '.view-description', function () {

            let message = $(this).data('message');

            $('#popupDescription').text(message);

            let modal = new bootstrap.Modal(
                document.getElementById('descriptionModal')
            );

            modal.show();

        });
    </script>
    <script>
        let selectedRowId = null;

        $(document).on('click', '.popup-status-btn', function () {

            let status = $(this).data('status');
            selectedRowId = $(this).data('id');

            if (status === 'active') {

                $('#statusMessage').text('Do you want to inactive?');

            } else {

                $('#statusMessage').text('Do you want to active?');

            }

            let modal = new bootstrap.Modal(
                document.getElementById('statusModal')
            );

            modal.show();

        });

        $('#confirmStatusBtn').on('click', function () {

            $.ajax({
                url: "{{ route('update_popup_status') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: selectedRowId
                },
                success: function (response) {

                    if (response.status) {

                        // close modal
                        let modalEl = document.getElementById('statusModal');
                        let modal = bootstrap.Modal.getInstance(modalEl);
                        modal.hide();

                        // reload table (NO refresh page)
                        $('#dept').DataTable().ajax.reload(null, false);
                    }

                }
            });

        });
    </script>
@endsection