@extends('admin.layouts.app', ['title' => __('Report')])

@section('content')
<!-- Header -->
<div class="header bg-primary pb-6 pt-6">
    <div class="container-fluid">
        <div class="header-body">
            <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">
                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                            <li class="breadcrumb-item"><a href="{{route('dashboard')}}"><i class="fas fa-home"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page"> Reports</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Page content -->


<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-xl-12 order-xl-1">
            <div class="card bg-secondary shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0"> Reports</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form id="report-form" name="report-form" method="post" autocomplete="off">
                        @csrf

                        <h6 class="heading-small text-muted mb-4">{{ __('Report information') }}</h6>

                        <div class="pl-lg-4">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label" for="input-countries_id">Products</label>
                                        <select name="product_id" id="product_id" class="form-control form-control-alternative">
                                            <option value="">Select Products</option>
                                            @foreach($products as $product_val)
                                            <option value="{{$product_val->id}}">{{$product_val->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label" for="from_date">From</label>
                                        <input type="date" name="from_date" class="form-control form-control-alternative reportDate" placeholder="From Date" id="from_date" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label" for="to_date">To</label>
                                        <input type="date" name="to_date" id="to_date" class="form-control form-control-alternative reportDate" placeholder="To date" required>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="text-center">
                                <button type="button" class="btn btn-success mt-4" onclick="myreports()"> Get Reports </button>
                            </div>
                        </div>
                    </form>
                    @include('admin.reports.cards')
                    <div class="table-responsive mt-5">
                        <table class="table align-items-center table-flush yajra-datatable" id="report-product-datatable">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Price</th>
                                    <th scope="col">Size</th>
                                    <th scope="col">Total Sale Amount</th>
                                </tr>
                            </thead>
                            <tbody id="report-product-table-body">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('admin.layouts.footers.auth')
</div>
@endsection
@push('js')
<script>
        $(document).ready(function() {
            $("#product_id").select2({
            placeholder: "Select Product",
            allowClear: true
        });
        var date = new Date();
        let firstDay = moment(new Date(date.getFullYear(), date.getMonth(), 1)).format('YYYY-MM-DD');
        let lastDay = moment(new Date(date.getFullYear(), date.getMonth() + 1, 0)).format('YYYY-MM-DD');
        $('#from_date').val(firstDay);
        $('#to_date').val(lastDay);
        // $('#report-form').on('submit', function(e) {
        //     e.preventDefault();
        //         var frm = $(this).serialize();
        //         reports();
        // });


        $('.reportDate').on('change', function() {
            from_date = $("#from_date").val();
            to_date = $("#to_date").val();
            fromDate = moment(from_date);
            toDate = moment(to_date);
            if (fromDate && toDate && !toDate.isSameOrAfter(fromDate)) {
                if (fromDate) {
                    $("#to_date").val(fromDate.format('YYYY-MM-DD'));
                } else {
                    $("#to_date").val(today.format('YYYY-MM-DD'));
                }
            }
        });
    });
    function myreports() {
            $.ajax({
                type: "post",
                url: "{{route('get-reports')}}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    product_id: $('#product_id').val(), 
                    from_date: $('#from_date').val() + ' 00:00:00',
                    to_date: $('#to_date').val() + ' 23:59:59',
                },
                success: function(data) {
                    $('#report-product-table-body').html(data.html);
                    $('#total_order').text(data.report_counts.total_orders);
                    $('#total_sales').text('$ ' + data.report_counts.total_sales);
                    $('#total_product_amt').text('$ ' + data.report_counts.total_product_amt);
                }
            });
        }
</script>

@endpush