@extends('layouts.dash')

@section('title') Importations général @stop
@section('subtitle_card',"")

@section('styles')
    <style type="text/css">
        #dragandrophandler
        {
            border:2px dotted #0B85A1;
            width:800px;
            height:200px;
            color:#92AAB0;
            text-align:left;
            vertical-align:middle;
            padding:10px 10px 10 10px;
            margin-bottom:10px;
            font-size:200%;
        }

        .progressBar {
            width: 200px;
            height: 22px;
            border: 1px solid #ddd;
            border-radius: 5px; 
            overflow: hidden;
            display:inline-block;
            margin:0px 10px 5px 5px;
            vertical-align:top;
        }

        .progressBar div {
            height: 100%;
            color: #fff;
            text-align: right;
            line-height: 22px; /* same as #progressBar height if we want text middle aligned */
            width: 0;
            background-color: #0ba1b5; border-radius: 3px; 
        }
        .statusbar
        {
            border-top:1px solid #A9CCD1;
            min-height:25px;
            width:700px;
            padding:10px 10px 0px 10px;
            vertical-align:top;
        }
        .statusbar:nth-child(odd){
            background:#EBEFF0;
        }
        .filename
        {
        display:inline-block;
        vertical-align:top;
        width:250px;
        }
        .filesize
        {
        display:inline-block;
        vertical-align:top;
        color:#30693D;
        width:100px;
        margin-left:10px;
        margin-right:5px;
        }
        .abort{
            background-color:#A8352F;
            -moz-border-radius:4px;
            -webkit-border-radius:4px;
            border-radius:4px;display:inline-block;
            color:#fff;
            font-family:arial;font-size:13px;font-weight:normal;
            padding:4px 15px;
            cursor:pointer;
            vertical-align:top
    }
    </style>
@endsection

@section('content')

    <div class="card">
        <div class="card-header">
                <h3 class="card-title">Importer des écritures</div>
        </div>

        <div class="card-body">
            <div class='form-group row'>
                <div class="col-md-12 ">
                    <h3>Importer</h3>
                    <p>Sélectionnez un fichier Excel (.xlsx) pour importer les données dans la table "clients".<br>
                    <strong>Les colonnes : </strong>Numéro de Transaction,Journal,Date Comptable,Date opération,Référence identifiant,Référence libellé,Compte,Compte Auxiliaire,Désignation,Débit,Crédit,Trimestre
                    </p>

                    <form method="POST" action="{{ url('compta_import') }}" enctype="multipart/form-data" >
                        <input type="file" name="fichier" >

                        <!-- CSRF Token -->
                        @csrf
                        <div id="dragandrophandler">Déposez le fichier ici</div>
                        <br><br>
                        <div id="status1"></div>

    
                        <button type="submit" >Importer</button>

                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection


@section('scripts')
    @include("comptabilite.importations.script_dragdrop");
    
@endsection