@extends('layout.main')
@section('content')
    <section>
        <div class="card animated fadeInRight mr-5 ml-5">
            <div class="card-header with-border">
                <h3 class="card-title">{{ __('Import EXCEL/CSV file only') }}</h3>
                @include('shared.flash_message')
                <div id="form_result"></div>
            </div>
            <div class="card-body">
                <h6><a href="{{ url('sample_file/sample_employee.xlsx') }}" class="btn btn-primary"> <i
                            class="fa fa-download"></i> {{ __('Download Sample File') }} </a></h6>
                
                <p class="card-text mt-3">The first line in downloaded sample file should remain as it is. Please do not change
                    the order of columns in file.</p>
                <p class="card-text">The correct column order is (First Name, Last Name, Staff Id, Identity Number, Username,
                    Email, Password, Joining Date, Gender, Date of Birth, Contact Number, Address, City, State, Zip,
                    Country, Marital Status, Dependent, Status, Company Name, Department Name, Designation Name, Shift Name,
                    Role Name, Basic Salary Month Year, Basic Salary Payslip, Basic Salary, Bank Account Title, Bank Account
                    Number, Bank Name, Bank Code, Bank Branch, Include BPJS TK, Include BPJS KES, Include Tax, Position, Dispensation).</p>
                <ul>
                    <li>Date format should be (According to general settings)</li>
                    <li>Company, Department, Designation, Shift, Dependent and Role name must be matched with your existing data.</li>
                    <li>Gender must be Male / Female / Other.</li>
                    <li>Marital Status must be Single / Married / Widowed / 'Divorce/Separated'</li>
                    <li>Status must be full-time / part-time / internship / terminated</li>
                    <li>Basic Salary Month Year must be following Month-Year format. e.g January-2023</li>
                    <li>Basic Salary Payslip must be Monthly / Hourly</li>
                    <li>Include BPJS TK, BPJS KES, Tax, and Dispensation must be 0 / 1 (0 for no, 1 for yes)</li>
                    <li>You must follow the file, otherwise you will get an error while importing the file.</li>
                </ul>

                <hr>

                @if(session()->has('import_errors') || isset($import_errors))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong><i class="fa fa-exclamation-triangle"></i> Terjadi kesalahan pada beberapa baris:</strong>
                        <hr>
                        <ul class="mb-0" style="max-height: 200px; overflow-y: auto;">
                            @php $displayErrors = session()->get('import_errors') ?? $import_errors; @endphp
                            @foreach($displayErrors as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                <form action="{{ route('employees.importPost') }}" name="import_employee" id="import_employee"
                    autocomplete="off" enctype="multipart/form-data" method="post" accept-charset="utf-8">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <fieldset class="form-group">
                                    <label for="file">{{ trans('file.Upload') }} {{ trans('file.File') }}</label>
                                    <input type="file" class="form-control-file" id="file" name="file" required
                                        accept=".xlsx, .xls, .csv">
                                    <small>{{ __('Please select excel/csv') }} file (allowed file size 2MB)</small>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                    <div class="mt-1">
                        <div class="form-actions box-footer">
                            <button name="import_form" id="submit_button" type="submit" class="btn btn-primary"><i
                                    class="fa fa fa-check-square-o"></i> {{ trans('file.Save') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <script type="text/javascript">
        document.getElementById('import_employee').onsubmit = function() {
            var btn = document.getElementById('submit_button');
            btn.disabled = true;
            btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing...';
        };
    </script>
@endsection