@extends('modules.head') @section('contenido')

    <div class="box-body table-responsive ">
        <h3>XYZ products</h3><br>

        <div class="form-group">

            <div class="col-sm-2">
                <label for="to_date">To date</label>
                <input type="month" id="to_date" class="form-control"
                       max="{{ \Carbon\Carbon::now()->subMonth()->format('Y-m') }}"/>
            </div>

            <div class="col-sm-2">
                <label for="branch">Branch</label>
                <select class="form-control" name="branch" id="branch">
                    <option value="">-- To select</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->short_name }}</option>
                    @endforeach
                </select>
            </div>

        </div>
        <div class="col-sm-2 form-group">
            <button class="btn btn-primary" id="btn-filter" onclick="generateReport(this)">Generate</button>
        </div>

        <table id="table-list_xyz_products" class="table table-bordered table-hover dataTable" role="grid">
            <thead>
            <tr>
            </tr>
            </thead>
            <tbody></tbody>
        </table>

    </div>

    <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
    <script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>

    <script type="text/javascript">

        function generateReport() {
            let branch = $("#branch").val();
            let to_date = $("#to_date").val();
            if (!branch || !to_date) {
                swal('', 'Please select a branch and a date', 'warning');
                return false;
            }
            $.ajax({
                url: `/xyz/data/${branch}/${to_date}`,
                type: "GET",
                contentType: "application/json",
                success: function (response) {
                    renderHeaders(response);
                    displayData(response);
                },
                error: function (error) {
                    swal('Server error', `${error.message}`, 'error');
                }
            });
        }

        function displayData(response) {
            let fields = [];
            response.schema.fields.forEach(function (field) {
                fields.push({
                    data: field.name,
                    name: field.name,
                });
            })
            $('#table-list_xyz_products').DataTable().destroy();
            $('#table-list_xyz_products').DataTable({
                "aaData": response.data,
                columns: fields,
                "ordering": false
            });
        }

        function renderHeaders(response) {
            let xyzTable = $('#table-list_xyz_products');
            let tr = xyzTable.find('thead').find('tr');
            response.schema.fields.forEach(function (field) {
                let th = $(`<th>${field.name}</th>`);
                tr.append(th);
            })
        }

    </script>

@endsection