@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
<style>
    .upload-description-header{
        color:red;
        font-weight:800;
    }
    #upload{
        width: 500px;
        height: 250px;
        margin:auto;
        margin-bottom:25px;
        margin-top:25px;
        padding: 25px;
        border:2px dashed #028AF4;
    }

    .upload-description-content{
        list-style-type: decimal;
    }

    .modal-dialog{
        overflow-y: initial !important
    }
    .modal-body{
        height:450px;
        overflow-y: auto;
    }

</style>
<style>
    td.details-control {
        background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    tr.shown td.details-control {
        background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
    }

</style>
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <div class="x_panel">
                        <div class="row">
                            <div class="col-xs-128">
                                <h3>Customer Fraud List Import Data</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="row">                
                <div class="col-xs-12">
                    <div class="x_panel">                        
                        <div class="x_content">
                            <div id="upload">
                                <h4 class="upload-description-header">Note to upload Excel: </h4>
                                <ul class="upload-description-content">
                                    <li>Accepted file type only in .xlsx extension</li>
                                    <li>File must not exceed 10 MB</li>
                                    <li>Please <b>DO NOT</b> change the format header of excel template</li>
                                </ul>
                                {{-- <form method="post" id="file-upload" enctype="multipart/form-data"> --}}
                                    <input type="file" id="file" accept="text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required/>
                                    <div class="padding-bottom-30">
                                        <div class="pull-right">
                                            <div class="loader"></div>
                                            <button type="button" class="btn btn-primary" id="import"> Upload </button>
                                        </div>
                                    </div>
                                {{-- </form> --}}
                            </div>
                            <div class="note">
                                <div style="max-height:175px;overflow:auto;">
                                    <span></span><br/>
                                    <p style="color:red;" id="note-content"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
               
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>

  {{-- BEGIN MODAL --}}
  <div class="modal fade" data-backdrop="false" id="modal_preview" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg mw-100 w-75" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    Upload Customer Fraud List
                </h4>
            </div>
            <div class="modal-body">
                {{-- START TABLE PREVIEW --}}
                <div class="col-lg-12 preview hidden">
                    <h2>Data Preview</h2>
                    <div>
                        <table id="preview" class="table table-hover table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Phone</th>
                                <th>NIK</th>
                                <th>Type</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                {{-- END TABLE PREVIEW --}}
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn">Cancel</button>
                <button type="button" data-dismiss="modal" class="btn btn-info" id="save" onClick="saveDataPreview();">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- END MODAL CONFIRM DELETE -->
@section('scripts')
	@include('includes.helper_js')
    @include('pages.customer_suspect.fraud_list_import_js')
@endsection