@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('admin.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>
            </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="exportBtn">
                    <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>

<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>
    
    $(document).ready(function() {

        const bannerData = [

            {
                sno: 1,
                date: '12/01/2024',
                user_type: 'User',
                banner: "{{ asset('assets/img/bannerimg.png') }}",
                status: 'Active'
            },

            {
                sno: 2,
                date: '13/01/2024',
                user_type: 'Restaurant',
                banner: "{{ asset('assets/img/bannerimg.png') }}",
                status: 'Inactive'
            },

            {
                sno: 3,
                date: '14/01/2024',
                user_type: 'User',
                banner: "{{ asset('assets/img/bannerimg.png') }}",
                status: 'Active'
            }

        ];

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

            data: bannerData,
            pageLength: 10,
            searching: true,
            lengthChange: false,
            ordering: true,
            columnDefs: [

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

            ],

            createdRow: function(row, data, dataIndex) {

                if (dataIndex % 2 != 0) {
                    $(row).addClass('bg-primary-subtle');
                }

            },

            buttons: [

                {

                    extend: 'pdfHtml5',
                    title: 'Banner_Report',
                    filename: 'Banner_Report',
                    exportOptions: {


                        columns: [

                            0,
                            1,
                            2,
                            3

                        ],

                        format: {

                            body: function(data, row, column, node) {
                                if (column === 3) {
                                    const image = $(node).find('img');
                                    if (image.length) {
                                        return image.attr('src');
                                    }
                                }
                                return $(node).text().trim();
                            }

                        }

                    }

                }

            ],

            columns: [{
                    data: 'sno'
                },
                {
                    data: 'date'
                },
                {
                    data: 'user_type'
                },
                {

                    data: 'banner',
                    render: function(data) {

                        return `

                        <img src="${data}"
                             alt="Banner"
                             width="100"
                             height="60"
                             class="img-thumbnail">

                    `;

                    }

                },

                {
                    data: 'status',
                    render: function(data) {
                        return data === 'Active' ?
                            '<span class="badge bg-success">Active</span>' :
                            '<span class="badge bg-danger">Inactive</span>';
                    }
                },


                {

                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function() {

                        return `
                        <button type="button"
                                class="btn btn-danger btn-sm"
                                data-bs-toggle="modal"
                                data-bs-target="#delete">

                            <i class="ti tabler-trash"></i>
                        </button>

                    `;

                    }

                }

            ]

        });

        $('#searchBox').on('keyup', function() {
            table.search(this.value).draw();
        });

        $('#pageLength').on('change', function() {
            const length = $(this).val();
            table.page.len(length).draw();

        });

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

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

        });
    });

</script>

@endsection