{{ Form::open([
    'autocomplete' => 'off',
    'id' => 'importForm',
    'enctype' => 'multipart/form-data',
]) }}
<style>
    #loader {
        display: none;
    }

    /* Center loader horizontally and vertically */
    #loader {
        position: absolute;
        top: 50%;
        /* Center vertically */
        left: 50%;
        /* Center horizontally */
        transform: translate(-50%, -50%);
        /* Center the loader perfectly */
    }
</style>
<div class="modal-body">
    <div class="row">
        <div class="col-md-12">
            <span>Upload a Excel of your Holiday File information. The following fields are required in the
                XLSX: <strong>Holiday File Date (format: DD-MM-YYYY),Description.</strong></span>
            <br>
            <div class="form-group">
                {{ Form::label('Holiday', __('Holiday File'), ['class' => 'form-label']) }}
                <span class="text-danger pl-1">*</span>
                <input type="file" class="form-control" accept=".xlsx, .xls" id="file" name="file">
                <span class="show_document_error" style="color:red;"></span>
                <br><b>
                    <a id="holiday_excel" href="{{ asset('uploads/sample_excel/holiday.xlsx') }}">
                        <i class="fa fa-download"></i>
                        Holiday
                    </a>
                </b>
                @error('csv_file')
                    <small class="invalid-name" role="alert">
                        <strong class="text-danger">{{ $message }}</strong>
                    </small>
                @enderror
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="form-control" id="company" name="company" value="{{ $company_id }}">
<input type="hidden" class="form-control" id="project" name="project" value="{{ $project_id }}">

<div class="modal-footer">
    <input type="button" value="{{ __('Cancel') }}" class="btn  btn-light" data-bs-dismiss="modal">

    <div id="button-container">
        <img src="{{ asset('admin/loader/ajax_loader.gif') }}" id="loader">
        <button class="btn btn-primary" type="submit" id="importForm">Save</button>


    </div>
</div>

{{ Form::close() }}

<script>
    $('#importForm').submit(function(e) {
        e.preventDefault();

        var company = $('#company').val();
        var project = $('#project').val();
        var fileInput = $('#file')[0].files[0];

        if (!fileInput) {
            toastr.error('Please choose a file to import.');
            return false;
        }

        // Validate file type and size
        var allowedTypes = ['xlsx', 'xls'];
        var fileType = fileInput.name.split('.').pop().toLowerCase();
        var fileSize = fileInput.size;

        if ($.inArray(fileType, allowedTypes) === -1) {
            toastr.error('Invalid file type. Please select a CSV or Excel file.');
            return false;
        }

        if (fileSize > 10485760) { // 10 MB (10485760 bytes)
            toastr.error('File size exceeds the limit of 10 MB. Please choose a smaller file.');
            return false;
        }

        // If all validations pass, proceed with form submission
        var formData = new FormData(this);

        $.ajax({
            url: "{{ route('holiday_import') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                $('#importForm button[type=submit]').hide();
                $("#loader").show();
            },
            complete: function() {
                $('#importForm button[type=submit]').show();
                $("#loader").hide();
            },
            success: function(response) {
                toastr.success('Data Imported Successfully');
                $('#importForm')[0].reset();
                $("#loader").hide();
                location.reload();
            },
            error: function(xhr, status, error) {
                toastr.error('Something went wrong!');
                console.error('Error:', error);
                $("#loader").hide();
            }
        });


    });
</script>