@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>Coupons & Offers</h3>
    </div>

    <div>
        <a href="{{route('admin.add_couponOffer')}}" class="btn btn-primary">
            Add coupons & offers
        </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>S.NO</th>
                    <th>NAME</th>
                    <th>CODE</th>
                    <th>TYPE</th>
                    <th>DISCOUNT</th>
                    <th>APPLICABLE ON</th>
                    <th>VALID FROM</th>
                    <th>VALID UNTIL</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 couponOfferData = [

            {
                sno: 1,
                name: 'Welcome Offer',
                code: 'WELCOME10',
                type: 'Coupon',
                discount: '10%',
                applicable_on: 'All Products',
                valid_from: '18/06/2026',
                valid_until: '31/07/2026',
                status: 'Active'
            },

            {
                sno: 2,
                name: 'Diwali Gold Offer',
                code: '-',
                type: 'Offer',
                discount: '20%',
                applicable_on: 'Gold Jewellery',
                valid_from: '20/08/2026',
                valid_until: '05/09/2026',
                status: 'Upcoming'
            },

            {
                sno: 3,
                name: 'Ring Special',
                code: 'RING500',
                type: 'Coupon',
                discount: '₹500',
                applicable_on: 'Rings',
                valid_from: '18/07/2026',
                valid_until: '30/08/2026',
                status: 'Active'
            },

            {
                sno: 4,
                name: 'Bracelet Offer',
                code: '-',
                type: 'Offer',
                discount: '₹1,000',
                applicable_on: 'Bracelets',
                valid_from: '01/07/2026',
                valid_until: '15/08/2026',
                status: 'Expired'
            },

            {
                sno: 5,
                name: 'First Order Offer',
                code: 'FIRST20',
                type: 'Coupon',
                discount: '20%',
                applicable_on: 'First Order',
                valid_from: '10/082026',
                valid_until: '10/09/2026',
                status: 'Active'
            }

        ];


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

            data: couponOfferData,

            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: 'Coupon_Offer_Report',

                    filename: 'Coupon_Offer_Report',

                    exportOptions: {

                        columns: [

                            0,
                            1,
                            2,
                            3,
                            4,
                            5,
                            6,
                            7,
                            8

                        ]

                    }

                }

            ],


            columns: [

                {
                    data: 'sno'
                },

                {
                    data: 'name'
                },

                {
                    data: 'code'
                },

                {

                    data: 'type',

                    render: function(data) {

                        return data === 'Coupon' ?

                            '<span class="badge bg-primary">Coupon</span>' :

                            '<span class="badge bg-info text-dark">Offer</span>';

                    }

                },

                {
                    data: 'discount'
                },

                {
                    data: 'applicable_on'
                },

                {
                    data: 'valid_from'
                },

                {
                    data: 'valid_until'
                },

                {

                    data: 'status',

                    render: function(data) {

                        if (data === 'Active') {

                            return '<span class="badge bg-success">Active</span>';

                        }

                        if (data === 'Upcoming') {

                            return '<span class="badge bg-warning text-dark">Upcoming</span>';

                        }

                        return '<span class="badge bg-danger">Expired</span>';

                    }

                },


                {

                    data: null,

                    orderable: false,

                    searchable: false,

                    render: function() {

                        return `

                            <a href="{{route('admin.edit_couponOffer')}}"
                               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>

                        `;

                    }

                }

            ]

        });


        // SEARCH

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

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

        });


        // PAGE LENGTH

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

            const length = $(this).val();

            table.page.len(length).draw();

        });


        // EXPORT

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

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

        });

    });

</script>

@endsection