@extends('admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<style>
    /* Custom Search Box with Icon */
    .search-container {
        position: relative;
    }

    .search-container i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
    }

    .search-container input {
        padding-left: 35px !important;
        border-radius: 6px;
        border: 1px solid #ddd;
    }

    /* Pagination Right Alignment */
    .dataTables_wrapper .dataTables_paginate {
        float: right !important;
        padding-top: 1.25em;
    }

    /* Custom Excel Button */
    .btn-excel {
        background-color: #f3f4f7;
        border: 1px solid #ddd;
        color: #555;
        font-weight: 500;
    }

    /* Badge/Status Styling as per image colors */
    .status-pending {
        color: #ff9f43;
        font-weight: 600;
    }

    .status-canceled {
        color: #ea5455;
        font-weight: 600;
    }

    .status-approved {
        color: #28c76f;
        font-weight: 600;
    }

    #usersTable {
        white-space: nowrap;
    }

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

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="row align-items-center justify-content-between mb-4 mt-3">
    <div class="col-auto d-flex align-items-center">

        <h5 class="mb-0">
            <!-- <a href="{{ route('admin.advance_dashboard') }}" class="btn btn-white btn-icon me-3 shadow-sm">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">

                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                        <path d="M15 6l-6 6l6 6" />

                    </svg>

                </a> -->
            Level Master Report
        </h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('admin.purchase_level_master') }}" class="btn btn-primary px-4">
            Create level
        </a>
    </div>
</div>



<div class="card shadow-sm border-0">
    <div class="card-body p-3">
        <div class="row">
            <h5 class="mb-0">Filters</h5>
            <div class="row align-items-center m-3 g-2">

                <!-- Left : Page Length -->
                <div class="col-12 col-lg-auto">
                    <select id="customLength" class="form-select form-select-sm">
                        <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-12 col-lg-5">
                </div>
                <!-- Right Section -->
                <div class="col-12 col-lg-6">
                    <div class="d-flex flex-column flex-lg-row gap-2 justify-content-lg-end">

                        <!-- Search -->
                        <!-- <div class="input-group">
                            <span class="input-group-text bg-white border-end-0">
                                <i class="ti tabler-search"></i>
                            </span>
                            <input type="text" id="customSearch" class="form-control border-start-0"
                                placeholder="Search">
                        </div>

                        <select id="status" class="form-select">
                            <option value="">Select Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select> -->

                        <!-- Buttons -->
                        <div class="d-flex flex-column flex-lg-row gap-2">
                            <!-- <button class="btn btn-primary px-4 w-100">
                                Search
                            </button> -->
                            <button class="btn btn-light px-4 w-100">
                                <i class="ti tabler-upload"></i> Excel
                            </button>
                        </div>

                    </div>
                </div>

            </div>


            <div class="row mt-2">
                <!-- <div class="d-flex justify-content-between align-items-center p-3">
                                    <select id="customLength" class="form-select form-select-sm" style="width: 80px;">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                    </select>

                                    <div class="d-flex gap-2">
                                        <div class="input-group">
                                            <span class="input-group-text bg-white border-end-0"><i class="ti tabler-search"></i></span>
                                            <input type="text" id="customSearch" class="form-control border-start-0"
                                                placeholder="Search User">
                                        </div>

                                    </div>
                                </div> -->

                <div class="table-responsive">
                    <table class="table w-100 mb-0" id="usersTable">
                        <thead class="table-primary-custom">
                            <tr>
                                <th>SNO</th>
                                <th>DATE</th>

                                <th>LEVEL 1</th>
                                <th>LEVEL 2</th>
                                <th>LEVEL 3</th>
                                <th>LEVEL 4</th>
                                <th>LEVEL 5</th>
                                <th>LEVEL 6</th>
                                <th>LEVEL 7</th>
                                <th>LEVEL 8</th>
                                <th>LEVEL 9</th>
                                <th>LEVEL 10</th>
                                <th>LEVEL 11</th>
                                <th>LEVEL 12</th>
                                <th>STATUS</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>


        </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>
{{--
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css"> --}}

<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<script>
    $(document).ready(function() {

        let table = $('#usersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.purchase_level_master_table') }}",
                data: function(d) {

                    d.status = $('#status').val();
                }
            },

            dom: 'Brt<"d-flex justify-content-between align-items-center p-3"ip>',

            buttons: [{
                extend: 'excelHtml5',
                title: 'Level Master History',
                exportOptions: {
                    columns: ':visible'
                }
            }],

            ordering: false,

            columns: [{
                    data: 'DT_RowIndex',
                    searchable: false
                },
                {
                    data: 'date'
                },

                {
                    data: 'level_1'
                },
                {
                    data: 'level_2'
                },
                {
                    data: 'level_3'
                },
                {
                    data: 'level_4'
                },
                {
                    data: 'level_5'
                },
                {
                    data: 'level_6'
                },
                {
                    data: 'level_7'
                },
                {
                    data: 'level_8'
                },
                {
                    data: 'level_9'
                },
                {
                    data: 'level_10'
                },
                {
                    data: 'level_11'
                },
                {
                    data: 'level_12'
                },
                {
                    data: 'status',
                    orderable: false,
                    searchable: false
                }
            ]
        });

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

        $('#customLength').on('change', function() {
            table.page.len(this.value).draw();
        });

        $('#btnSearch').on('click', function() {
            table.ajax.reload();
        });

        // Manual Excel Button
        $('#btnExcel').click(function() {
            table.button('.buttons-excel').trigger();
        });

    });
</script>
@endsection