@extends('employee.layouts')

@section('title', 'Store Sales History')

@section('header')

<link
    rel="stylesheet"
    href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css"
>

<link
    rel="stylesheet"
    href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css"
>

<link
    rel="stylesheet"
    href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css"
>

<link
    rel="stylesheet"
    href="{{ asset('/assets') }}/css/formILY.css"
>

<style>
    #totalAmountDisplay {
        font-size: 20px !important;
        font-weight: 600 !important;
    }

    #data-table td {
        vertical-align: middle;
    }

    #data-table .btn {
        margin-right: 3px;
        margin-bottom: 3px;
        white-space: nowrap;
    }
</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper category-container">

    <div class="row">

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

            <h3 class="page-top-heading">
                Store Sales History
            </h3>

        </div>

    </div>


    <div class="row mt-4">

        <div class="col-lg-12">

            <div class="card datatable-card">

                <div
                    class="card-header bg-white border-bottom d-flex justify-content-end"
                >

                    <button
                        type="button"
                        class="btn btn-success excel-btn"
                    >
                        Export to Excel
                    </button>

                </div>


                <div class="card-body">

                    <div class="table-responsive">

                        <table
                            id="data-table"
                            class="table nowrap align-middle"
                            style="width:100%"
                        >

                            <thead>

                                <tr>

                                    <th>SN</th>

                                    <th>ORDER ID</th>

                                    <th>NAME</th>

                                    <th>USER ID</th>

                                    <th>PHONE No</th>

                                    <th>DATE</th>

                                    <th>MEMBERSHIP</th>

                                    <th>PAYMENT MODE</th>

                                    <th>REMARK</th>

                                    <th>AMOUNT</th>

                                    <th>ACTION</th>

                                </tr>

                            </thead>

                            <tbody></tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    crossorigin="anonymous"
></script>

<script
    src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"
></script>

<script
    src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"
></script>

<script
    src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"
></script>

<script
    src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"
></script>

<script
    src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"
></script>

<script
    src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"
></script>

<script
    src="{{ asset('/assets') }}/js/datatable/jszip.min.js"
></script>

<script
    src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"
></script>

<script
    src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"
></script>


<script>

$(document).ready(function () {

    let table = $('#data-table').DataTable({

        processing: true,

        serverSide: true,

        responsive: false,

        scrollX: true,

        ajax: {
            url: "{{ route('employeeoffline_sales_history_data') }}",
            type: "GET"
        },

        columns: [

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

            {
                data: 'order_id',
                name: 'order_id'
            },

            {
                data: 'customer_name',
                name: 'user.name',
                orderable: false
            },

            {
                data: 'user_id',
                name: 'user_id'
            },

            {
                data: 'phone_number',
                name: 'user.phone_number',
                orderable: false
            },

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

            {
                data: 'membership',
                name: 'user.membership',
                orderable: false
            },

            {
                data: 'payment_mode',
                name: 'payment_mode'
            },

            {
                data: 'status',
                name: 'status'
            },

            {
                data: 'amount_payable',
                name: 'amount_payable'
            },

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

        ],

        order: [
            [5, 'desc']
        ],

        pageLength: 10,

        lengthMenu: [
            [10, 25, 50, 100],
            [10, 25, 50, 100]
        ],

        dom:
            "<'row mb-3 align-items-center'" +
                "<'col-md-6 d-flex align-items-center'lB>" +
                "<'col-md-6 text-end'f>" +
            ">" +
            "rtip",

        buttons: [

            {
                extend: 'excelHtml5',

                text: 'Export to Excel',

                filename: 'offline_sales',

                title: null,

                className: 'd-none',

                exportOptions: {

                    columns: [
                        0,
                        1,
                        2,
                        3,
                        4,
                        5,
                        6,
                        7,
                        8,
                        9
                    ]

                }
            }

        ]

    });


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

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

    });

});

</script>

@endsection