@extends('layout.layout')

@section('content')
<section class="close_inventory">
    <div class="d-flex w-100">
        <div id="errors_generating_excel"></div>
        <div class="two_inputs_per_line w-100">
            <div class="contains_label_input w-100">
                <label for="">De la ce data</label>
                <input type="date" class="input_style" value="{{request()->get('search_by_start_date','')}}"
                    name="start_date" id="start_date">
            </div>

            <div class="contains_label_input w-100">
                <label for="">Pana la ce data </label>
                <input type="date" class="input_style" name="end_date"
                    value="{{request()->get('search_by_end_date','')}}" id="end_date">
            </div>
        </div>
        <div class="two_inputs_per_line w-100">
            <div class="contains_label_input">
                <label for="">Cautati dupa nume inventar</label>
                <input type="text" class="input_style" name="name" placeholder="Cautati dupa nume inventar"
                    value="{{request()->get('search_by_key','')}}" id="search_by_key">
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-danger mt-2 mb-4" id="reset_filters">Reseteaza filtre &nbsp; <i
            class="fas fa-redo"></i></button>
    <button type="button" class="btn btn-success mt-2 mb-4" id="genereate_excel">Genereaza excel pentru datile alese
        &nbsp;</button>
    <div id="inv_closed_section">
        @include('close.close-table')
    </div>
</section>
@push('js')
<script>
    $(document).ready(function () {
        $('#start_date , #end_date').on('change', function (page) {
            $start_date = $("#start_date").val();
            $end_date = $("#end_date").val();
            $.ajax({
                type: 'get',
                url: '/inchide-inventar',
                data: {
                    'search_by_start_date': $start_date,
                    'search_by_end_date': $end_date
                },
                success: function (data) {
                    window.history.pushState("string", "inventar", window.location
                        .pathname + "?search_by_start_date=" + $start_date +
                        "&search_by_end_date=" + $end_date);
                    $('#inv_closed_section').html(data);
                }
            });
            if ($("#start_date").val() == '' && $("#end_date").val() == '') {
                $.ajax({
                    type: 'get',
                    url: '/inchide-inventar',
                    success: function (data) {
                        $('#inv_closed_section').html(data);
                        window.history.pushState("string", "inventar", "/inchide-inventar");
                    }
                });
            }
        });
    });

    $("#genereate_excel").on('click', function () {
        $start_date = $("#start_date").val();
        $end_date = $("#end_date").val();
        $.ajax({
            xhrFields: {
                responseType: 'blob',
            },
            type: 'POST',
            url: '/generate-excel-between-dates',
            data: {
                'generate_by_start_date': $start_date,
                'generate_by_end_date': $end_date
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                $('#errors_generating_excel').html(response);
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(response);
                link.download = `Excel generat de la data de ` + $start_date + ` pana la date de` +
                    $end_date + `.xlsx`;
                link.click();
            },

            error: function (error) {
                $('#errors_generating_excel').html(response);
            }
        })
    })


    $(document).ready(function () {
        $(document).on('click', '.pagination a', function (event) {
            event.preventDefault();
            $('li').removeClass('active');
            $(this).parent('li').addClass('active');
            var myurl = $(this).attr('href');
            var page = $(this).attr('href').split('page=')[1];
            getData(page);
        });
    });

    function getData(page) {
        $param = $("#take_params").val();
        $start_date = $("#start_date").val();
        $end_date = $("#end_date").val();
        $.ajax({
            url: '/inchide-inventar' + '?page=' + page,
            type: "get",
            datatype: "html"
        }).done(function (data) {
            $("#inv_closed_section").html(data);
            window.history.pushState("string", "inventar", window.location.pathname + "?search_by_start_date=" +
                $start_date + "&search_by_end_date" + $end_date + '&page=' + page);
        }).fail(function (jqXHR, ajaxOptions, thrownError) {
            window.location.reload();
        });
    }
    $('#search_by_key').on('keyup', function () {
        $value = $(this).val();
        $.ajax({
            type: 'get',
            url: '/inchide-inventar',
            data: {
                'search_by_key': $value
            },
            success: function (data) {
                $('#inv_closed_section').html(data);
            }
        });
    })
    $('#reset_filters').on('click', function () {
        $.ajax({
            type: 'get',
            url: '/inchide-inventar',
            success: function (data) {
                $('#inv_closed_section').html(data);
                window.history.pushState("string", "inventar", "/inchide-inventar");
            }
        });
    })

</script>
@endpush
@endsection