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

<div class="page-inner">
    @include('partials.bread-crumbs')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
               
                <div class="card-body">



                    <form action="{{ route('upload-leave-allocation-csv') }}" class="dropzone" id="csv-dropzone" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="dz-message" data-dz-message="">
                            <div class="icon">
                                <i class="flaticon-file"></i>
                            </div>
                            <h4 class="message">Drag and Drop files here</h4>
                            <div class="note">(please upload the attendance file.)</div>
                        </div>
                    </form>

                    
                   
                </div>
                <div class="card-footer">
                    <button type="button" class="btn btn-danger pull-right" id="clear-btn">Clear</button>
                    @can('attendance_upload_update')
                         <button type="button" class="btn btn-success pull-right" id="upload-btn" style="margin-right:10px;"><i class="fa fa-check-circle"></i> Upload</button>
                    @endcan
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom_scripts')
<script type="text/javascript" src="{{asset('js/xhr.js')}}"> </script>
<script type="text/javascript" src="{{ asset('assets/js/plugin/dropzone/dropzone.min.js') }}"></script>
<script>
   
    // Initialize Dropzone
    Dropzone.options.csvDropzone = {
        autoProcessQueue: false, // Automatically upload when file is added
        acceptedFiles: '.csv', // Only allow CSV files
        maxFilesize: 5, // Max file size in MB
        maxFiles: 1, // Allow only one file to be uploaded
        paramName: "csv_file", // Ensure this matches the name expected by the backend
        init: function() {

            let myDropzone = this;

            // Handle manual upload on button click
            document.getElementById("upload-btn").addEventListener("click", function () {
                if (myDropzone.files.length > 0) {
                    myDropzone.processQueue(); // Manually process the upload
                } else {
                    displayNotification("Upload leave allocation file","error", "Please select a file before uploading.");
                   
                }
            });

            this.on("addedfile", function(file) {
                if(this.files.length>1){
                    this.removeFile(this.files[0]);
                }
            });
            this.on("success", function(file, response) {
                // Handle success response
                if (response.success) {
                    displayNotification("Upload leave allocation file","success", "Leave allocation file is uploaded");
                } else {
                    displayNotification("Upload leave allocation file","error", response.message);
                }

                this.removeAllFiles(true);
            });
            this.on("error", function(file, message) {
                // Handle error
                displayNotification("Error","error", message);
            });
        }
    };

    document.getElementById("clear-btn").addEventListener("click", function () {
        Dropzone.forElement("#csv-dropzone").removeAllFiles(true);
    });
</script>
@endsection