@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>Price LM 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>
        {{-- 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 Price LM 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>Gram</th>
                                        <th>Certieye</th>
                                        <th>Retro</th>
                                        <th>UBS</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 -->
        @include('includes.footer')
    </div>
</div>

@section('scripts')
	@include('includes.helper_js')
    @include('pages.butik.sell.price_lm.import_js')
@endsection