@extends('layouts.app')
@section('title')
All Verified Candidate Lists
@endsection
@section('content')
<div class="row card">

    <div class="mt-3 card-body card-white mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-normal text-head-color">All Verified Candidate Lists
                {{-- {{ $CityIntemationTotalCount ? $CityIntemationTotalCount : 0 }} )</h6> --}}
        </div>
        <br>
        <div id='loader'></div>
        <form action="{{ route('report.fetch-center') }}" method="GET" enctype="multipart/form-data">
            <div class="row">

                <div class="form-group col-md-3">
                    <label>Select Exam Type</label>
                    <select class="form-control shift" name="config" required>
                        <option value=" ">Select Exam Type </option>
                        @foreach ($MISConfigurationls as $MISConfigurationl)
                        <option value="{{ $MISConfigurationl->ID }}" @if (Request::get('config')==$MISConfigurationl->
                            ID) selected @endif>
                            {{ $MISConfigurationl->DatabaseName }}</option>
                        @endforeach
                    </select>
                </div>


                <div class="row">
                    <h6> <b>Add  Assign Center Table name And coulumn name: </b></h6>

                    <div class="d-flex" id="table_column_div_1">
                        
                        <div class="form-group col-md-2">
                            <label>Table Name<span class="astric-sign">*</span></label>
                            <input type="text" name="rightTableName" class="form-control search">
                            <div class="text-danger d-none"></div>
                            @error('rightTableName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group col-md-3">
                            <label>Get Data by </label>
                            <select class="form-control shift" name="conntype">
                                <option value=" ">Select Column connection type </option>
                                
                                <option value="ID">By ID</option>
                                <option value="ApplicatnNumber">By Application Number</option>
                               
                            </select>
                        </div>
                        <div class="form-group col-md-2">
                            <label>Column Name<span class="astric-sign">*</span></label>
                            <input type="text" name="rightTableColumnName" class="form-control search">
                            <div class="text-danger d-none"></div>
                            @error('rightTableColumnName')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    
                   
                   
                </div>
                <div class="row">
                    <div class="form-group col-md-4">
                        <button type="submit" class="btn btn-success"><i style="font-size:20px" class="fa">&#xf002;</i>
                            Select Exam</button>

                    </div>

                </div>











        </form>


      
 
</div>
@endsection
<style type="text/css">
    .loader-div {
        display: none;
        position: fixed;
        margin: 0px;
        padding: 0px;
        right: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 30001;
        opacity: 0.8;
    }

    .loader-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

</style>
@push('js')
<script type="text/javascript">
    function display_data() {
        $(".loader-div").show(); // show loader
        var ApplicationNumber = $('.ApplicationNumber').val();
        var ExamDate = $('.ExamDate').val();
        var shift = $('.shift').val();
        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                // Download progress
                xhr.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        // Do something with download progress
                        console.log(percentComplete);
                    }
                }, false);
                return xhr;
            }
            , url: "{{ url('procurement-reports/export') }}"
            , type: "GET"
            , cache: false
            , xhrFields: {
                responseType: 'blob'
            }
            , data: {
                ApplicationNumber: ApplicationNumber
                , ExamDate: ExamDate
                , shift: shift
            }
            , success: function(result, status, xhr) {
                var disposition = xhr.getResponseHeader('content-disposition');
                var filename = 'MNS-Data-Download.xlsx';
                // The actual download
                var blob = new Blob([result], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                });
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = filename;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                $(".loader-div").hide();
            }
            , error: function(xhr, status) {
                $(".loader-div").hide(); // hide loader	
                console.log('ajax error = ' + xhr.statusText);
            }
        });
    }

</script>
<script>
    // document.addEventListener("DOMContentLoaded", function() {
    //     const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    //     const form = document.querySelector('form');
    //     form.addEventListener('submit', function(event) {
    //         let atLeastOneChecked = false;
    //         checkboxes.forEach(function(checkbox) {
    //             if (checkbox.checked) {
    //                 atLeastOneChecked = true;
    //             }
    //         });
    //         if (!atLeastOneChecked) {
    //             event.preventDefault(); // Prevent form submission
    //             alert('At least one checkbox is mandatory');
    //         }
    //     });
    // });

</script>
@endpush