{{ View::make('layout.header') }}

<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">Employee Upload</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('settings') }}">Settings</a></li>
                                <li class="breadcrumb-item active">Upload Employee File</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-body">
            <section id="employee-upload-section">
                <div class="row match-height">
                    <div class="col-md-12">
                        <div class="card shadow-sm">
                            <div class="card-header d-flex align-items-center">
                                <h4 class="card-title mb-0">Upload Excel or CSV</h4>
                            </div>

                            <div class="card-body">
                                @if(session()->has('success'))
                                    <div class="alert alert-success">{{ session('success') }}</div>
                                @endif
                                @if(session()->has('danger'))
                                    <div class="alert alert-danger">{{ session('danger') }}</div>
                                @endif

                                    <!-- Download Sample Sheet -->
                                <div class="mb-3">
                                <a href="{{ asset('samples/emp.xlsx') }}" class="btn btn-outline-success" download>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
                                        <path d="M.5 9.9a.5.5 0 0 1 .5-.5h4v-7a.5.5 0 0 1 1 0v7h4a.5.5 0 0 1 .354.854l-4 4a.5.5 0 0 1-.708 0l-4-4A.5.5 0 0 1 .5 9.9z"/>
                                        <path d="M.5 15a.5.5 0 0 1 .5-.5h14a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z"/>
                                    </svg>
                                    Download Sample Sheet
                                </a>
                                    <small class="text-muted ms-2">Use this template for uploading employee data</small>
                                </div>

                                <form id="upload-file" method="POST" enctype="multipart/form-data" class="submit">
                                    @csrf
                                    <div class="form-group">
                                        <label for="excelFile">Select File (.xlsx, .xls, .csv)</label>
                                        <input type="file" name="excel_file" id="excelFile" accept=".xlsx,.xls,.csv" class="form-control mb-2" required>
                                        <span class="text-danger error-text file_err" id="file_error"></span>
                                    </div>

                                    <div id="buttonreplacement" style="display:none; margin-bottom:10px;">
                                        <img src="http://www.willmaster.com/images/preload.gif" alt="loading...">
                                    </div>
                                    <div id="message3" class="my-1"></div>

                                    <button type="submit" class="btn btn-primary">Upload</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.ajaxSetup({
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});

$('#upload-file').submit(function(e) {
    e.preventDefault();
    let formData = new FormData(this);
    $('#buttonreplacement').show();

    $.ajax({
        type: 'POST',
        url: "{{ route('uploadempsheet') }}",
        data: formData,
        contentType: false,
        processData: false,
        success: function(data) {
            $('#buttonreplacement').hide();
            if ($.isEmptyObject(data.error)) {
                $('#file_error').hide();
                $('#upload-file')[0].reset();
                $('#message3').html('<span style="color:green;">File uploaded successfully!</span>');
            } else {
                printErrorMsg(data.error);
            }
        },
        error: function() {
            $('#buttonreplacement').hide();
            $('#message3').html('<span style="color:red;">Something went wrong!</span>');
        }
    });
});

function printErrorMsg(msg) {
    $.each(msg, function(key, value) {
        $('.' + key + '_err').text(value);
    });
}
</script>

{{ View::make('layout.footer') }}