@extends('layouts.app')

@section('page-title', 'Home')

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"
        defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.6/axios.min.js" defer></script>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-3 col-sm-6">
                <input id="date" class="form-control" type="date" />
            </div>

            <div class="col-lg-3 col-sm-6">
                <button id='download-button' class="btn btn-primary" onclick="downloadSnapshot()">Download</button>
            </div>
        </div>
    </div>
@endsection

<script>
    let date = '';

    window.onload = function() {
        const accessToken = '{{ $access_token }}';
        axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;

        document.getElementById('download-button').disabled = true;
        
        let dateEl = document.getElementById('date');

        function handleDateChangeEvent(e) {
            const dateVal = e.target.value;
            const dateObj = new Date(dateVal);

            if (dateObj.toString() !== 'Invalid Date') {
                date = dateVal;

                document.getElementById('download-button').disabled = false;
            } else {
                date = '';

                document.getElementById('download-button').disabled = true;
            }
        }

        const dateEventListener = dateEl.addEventListener('change', handleDateChangeEvent);

        window.addEventListener('beforeunload', () => {
            dateEl.removeEventListener('change', dateEventListener);
        });
    };

    function downloadSnapshot() {
        if (!date) {
            return;
        }

        axios({
            url: `/api/download-snapshot?date=${date}`,
            method: 'GET',
            responseType: 'blob',
        })
        .then(response => {
            const filename = response.headers['content-disposition'].split('filename=')[1];
            const blob = new Blob([response.data], { type: 'application/pdf' });
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = filename;
            link.click();
        })
        .catch(error => {
            alert(error?.response?.status === 404 && 'No snapshot available for this date' || 'An error has occurred');
        });
    }
</script>