@extends('layouts.view')
@section('title','Users Management')
@section('content')
    <link href="{{asset('/plugins/select2/select2.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/libs/animate.css/animate.min.css')}}" rel="stylesheet" type="text/css">
    <style>
        .select2-container .select2-selection--single{
            height: 38px !important;
            border-color: #e8ebf3 !important;
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link href="{{ asset('plugins/dropify/css/dropify.min.css') }}" rel="stylesheet">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-right">

                        </div>
                        <h4 class="page-title">{{trans('lang.upload_excel')}}</h4>
                    </div><!--end page-title-box-->
                </div><!--end col-->
            </div><!--end row-->
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
            <div id="formDialog"  class="card-body">
                <h4 class="mt-0 header-title" id="titleheadar">{{trans('lang.upload_excel')}} :</h4>
                <div class="row">
                    <div class="col-lg-10">

                        <form  class="form-horizontal row-fluid" id="sample_form" action="{{route('importData')}}" method="post"  enctype="multipart/form-data">
                            @csrf
                                    <input type="hidden" name="id" id="id" value="0" />
                                    <div class="form-group row">

                                        <label class="col-sm-2 col-form-label text-right" for="basicinput"> </label>

                                        <div class="col-sm-10">
                                            <input required type="file" id="input-file-now" name="import_file"  class="dropify"  />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-sm-2"></div>
                                        <div class="col-sm-10">
                                            <button type="submit" class="btn btn-primary"  name="upload" value="Upload">{{trans('lang.upload')}}</button>
                                        </div>
                                    </div>
                                </form>
                                <br />
                                <div class="progress" style="height: 15px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                        0%
                                    </div>
                                </div>
                                <br />
                                <div id="success" class="row">
                                </div>
                                <br />
                            </div></div></div>

                </div> </div>  </div>
                <script>
                    $(document).ready(function(){
                        $('form').ajaxForm({

                            beforeSend:function(){
                                $('#success').empty();
                                $('.progress-bar').text('0%');
                                $('.progress-bar').css('width', '0%');
                            },
                            uploadProgress:function(event, position, total, percentComplete){
                                var percentVal = percentComplete + '%';
                                $('.progress-bar').width(percentVal);
                                $('.progress-bar').html(percentVal);
                            },
                            success:function(data)
                            {
                            //    alert(data.success);
                                if(data.success)
                                {

                                    $('#success').html('<div class="text-success text-center"<h4 style="padding-left: 10px;color: #4d79f6">'+data.success+'</h4></div><br /><br />');

                                    $('.progress-bar').text('Uploaded');
                                    $('.progress-bar').css('width', '100%');
                                }
                            }
                        });
                    });
                </script>



@endsection


            @section('scripts')
                <script src="{{ asset('plugins/dropify/js/dropify.min.js') }}"></script>
                <script src="{{ asset('assets/pages/jquery.form-upload.init.js') }}"></script>
                <script src="{{ asset('plugins/repeater/jquery.repeater.min.js') }}"></script>
                <script src="{{ asset('assets/pages-material/jquery.form-repeater.js') }}"></script>
                <script src="{{ asset('assets/js/app.js') }}"></script>
                <script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>

@endsection