@extends('layouts.main')

@section('isi')

<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
         <!--begin::Content-->
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-fluid">
                    <!--begin::Card-->
                    <div class="card">
                    <div class="card-header">
                        <div class="card-title fs-4 fw-bold ">Import Pelatihan Reguler Eksternal</div>
                    </div>



                        <!--begin::Notice-->
                        <div class="notice d-flex bg-light-info rounded border-info border border-dashed p-6">
                            <!--begin::Icon-->
                            <i class="ki-outline ki-information fs-2tx text-info me-4"></i>
                            <!--end::Icon-->
                            <!--begin::Wrapper-->
                            <div class="d-flex flex-stack flex-grow-1">
                                <!--begin::Content-->
                                <div class="fw-semibold">
                                    <h4 class="text-gray-900 fw-bold">Template Excel </h4>
                                    <div class="fs-6 text-gray-700">Pastikan harus sama</div>
                                </div>
                                <a href="#" class="btn btn-primary px-6 align-self-center text-nowrap">Unduh Template</a>
                                <!--end::Content-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Notice-->

                        <form action="{{ route('importexternaltraining.import') }}" method="post" enctype="multipart/form-data" id="form">
                            @csrf
                            <div class="card h-100 flex-center bg-light-info border-info border border-dashed p-8 mt-10">
                                <div class="d-flex flex-column flex-center text-center">
                                    <div class="mb-7">
                                        <div class="symbol symbol-100px symbol-circle bg-white shadow-sm">
                                            <i class="fa-solid fa-upload fs-3x text-info mb-5" id="uploadLogo"></i>
                                        </div>
                                    </div>


                                    <div class="text-center mb-10">
                                        <div class="text-gray-900 fw-bold">Klik tombol dibawah untuk upload file excel</div>
                                    </div>


                                    <span class="btn btn-bg-info fs-5 fw-bold mb-2 text-white" id="buttonUpload"
                                        onclick="document.getElementById('fileInput').click()">File
                                        Upload</span>
                                    <!--end::Link-->
                                    <input type="file" id="fileInput" hidden name="file">
                                </div>
                            </div>
                                    <!--end::Link-->
                            <div class="text-center mt-10">
                                <button type="submit" class="btn btn-primary w-100" id="submitButton">
                                    <span class="indicator-label" id="indicatorLabel">Import Data</span>
                                    <span class="indicator-progress" id="indicatorProgress">{{ __('Please wait') }}
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                                
                           
                        </form>



                    </div>
                    <!--end::Card-->
                </div>
                <!--end::Content container-->
            </div>
            <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
</div>
<!--end:::Main-->



@endsection

@push('js-vendor')
    <script src="{{ asset('') }}assets/plugins/custom/datatables/datatables.bundle.js"></script>
@endpush

@push('js-page')
<script>
    const swal = $('.swal').data('swal');

    if (swal) {
        Swal.fire({
            title: 'Success',
            icon: "success",
            text: swal,
            buttonsStyling: false,
            showConfirmButton: false,
            timer: 1500,
        })
    }
</script>
<script>
$(document).ready(function() {
        var fileInput = $('#fileInput');
        var uploadLogo = $('#uploadLogo');
        var buttonUpload = $('#buttonUpload');
    
        fileInput.on('change', function(event) {
            const selectedFiles = event.target.files;
            console.log(selectedFiles);

            if (selectedFiles.length > 0) {
                uploadLogo.attr('src', "{{ asset('') }}assets/media/svg/files/xlsx.svg");
                uploadLogo.attr('width', '65');
                const file = selectedFiles[0];
            }
        });

    $('#form').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.status == 'success') {
                    toastr.success(response.message);
                    $('#form')[0].reset();
                } else {
                    toastr.error(response.message);
                }
            }
        });
    });
});
</script>

 <script>
    $(document).ready(function() {
        const submitButton = $("#submitButton");
        const indicatorLabel = $("#indicatorLabel");
        const indicatorProgress = $("#indicatorProgress");

        $("#form").submit(function(event) {
            $("#submitButton").addClass("disabled");
            $("#indicatorLabel").css("display", "none");
            $("#indicatorProgress").css("display", "block");
        });

    });
</script>
@endpush