@extends('layouts.retail')

@section('salesummary-active', 'active')

@section('contents')
    <div class="content-wrapper" id="content-wrapper" style="min-height: 440px;">
        <section class="container col content p-2 p-xl-4 p-lg-4">
            <section class="content-header">
                <h5 class="font-weight-bold mb-4">
                    <i class="nav-icon fas fa-dollar-sign mr-3" style="color: #F9D339"></i>
                    Store Sales Details
                </h5>
                <div class="mt-2 bg-white border" style="border-radius: 5px; min-height: 300px;">
                    <div class="pl-4">
                        <form id="form-filter">
                            <div class="row pt-3 mt-2">
                                <div class="col-md-5" style="max-width: 250px;">
                                    <div class="form-group">
                                        <input type="date" id="filter-date" class="form-control" name="date" style="width: 100%;" required>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn text-sm border special-button" id="btn-filter">
                                        <span>Filter</span>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary text-sm ml-2" id="btn-download">
                                        <span>Download CSV</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="mt-2" id="salesDetailsTable" style="width: 100%;">
                        <table class="table table-hover text-sm" id="datatable" style="width: 100%"></table>
                    </div>
                </div>
            </section>
        </section>
    </div>
@endsection

@section('scripts')
    <script>
        window.salesDetails = {
            storeCode: "{{ $storeCode }}",
            date: "{{ $date }}"
        };
    </script>
    <script type="module" src="{{ asset('/js/retail/sale-summary-details.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection