@extends('layouts.app')

@section('title', 'Import Task')
@section('breadcrumb', 'Task')
@section('sub-breadcrumb')
    <a href="{{route('task.list')}}" class="kt-subheader__breadcrumbs-link">
        Task
    </a>
    <span class="kt-subheader__breadcrumbs-separator"></span>
    <a class="kt-subheader__breadcrumbs-link">
        Import Task
    </a>
@endsection
@section('task', 'kt-menu__item--open kt-menu__item--here')
@section('import-task', 'kt-menu__item--active')
@section('custom-style')

@endsection
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')
            <div class="col-md-6 offset-md-3">
                <div class="form-group m-form__group" style="margin-bottom: 5px;">
                    <label for="exampleInputEmail1">File Excel Example</label>
                    <a href="{{ asset('files/import-task-example.xlsx') }}" class="btn btn-secondary btn-sm m-2"><i class="fa fa-download"></i> Example File</a>
                    <span>OR</span>
                </div>
                <div class="form-group m-form__group">
                    <label>Export existing data</label>
                    <a href="{{ route('task.export') }}" class="btn btn-outline-info btn-sm m-2"><i class="fa fa-file-excel"></i> Export File</a>
                </div>

	            <form id="form" action="{{ route('task.import.store') }}" method="POST" enctype="multipart/form-data">
	                @csrf
                    <div class="form-group">
                        <label>Upload File <span style="color:red;">*</span> :</label> <br/>
                        <div class="input-group">
                            <input type="file" name="file" class="form-control m-input" placeholder="File" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Master PIN <span style="color:red;">*</span> :</label> <br/>
                        <div class="input-group">
                            <input type="password" name="password" id="password" class="form-control m-input" placeholder="Enter your PIN" autocomplete="new-password" required>
                        </div>
                    </div>
                    <div class="form-group pull-right">
                        <button type="reset" class="btn btn-secondary mr-2"><i class="fa fa-undo"></i> Reset</button>
                        <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Save</button>
                    </div>
                </form>
    		</div>
    	</div>
	</div>
@endsection

@section('custom-script')
    <script type="text/javascript">
        $('#form').on('submit', function() {
            $('#loading').show();
        })

        $('#password').on('keyup input change', function(e) {
            var value = $(this).val();
            value = value.replace(/[^0-9]/g, '');
            // check: accept number only
            var check = /^\d+$/.test(value)
            if (!check || value.length > 6) {
                e.preventDefault();
                value = value.substring(0,6);
            }
            $(this).val(value);
        });

    window.onload = function() {
    const myInput = document.getElementById('password');
    myInput.onpaste = function(e) {
    e.preventDefault();
        }
    }
    </script>

@endsection