@extends('layouts.main')

@section('content')


<div class="user-dashboard">

    <h2>

    <span>Stockist Master <i class="fa fa-question-circle" aria-hidden="true"></i></span>

    </h2>

    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="sales admin-page">
                <div class="panel-group" id="accordion">


                    <form  action="{{ route('stockist_master_import')}}" method="post" id="incetiveConfiguratorFrm" enctype="multipart/form-data">
                        @csrf
                        <div class="panel checkout-step">
                            <div class="panel-heading">

                                @if (\Session::has('message'))
                                    <script>
                                        $.alert({
                                            title: '',
                                            content: "{{ session('message') }}",
                                        });
                                    </script>
                                @endif

                                @if ($errors->any())
                                    
                                    <script>

                                        var err = "{{ implode(' ~ ',$errors->all() ) }}";
                                        var control_msg =  err.split('~').join(' <br /> ');
                                        $.alert({
                                            title: 'Error!',
                                            content: control_msg,
                                        });
                                    </script>

                                @endif

                                <!--@if (\Session::has('error'))
                                <script>
                                $.alert({
                                title: 'Failed!',
                                content: "{{ session('Failed to process') }}",
                            });
                        </script>
                        @endif-->

                        @if (session('status'))
                        <script>
                        $.alert({
                            title: 'Failed!',
                            content: " {{ session('status') }}",
                        });
                        </script>
                        @endif

                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#incetiveConfiguratorFrm" href="#collapseOne"><span class="fa fa-cog">
                            </span>Setup</a>
                        </h4>
                    </div>

                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <input id="file" name="file" type="file" accept=".xlsx" class="form-control">

                                </div>

                                <div class="col-md-6">
                                    <select class="form-control" name="financial_year" id="financial_year">
                                    <option value="">Select Financial Year</option>
                                    @if(!empty($financial_years))
                                        @foreach($financial_years as $f)
                                            <option value="{{ $f->financial_year }}">{{ $f->financial_year }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>


                        </div>
                        <div class="row">
                            <div class="col-md-2 text-center">
                                <a download="Stockist.xlsx" href="{{asset('/files/Stockist.xlsx') }}" ><button type="button" class="btn btn-light"><span><i class="fa fa-table" aria-hidden="true"></i></span>&nbsp;Download Format</button></a>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-12 text-center">
                                <button class="btn btn-page" id='upload' role="button" type="submit">Proceed</button>
                            </div>
                        </div>

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

        </form>


    </div>
</div>
</div>
</div>
<div class="loader"></div>
</div>



<script>


$(document).ready(function () {

    $(".loader").hide();
    $('#upload').click(function(){

        var fileName = $("#file").val();




        if(!(fileName))
        {

            $.alert({
                title: 'Error!',
                content: "Please select a File",
            });

            return false;
        }


    });




    $("#file").change(function () {



        var val = $(this).val().toLowerCase(),
        //regex = new RegExp("(.*?)\.(csv)$");

        regex = new RegExp("(.*?)\.(xlsx)$");
        regex2 = new RegExp("(.*?)\.(xls)$");

        if ( (regex.test(val)) || (regex2.test(val)) ) {
           return;
        }else{
            $(this).val('');
            $.alert({
                title: 'Error!',
                content: "Please select only xlsx or xls file",
            });
        }
        let size = this.files[0].size; // this is in bytes
        $("button#upload").removeClass('pointernone');
        if (size > 63000000) {//63mb - 63000000
            $("button#upload").addClass('pointernone');
            $.alert({
                title: 'Error!',
                content: "The file must be less than 62 MB. current file size is "+size+" bytes or "+(Math.round((size/1000000) * 100) / 100)+ " MB.",
            });
        }
    });


    $("#incetiveConfiguratorFrm").on("submit", function(){
        $(".loader").show();
    });


});


</script>

@endsection