@extends('layouts.cs.main')

@section('statements', 'active')

@section('main-content')
    <style>
        table {
            border-collapse: separate;
            border-spacing: 0 5px;
        }

        table.dataTable tbody tr {
            border-radius: 10px;
        }
    </style>

    <div class="container container-fluid container-def p-3 mt-3">
        <div class="card">
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group col-lg-3">
                        <label for="">Invoice Number</label>
                        <input type="text" class="form-control" id="invoice_no">
                    </div>
                </div>
            </div>
            <div class="card-footer">
                {{-- <button class="btn btn-success border mr-2 pl-4 pr-4 pt-3 pb-3" id="generateReport">
                    <div class="d-flex align-items-center">
                        <ion-icon class="mr-2" name="checkmark-outline"></ion-icon>
                        <span>Generate</span>
                    </div>
                </button> --}}
                <button class="btn btn-light border mr-2  pl-4 pr-4 pt-3 pb-3" id="downloadReport">
                    <div class="d-flex align-items-center">
                        <ion-icon class="mr-2" name="download-outline"></ion-icon>
                        <span>Download</span>
                    </div>
                </button>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let tableView;
        let search_like = $("#search_like").val();
        let type = $("#type").val();
        let brands = $("#brands").val();
        let member = $("#member").val();
        let start = $("#start").val();
        let end = $("#end").val();

        let params = ""

        const report = {
            init() {
                this.setupEvents();
            },

            setupEvents() {
                $('#generateReport').on('click', () => {
                    this.getData(this.getUrlParams());
                });

                $('#downloadReport').on('click', () => {
                    let urlParam = this.getUrlParams();
                    window.location.href = `/data/invoice-statements/pdf?${urlParam}`;
                });
            },

            getUrlParams() {
                return new URLSearchParams({
                    invoice_no: $("#invoice_no").val(),
                }).toString();
            },
        };

        report.init();
    </script>
@endsection