@extends('layouts.app')
@section('title', $viewData["title"])
@section('subtitle', $viewData["subtitle"])
@section('content')

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Source collector message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal_body">
                ...
            </div>
        </div>
    </div>
</div>

<div class="overlay">
    <div class="d-flex justify-content-center">
        <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        Source Collector report
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('spreadsheet_management.download_spreadsheet') }}" id="form_download_excel"
            data-attr="{{ route('spreadsheet_management.download_spreadsheet') }}">
            @csrf
            <button type="submit" class="btn btn-primary" id="">DOWNLOAD EXCEL FILE FORM</button>
            <button type="submit" class="btn btn-primary" id="button_download_excel">DOWNLOAD EXCEL FILE AJAX</button>
        </form>
    </div>
    <div id="data_body">
    </div>
</div>

<script>
$(document).on('click', '#button_download_excel', function(event) {
    event.preventDefault();
    let href = $("#form_download_excel").attr('data-attr');
    let donnee_form = $("#form_download_excel").serialize();
    $.ajax({
        method: "POST",
        url: href,
        data: donnee_form,
        beforeSend: function() {
            //$('#loader').show();
        },
        // return the result
        success: function(result) {
            //$('#myModal').modal("show");
            $('#data_body').html(result).show();
        },
        complete: function() {
            //$('#loader').hide();
        },
        error: function(jqXHR, testStatus, error) {
            console.log(error);
            alert("Page " + href + " cannot open. Error:" + error);
            $('#loader').hide();
        },
        timeout: 8000
    })
});
</script>
@endsection