@extends('layouts.app')
@section('content')

<div class="container">
    <div class="row">
        <div class="col-12 my-2">
            <div class="card">
                <div class="card-header">
                    <h2>
                        Scholarship Options
                    </h2>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- <div class="col-auto d-flex align-items-center">
                            <select class="form-control" id="year-select">
                                <option value='' disabled selected>Select Year</option>
                                <option class="form-control" value="2023">2023</option>
                                <option class="form-control" value="2024">2024</option>
                            </select>
                        </div> --}}
                        <div class="col d-flex justify-content-center">
                            {{-- <button type="button" class="btn knowmad_btn knowmad_btn_blue" data-toggle="modal" data-target="#exampleModal" onclick="showExportModal()">
                                Export Applications
                            </button> --}}
                            <form class="mx-2" action="{{ URL::route('admin.scholarship.export') }}">
                                <button type="submit" class="btn knowmad_btn knowmad_btn_blue width_fitContent">Download Applications</button>
                            </form>
                            <button type="button" id="toggleFormButton" class="btn knowmad_btn knowmad_btn_blue mx-2 mt-0" onclick="toggleActive()">
                                Toggle Form
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <span id="responseMessage"></span>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="exampleModalLabel">Export to XLS Format</h2>
            <button type="button" class="btn btn-danger" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <span style="display: inline-block">
                Are you sure you want to export all applications?
            </span>
            {{-- <span style="display: inline-block">
                Are you sure you want to export all applications from
                <h3 style="display: inline-block; text-decoration-line: underline" id="selectedValue"></h3>
                ?
            </span>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            <form action="{{ URL::route('admin.scholarship.export') }}">
                <button type="submit" class="btn knowmad_btn knowmad_btn_blue">Export</button>
            </form>
        </div>
        </div>
    </div>
</div> --}}

@endsection

@push('footer_js')
    {{-- <script type="application/javascript">
    
        var selectBox = document.getElementById('year-select');
        var selectedValue = document.getElementById('selectedValue');

        selectBox.addEventListener('change', function() {
            selectedValue.innerText = this.value;
        });

        let exportModal = new bootstrap.Modal(document.getElementById('exportModal'), {});
        function showExportModal() {
            if (selectedValue.innerText != '') {
                exportModal.show();
            } else {
                alert("Please select a year to export.");
            }
        }
    </script> --}}
    <script type="application/javascript">
    // let exportModal = new bootstrap.Modal(document.getElementById('exportModal'), {});
    let isOperationInProgress = false;
    let name = 'scholarship';
        // function showExportModal() {
        //     exportModal.show();
        // }
        function toggleActive() {
            isOperationInProgress = true;
            // Disable the button
            document.getElementById('toggleFormButton').disabled = true;

            var url = "{{ url('admin/scholarship/toggle') }}";

            // Make an AJAX request
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                document.getElementById('responseMessage').innerHTML = data.message;
            })
            .catch(error => {
                console.error('There was a problem with your fetch operation:', error);
            }).finally(() => {
                isOperationInProgress = false;
                // Re-enable the button
                document.getElementById('toggleFormButton').disabled = false;
            });
        }
    </script>
@endpush