@extends('layouts.master')
@section('content')
    <style>
        .pt-7 {
            padding-top: 7px !important
        }

        .mb-4 {
            margin-bottom: 4px !important
        }

        .font11 {
            font-size: 11px !important
        }

        .headingDB {
            padding: 15px 20px !important;
            margin-left: -5px
        }

    </style>
    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Import <span> Retailers</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Retailers</span></a></li>
                <li><span>Upload</span></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 mb-30">
            <div class="card mb-30">
                <div class="header">
                    <h2>Upload <span> Retailers</span></h2>
                    <a href="/Retailers.xlsx" class="btn add_button "><i class="fa fa-download"></i> <span>Download Sample</span></a>
                </div>
                <div class="body PT-15">
                    <div id="floating-label">
                        <div class="form-wrap p-0">
                            <form id="upload-file" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="file" name="file" id="input-file-now" class="dropify" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" required / >
                                    </div>
                                    <div class="col-12 text-right">
                                        <button type="submit" class="btn btn-primary m-0 mt-5 save_new_distributor">Upload</button>
                                        <a href="/" class="btn btn-primary m-0 mt-5 ml-2 btn-cancel">Cancel</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        $('#input-file-now').dropify({
            messages: {
                'default': 'Upload/Drag and drop excel(xls,xlsx) file',
                'replace': 'Upload/Drag and drop or click to replace',
                'remove':  'Remove',
                'error':   'Ooops, something wrong happended.'
            }
        });
        $(document).ready(function (e) {
            $("#upload-file").on('submit',(function(e) {
                e.preventDefault();
                $.ajax({
                    url: "/import-retailers",
                    type: "POST",
                    data:  new FormData(this),
                    contentType: false,
                    cache: false,
                    processData:false,
                    beforeSend : function()
                    {
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'blue');
                        $('#notifDiv').text('Please wait.Your file is uploading ....');
                    },
                    success: function(response)
                    {
                        if(response.status == 'success'){
                            $(".dropify-clear").trigger("click");
                            $('#notifDiv').fadeIn();
                            $('#notifDiv').css('background', 'green');
                            $('#notifDiv').text(response.msg);
                            setTimeout(() => {
                                $('#notifDiv').fadeOut();
                            }, 3000);
                        }else{
                            $('#notifDiv').fadeIn();
                            $('#notifDiv').css('background', 'red');
                            $('#notifDiv').text(response.msg);
                            setTimeout(() => {
                                $('#notifDiv').fadeOut();
                            }, 3000);
                        }
                    },
                    error: function(e)
                    {
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'red');
                        if(e.status == 422)
                            $('#notifDiv').text(e.responseJSON.errors.file);
                        else
                            $('#notifDiv').text(e.responseJSON.message);
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);
                    }
                });
            }));
        });
    </script>
@endpush