@extends('Admin.layout')

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

@section('content')

<div class="row align-items-center mb-5">
    <div class="col-12 col-sm">
        <h4>Category Management</h4>
    </div>

    <div class="col-12 col-sm-auto">
        <a href="{{route('admin.add_category')}}"
           class="btn btn-primary w-100">
            Add category
        </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">

        <!-- Page Length -->
        <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>


        <!-- Search + Export -->
        <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>

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

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

                            <tr>

                                <th>SNO</th>
                                <th>IMAGE</th>
                                <th>CATEGORY NAME</th>
                                <th>PRODUCTS</th>
                                <th>DISPLAY ORDERS</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 categoryData = [

        {
            sno: 1,
            image: "{{ asset('assets/img/banner.png') }}",
            category_name: 'Rings',
            products: 24,
            display_order: '1',
            status: 'Active'
        },

        {
            sno: 1,
            image: "{{ asset('assets/img/banner.png') }}",
            category_name: 'Rings',
            products: 24,
            display_order: '1',
            status: 'Active'
        },

        {
            sno: 1,
            image: "{{ asset('assets/img/banner.png') }}",
            category_name: 'Rings',
            products: 24,
            display_order: '1',
            status: 'Inactive'
        },

        
    ];

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

        data: categoryData,

        pageLength: 10,

        searching: true,

        lengthChange: false,

        ordering: true,

        columnDefs: [

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

        ],
         createdRow: function(row, data, dataIndex) {

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

            },

        buttons: [

            {

                extend: 'pdfHtml5',

                title: 'Restaurant_Report',

                filename: 'Restaurant_Report',

                exportOptions: {

                    columns: [
                        0,
                        1,
                        2,
                        3,
                        4,
                        5
                    ]

                }

            }

        ],

        columns: [

            {
                data: 'sno'
            },

             {

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

                        return `

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

                    `;

                    }

                },

            {
                data: 'category_name'
            },

            {
                data: 'products'
            },

            {
                data: 'display_order'
            },

           

                {
                    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 `

                        <a href="{{route('admin.edit_category')}}"
                           class="btn btn-primary btn-sm me-1">

                            <i class="ti tabler-edit"></i>

                        </a>


                        <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