@extends('layouts.master')
@section('style')
    <style>
        .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__placeholder {
            color: white !important;
        }

        .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__rendered {
            color: white !important;
        }
    </style>
@endsection
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class=" container-xxl ">
            <div class="row g-5 g-xl-8">
                <div class="col-xl-3">
                    <div class="card card-xl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #F7D9E3">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column flex-grow-1 mb-5">
                                <div class="text-gray-900 fw-bold fs-3">{{ date('F') }} Rebates</div>
                            </div>
                            <div class="pt-5">
                                <span class="text-gray-900 fw-bold fs-2x lh-0">$</span>
                                <span
                                    class="fw-bold fs-3x me-2 lh-0 {{ $rowa['Total'] == 0 || $rowa['Total'] == null ? 'text-danger' : 'text-gray-900' }}">{{ number_format($rowa['Total'], 2) }}</span><br>
                                <span class="text-gray-900 fw-bold fs-1x lh-0 mt-5">Rebates are paid on the week of the
                                    19th of each month.</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3">
                    <div class="card card-xl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #CBF0F4">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column flex-grow-1 mb-5">
                                <div class="text-gray-900 fw-bold fs-3">{{ date('F', strtotime('-1 month')) }} Rebates
                                </div>
                            </div>

                            <div class="pt-5">
                                <span class="text-gray-900 fw-bold fs-2x lh-0">$</span>
                                <span
                                    class="fw-bold fs-3x me-2 lh-0 {{ $rowaP['Total'] == 0 || $rowaP['Total'] == null ? 'text-danger' : 'text-gray-900' }}">{{ number_format($rowaP['Total'], 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3">
                    <div class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #CBD4F4">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column flex-grow-1 mb-5">
                                <div class="text-gray-900 fw-bold fs-3">YTD Rebates</div>
                            </div>

                            <div class="pt-5">
                                <span class="text-gray-900 fw-bold fs-2x lh-0">$</span>
                                <span
                                    class="fw-bold fs-3x me-2 lh-0 {{ $ytd_rebate['Total'] == 0 || $ytd_rebate['Total'] == null ? 'text-danger' : 'text-gray-900' }}">{{ number_format($ytd_rebate['Total'], 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3">
                    <div class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #cef4cb">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column flex-grow-1 mb-5">
                                <div class="text-gray-900 fw-bold fs-3">Lifetime Rebates</div>
                            </div>

                            <div class="pt-5">
                                <span class="text-gray-900 fw-bold fs-2x lh-0">$</span>
                                <span
                                    class="fw-bold fs-3x me-2 lh-0 {{ $lifetime_rebate['Total'] == 0 || $lifetime_rebate['Total'] == null ? 'text-danger' : 'text-gray-900' }}">{{ number_format($lifetime_rebate['Total'], 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex flex-column flex-lg-row">
                <div class="flex-column flex-lg-row-auto w-100 w-lg-250px w-xxl-250px mb-8 mb-lg-0 me-lg-4 me-5">

                    <form action="#">
                        <div class="card">
                            <div class="card-body">
                                <div class="position-relative">
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                    <input type="text" class="form-control form-control-solid ps-10" name="search"
                                        value="" id="search" placeholder="Search">
                                </div>

                                <div class="separator separator-dashed my-8"></div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">DATE</label>
                                    <div class="d-flex">
                                        <div id="range"
                                            style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                            <i class="fa fa-calendar"></i>&nbsp;
                                            <span></span> <i class="fa fa-caret-down"></i>
                                        </div>
                                        <input type="hidden" class="form-control sm" name="start_date" id="start_date">
                                        <input type="hidden" class="form-control sm" name="end_date" id="end_date">
                                    </div>
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Unit</label>
                                    <input type="text" class="form-control form-control form-control-solid"
                                        name="Unit" id="Unit" value="">
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">State</label>
                                    <select class="form-select form-select-solid" data-control="select2"
                                        data-hide-search="true" data-placeholder="Select a State"
                                        name="Location_State/Province" id="Location_State_Province" multiple>
                                        <option value="">Select State</option>
                                        @php
                                            $states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
                                        @endphp

                                        @foreach ($states as $state)
                                            <option value="{{ $state }}">{{ $state }}</option>
                                        @endforeach()
                                    </select>
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Chain</label><br>
                                    <input type="checkbox" class="form-check-input mb-3" name="ChainID" id="Loves"
                                        value="2">
                                    <label for="Loves" class="me-2 mb-3">Loves</label>
                                    <input type="checkbox" class="form-check-input mb-3" name="ChainID" id="TA"
                                        value="3">
                                    <label for="TA" class="me-2 mb-3">TA</label>
                                    <input type="checkbox" class="form-check-input mb-3" name="ChainID" id="Pilot"
                                        value="1">
                                    <label for="Pilot" class="me-2 mb-3">Pilot</label>
                                </div>
                            </div>

                            <div class="d-flex mt-5 mb-5" style="margin: 0 auto; !important">
                                <button type="button" id="submit" class="btn btn-primary me-5">Search</button>
                                <button type="button" id="clear" class="btn btn-primary me-5">Clear</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="flex-lg-row-fluid">
                    <div class="d-flex flex-wrap flex-stack mb-5">
                        <div class="d-flex flex-wrap align-items-center my-1">
                            <h3 class="fw-bold me-5 my-1">Rebate Report
                            </h3>
                        </div>
                        <a href="{{ route('currentRebateReport.index') }}" class="btn btn-primary btn-sm">Horizontal
                            Layout</a>
                        <div class="float-end">
                            <select name="downloadOptions" id="downloadOptions"
                                class="form-select form-select-solid form-select-sm bg-primary" data-control="select2"
                                data-hide-search="true" data-placeholder="Export">
                                <option value="">Export</option>
                                <option value="excel">Excel</option>
                                <option value="csv">CSV</option>
                                <option value="print">Print</option>
                                <option value="reset">Reset</option>
                                <option value="reload">Reload</option>
                            </select>
                        </div>
                    </div>

                    <div class="tab-content">
                        <div id="kt_project_users_table_pane" class="tab-pane fade show active">
                            <div class="card card-flush">
                                <div class="pt-0">
                                    <div class="table-responsive p-5">
                                        <table id="rebatereport-table"
                                            class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable">
                                            <thead class="thead-bg-color">
                                                <tr>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Date</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Time</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Card</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Unit</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Driver</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Location</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">City</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">State</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Item</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Retail</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">QTY</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Amount</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Discount</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">Rebate</th>
                                                </tr>
                                            </thead>
                                            <tfoot align="right">
                                                <tr>
                                                    <th class="fs-6">Total : </th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th class="fs-6" id="displayTotal" style="white-space: nowrap;">$
                                                        0.00</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    <script>
        $(function() {
            var start = moment().startOf('month');
            var end = moment().endOf('month');

            function cb(start, end) {
                $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                $("#start_date").val(start.format('YYYY-MM-DD'));
                $("#end_date").val(end.format('YYYY-MM-DD'));
            }

            $('#range').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb);

            cb(start, end);

            const table = $('#rebatereport-table');

            table.on('preXhr.dt', function(e, setting, data) {
                data.ChainID = [];
                data.search = $('#search').val();
                data.start_date = $('#start_date').val();
                data.end_date = $('#end_date').val();
                data.Unit = $('#Unit').val();
                $('[name="ChainID"]:checked').each(function() {
                    data.ChainID.push($(this).val());
                });
                data.Location_State_Province = $('#Location_State_Province').val();
            });

            $('#submit').on('click', function() {
                table.DataTable().ajax.reload();
                return false;
            });

            $('#downloadOptions').on('change', function() {
                var downloadOptions = this.value;
                $(".buttons-" + downloadOptions).click();
            });

            $('#clear').on('click', function() {
                $('#search, #Unit')
                    .val('');
                $('#Location_State_Province').val([]).trigger('change');
                $('[name="ChainID"]').prop('checked', false);
                $('#range').data('daterangepicker').setStartDate(moment().startOf('month'));
                $('#range').data('daterangepicker').setEndDate(moment().endOf('month'));
                table.DataTable().ajax.reload();
            });
        });
    </script>
    {!! $dataTable->scripts() !!}
@endsection()