@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="payments">
                    <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('carpet-wash-payments.list') }}",
                    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'
                    },
                    {
                        data: 'paid_amount',
                        name: 'paid_amount'
                    },
                    {
                        data: 'payment_date',
                        name: 'payment_date'
                    },

                    {
                        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