@extends('Admin.layout')

<style>
    .dt-search {
        display: none !important;
    }
</style>

@section('content')

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

        <div>
            <h3>Banner</h3>
        </div>

        <div>
            <a href="{{ route('add_banner') }}" class="btn btn-primary">
                Add Banner
            </a>
        </div>

    </div>


    <div class="card p-5">

        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-4">

            <div class="mb-3 mb-lg-0">
                <select id="pageLength" class="form-select w-auto">
                    <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-lg-6 col-12 mb-3">
                <div class="d-flex flex-column flex-lg-row gap-3">

                    <!-- Search -->
                    <div class="search-box flex-grow-1">
                        <input type="search" id="searchBox" class="form-control" placeholder="Search">
                    </div>

                    <!-- Export -->
                    <button type="button" class="btn btn-primary border flex-shrink-0" id="excelExport">
                        <i class="ti tabler-download me-2"></i>Export</button>

                </div>

            </div>

        </div>


        <!-- Banner Table -->

        <div class="table-responsive p-2">

            <table id="table" class="table">

                <thead class="bg-primary-subtle">

                    <tr>
                        <th>SNO</th>
                        <th>DATE</th>
                        <th>USER TYPE</th>
                        <th>BANNER</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

    <div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">

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

            <div class="modal-content rounded-4 text-center p-4">

                <h5 class="fw-bold mb-2">
                    Change Status?
                </h5>

                <p class="text-muted mb-4" id="statusMessage">
                    Are you sure you want to change the banner status?
                </p>


                <form action="{{ route('change_banner_status') }}" method="POST" id="statusForm">

                    @csrf

                    <input type="hidden" name="id" id="statusBannerId">

                    <input type="hidden" name="status" id="statusValue">


                    <div class="d-flex justify-content-center gap-3">

                        <button type="button" class="btn btn-outline-primary px-4" data-bs-dismiss="modal">

                            Cancel

                        </button>


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

                            Yes, Sure

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"
        aria-hidden="true">

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

            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">
                    Are you sure!!
                </h5>

                <p class="text-muted">
                    Are you confirm to delete this banner?
                </p>

                <form action="{{ route('delete_banner') }}" method="POST" id="deleteForm">

                    @csrf

                    <input type="hidden" name="id" id="deleteBannerId">

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

                        <button type="button" class="btn btn-outline-primary px-4 fw-semibold" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-danger px-4 fw-semibold" id="confirmDeleteBtn">
                            Yes, Sure
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


    <script src="{{ asset('assets/vendor/libs/jquery/jquery.js') }}"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.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/2.4.2/js/buttons.html5.min.js"></script>


    <script>

        $(document).ready(function () {

            const table = $('#table').DataTable({

                processing: true,

                serverSide: true,

                ajax: "{{ route('banner_data') }}",

                pageLength: 10,

                lengthChange: false,

                searching: true,

                ordering: true,
                buttons: [
                    {
                        extend: 'excelHtml5',
                        title: 'Banner Report',
                        filename: 'Banner Report',

                        exportOptions: {
                            // Exclude Action column
                            columns: [0, 1, 2, 3, 4],

                            format: {
                                body: function (data, row, column, node) {

                                    // Banner image column
                                    if (column === 3) {
                                        return 'Banner';
                                    }

                                    // Remove HTML from status
                                    return $('<div>')
                                        .html(data)
                                        .text()
                                        .trim();
                                }
                            }
                        },

                        className: 'd-none'
                    }
                ],

                columns: [

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

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

                    {
                        data: 'user_type',
                        name: 'user_type'
                    },

                    {
                        data: 'banner_image',
                        name: 'banner',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'status',
                        name: 'is_active',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }

                ],

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap text-center'
                    }

                ]

            });


            // Search

            $('#searchBox').on('keyup', function () {

                table.search(this.value).draw();

            });


            // Page length

            $('#pageLength').on('change', function () {

                table.page.len($(this).val()).draw();

            });

            $('#excelExport').click(function () {
                table.button('.buttons-excel').trigger();
            });

        });

    </script>

    <script>

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

            const id = $(this).data('id');

            const status = $(this).data('status');

            $('#statusBannerId').val(id);

            $('#statusValue').val(status);


            if (status == 1) {

                $('#statusMessage').text(
                    'Are you sure you want to activate this banner?'
                );

                $('#confirmStatusBtn')
                    .removeClass('btn-danger')
                    .addClass('btn-success')
                    .text('Yes, Activate');

            } else {

                $('#statusMessage').text(
                    'Are you sure you want to deactivate this banner?'
                );

                $('#confirmStatusBtn')
                    .removeClass('btn-success')
                    .addClass('btn-danger')
                    .text('Yes, Deactivate');

            }

        });

    </script>

    <script>

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

            const id = $(this).data('id');

            $('#deleteBannerId').val(id);

        });

        document.getElementById('confirmDeleteBtn').addEventListener('click', function () {

            let btn = this;

            btn.disabled = true;

            btn.innerText = 'Processing...';

            document.getElementById('deleteForm').submit();

        });

    </script>




    <script>
        document.getElementById('confirmStatusBtn').addEventListener('click', function () {
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('statusForm').submit();
        });
    </script>




@endsection