@canany(['orders-imports'])
<link rel="stylesheet" href="{{asset('backend/css/pages-css/import-invoice.css')}}">
<div class="purchase-data" id="left_tab">
    <div class="card">
        <div class="card-header">
            <h4 class="m-0">{{ __('Import invoices')}}</h4>
        </div>
        <div class="card-body">
            <a class="download-csv h4 text-white bg-light" href="{{ asset('download/invoice-sample.csv') }}">
                <p class="w-100 bg-light text-center p-2">
                {{ __('Download sample CSV file')}}
                </p>
            </a>

            <section class="tabs-section">
                <form id="msform" onsubmit="return false;">
                    <input type="hidden" name="filename" id="set_filename" value="">
                    <input type="hidden" name="" id="set_logs" value="">

                    <div class="row">
                        <div class="col-lg-4">
                            <ul id="progressbar_ctm" class="nav nav-tabs flex-column mb-3">
                                <li class="nav-item active" id="choose_file">
                                    <a class="nav-link active show">
                                        <span class="step-number"><i class="fas fa-lock"></i></span>
                                        <span class="step-text">{{__('Choose file')}}</span>
                                    </a>
                                </li>
                                <li class="nav-item" id="fieldmapping">
                                    <a class="nav-link">
                                        <span class="step-number"><i class="far fa-user"></i></span>
                                        <span class="step-text">{{__('Field mapping')}}</span>
                                    </a>
                                </li>
                                <li class="nav-item" id="confirm">
                                    <a class="nav-link">
                                        <span class="step-number"><i class="fas fa-check"></i></span>
                                        <span class="step-text">{{__('Finish')}}</span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="col-lg-8 tabDiv">
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%" data-current-step="1"
                                     aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>


                            <div class="tab-content">
                                <fieldset id="step_1">
                                    <div class="form-card">
                                        <div class="row">
                                            <div class="col-7">
                                                <h2 class="fs-title"></h2>
                                            </div>
                                        </div>

                                        <label class="fieldlabels">{{__('Choose file *')}}</label>
                                        <input type="file" name="upload_file" id="upload_file" class="input"
                                               required="required" />
                                    </div>
                                    <input type="button" name="next" class="btnUploadFile action-button btn btn-primary" value="Next">
                                </fieldset>

                                <fieldset id="step_2" style="opacity: 0; display: none; position: relative;">
                                    <div class="form-card">
                                        <div class="row">
                                            <div class="col-7">
                                                <h2 class="fs-title"></h2>
                                            </div>
                                        </div>
                                        <div class="row" id="mapping_data_list">
                                            <div class="col-4">
                                                <label class="fieldlabels">{{__('Reference: *')}}</label>
                                                <select name="mapping_0" id="mapping_0" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11">
                                                    <option value="0" selected>{{__('Reference')}}</option>
                                                    <option value="1">{{__('Credit')}}</option>
                                                    <option value="2">{{__('Sending Address')}}</option>
                                                    <option value="3">{{__('Tx Hash')}}</option>
                                                    <option value="4">{{__('Action')}}</option>
                                                    <option value="5">{{__('Euro Amount')}}</option>
                                                    <option value="6">{{__('From Username')}}</option>
                                                    <option value="7">{{__('To Username')}}</option>
                                                    <option value="8">{{__('Card #')}}</option>
                                                    <option value="9">{{__('Ticket #')}}</option>
                                                    <option value="10">{{__('Additional Note')}}</option>
                                                    <option value="11">{{__('Action By')}}</option>
                                                    <option value="12">{{__('Verified By')}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="button" name="next" class="btnSaveAndNext next action-button btn btn-primary" value="{{__('Next')}}" />
                                    <input type="button" name="previous" class="previous action-button-previous action-button btn btn-primary" value="{{__('Previous')}}" />
                                </fieldset>

                                <fieldset id="step_3" style="opacity: 0; display: none; position: relative;">
                                    <div class="form-card">
                                        <div class="row">
                                            <div class="col-7">
                                                <h2 class="fs-title">{{__('Finish:')}}</h2>
                                            </div>
                                        </div>
                                        <br><br>

                                        <div id="step_4">
                                            <h2 class="purple-text text-center"><strong>{{__('Data import processing !')}}</strong></h2>
                                            <br>
                                            <div class="row justify-content-center">
                                                <div class="col-3 text-center">
                                                    <i class="fa fa-check fa-2x text-success"></i>
                                                </div>
                                            </div>
                                            <div class="row justify-content-center">
                                                <div class="col-12 text-center">
                                                    <h5 class="purple-text text-center info-text">
                                                    </h5>

                                                </div>
                                            </div>
                                        </div>
                                        <div id="step_5">
                                            <div class="col-12 text-center">
                                                <h5 class="purple-text text-center info-text">
                                                </h5>
                                                <div style="margin-bottom:10px;">


                                                </div>
                                                <h2>{{__('Total record')}} <span id="total"></span></h2>

                                                <h2>{{__('Total error')}} <span id="bug"></span></h2>
                                                <h2>{{__('Total completed')}} <span id="done"></span></h2>
                                                <a class="btn btn-primary btn-md" style="margin-bottom: 18px;"
                                                   id="btn-close">{{__('Close job now')}}</a>
                                                <div id="after-done" style="display:none">
                                                    <input type="button" name="next"
                                                           class="btn btn-primary btn-warning btnReload btn-wid"
                                                           value="{{__('Upload New')}}" style="margin-bottom: 18px;" />
                                                    <a href="" target="_blank" download class="btn btn-primary btn-md"
                                                       style="margin-bottom: 18px;" id="dsl">{{__('Download success Log')}}</a>

                                                    <br>
                                                    <a href="" target="_blank" download class="btn btn-primary btn-md"
                                                       id="del">{{__('Download error log')}}</a>
                                                    <br> <br>
                                                </div>
                                                <table class="table table-striped table-bordered import-tbl" id="tbl_logs" table-for="tbl_logs">
                                                    <thead>
                                                    <th>{{ __('Reference')}}</th>
                                                    <th>{{ __('Message')}}</th>
                                                    </thead>
                                                    <tbody>

                                                    </tbody>
                                                </table>
                                                <table class="table table-striped table-bordered import-tbl" id="tbl_logs_success" table-for="tbl_logs_success"
                                                       style="display:none">
                                                    <thead>
                                                    <th>{{ __('Reference')}}</th>
                                                    <th>{{ __('Message')}}</th>
                                                    </thead>
                                                    <tbody>

                                                    </tbody>
                                                </table>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>

{{-- CSR Holder Mapping --}}
<script src="{{ asset('backend/js/internal-scripts/import-export/order/import-blade.js') }}"></script>
@endcan