@extends('back_office.layouts.app')

@section('content')

    <style>
        #payments-id td {
            font-size: 13px !important;
            text-align: center;
            padding-left: 0px;
            padding-right: 0px;
        }
        #payments-id th {
            font-size: 14px !important;
            text-align: center;
        }
        #payments-id_paginate {
            font-size: 14px;
        }
    </style>
    <section class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="">
                        <div class="row">
                            <div class="form-group col-5">
                                <label for="inputEmail4">Start Date</label>
                                <input type="date" class="form-control" id="start_date">
                            </div>
                            <div class="form-group col-5">
                                <label for="inputPassword4">End Date</label>
                                <input type="date" class="form-control" id="end_date">
                            </div>
                            <div class="form-group col-2" style="margin-top: 2.5%">
                                <button type="button" class="btn bg-gradient-info" id="search" style="width: 100%">Search</button>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="card-body" id="customers">
                    <div class="table-responsive">
                        {!! $dataTable->table() !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <link rel="stylesheet" href="{{asset('css/tables.css')}}">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap4.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
        <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap4.min.js"></script>
        <script src="{{env('APP_URL')}}/vendor/datatables/buttons.server-side.js"></script>
{{--            {!! $dataTable->scripts() !!}--}}
        <script>
            const table = $('#payments-id').DataTable({
                dom: 'Bfrtip',
                "oSearch": {"bSmart": false},
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('sales.index') }}",
                    type: 'GET',
                    data: function (d) {
                        // read start date from the element
                        d.from = $('#start_date').val();
                        // read end date from the element
                        d.to = $('#end_date').val();
                    }
                },
                columns: [
                    {data: 'id', name: 'id'},
                    { data: 'customer/guest', name: 'user.name' }, // Searchable customer name
                    {data: 'package', name: 'package'},
                    {data: 'init_amount', name: 'init_amount'},
                    {data: 'discount', name: 'discount'},
                    {data: 'paid_amount', name: 'paid_amount'},
                    {data: 'payment_date', name: 'payment_date'},
                    {data: 'type', name: 'type'},
                    {data: 'payment_type', name: 'payment_type'},
                    {data: 'action', name: 'action'},
                ],
            });

            // set on change date picker
            $('#search').on('click', function() {
                var from = $("#start_date").val();
                var to = $("#end_date").val();
                if(from && to) {
                    table.draw();
                }
            });
        </script>
    @endpush

@endsection