<div id="fileUploadModal" title="{{trans('global.import_excel_file')}}" style="display:none;">
    <form action="{{ $route }}" method="POST" enctype="multipart/form-data" id="fileUploadForm">
        @csrf
        <div class="form-group">
            <label for="file">{{ $title }}</label>
            <input type="file" name="file" id="file" class="form-control" required>
        </div>
    </form>
</div>

<script>
    $(document).ready(function () {
        $("#fileUploadModal").dialog({
            autoOpen: false,
            modal: true,
            width: 500,
            height: "auto",
            buttons: [     
                {
                    text: "{{ trans('global.import_data') }}",
                    class: "btn btn-primary",
                    click: function () {
                        $("#fileUploadForm").submit();
                    },
                },
                {
                    text: "{{ trans('global.cancel') }}",
                    class: "btn btn-secondary",
                    click: function () {
                        $(this).dialog("close");
                    },
                },
            ],
        });

        $("#import_btn").on("click", function () {
            $("#fileUploadModal").dialog("open");
        });

        $("#fileUploadForm").on("submit", function() {
            Swal.fire({
                title: '{{ trans('global.please_wait') }}',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
        });
    });
</script>

<style>
    <style>
    .ui-dialog {
        border-radius: 10px;
        overflow: hidden;
    }

    .ui-dialog-titlebar {
        background: #007bff;
        color: white;
        font-weight: bold;
    }

    .ui-dialog-titlebar-close {
        color: white;
    }

    .ui-dialog-buttonset button {
        margin: 5px;
    }

</style>