@extends('backend.layouts.app')
@section('content')
    <br /><br />
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card shadow">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">Store Management</h3>
                            </div>
                            @if(auth()->user()->user_type_id == '2')
                                <div class="col-4 text-right">
                                    <div class="col-12 row">
                                        <form class="file-import-form" id="file-import-form" width="100%" role="form" enctype="multipart/form-data" files="true">
                                            {{ csrf_field() }}
                                        
                                            <button type="button" class="btn btn-primary import_store" id="import_store" value="import_store">Bulk Upload Stores</button>

                                            <input type="file" class="import_store_file" id="import_store_file" name="import_store_file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" style="display: none" />
                                        </form>
                                        
                                        <button class="btn btn-md btn-success" id="submit_filter" data-toggle="modal" data-target="#modal-default"><i class="fa fa-plus"></i> Create Store</button>
                                    </div>
                                </div>
                            @endif

                            <div class="col-11" style="margin-top:20px;">
                            </div>

                            

                        </div>
                    </div>

                    <div class="card card-nav-tabs text-center">

                    

                        <div class="card-body" id="ajax_area">
                            @include('backend.store.store_ajax')
                        </div>


                    </div>

                    <!-- <div class="card">
                        <div class="card-body">
                            <div class="table-responsive table-hover">
                                <table class="table">
                                    <tbody id="div_user_ratings">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div> -->




                </div>
            </div>
        </div> 
        @include('backend.store.modals.add-store')

        @include('backend.store.modals.edit-store')

        @include('backend.store.modals.business-store')
        @include('backend.store.modals.loading-modal')
    </div>
@endsection
@section('after-scripts')
    

<script type="text/javascript">
    $(document).on("click", ".import_store", function(e){
        e.preventDefault();

        var btn_value = $(this).val();
        
        swal({
            title: "Are you sure?",
            text: "You want to upload the file.",
            icon: "warning",
            buttons: {
                confirm: {
                    text: "SEND",
                    value: "ok",
                    visible: true,
                    className: "btn-success",
                    closeModal: true
                },
                cancel: {
                    text: "Cancel",
                    value: "cancel",
                    visible: true,
                    className: "class3 class4"
                }
            }
        })
        .then((value) => {
            switch (value) {       
                case "ok":

                    $('#import_store_file').trigger('click');
                    
                break;
            }
        });
    });

    $('#import_store_file').on('change', function(){
        if ($('#import_store_file').get(0).files.length === 0) {
            swal({
                title: "",
                text: "No file selected.",
                icon: "warning",
            });
            return false
        }

        importData(this);
    });

    var map;
    function getData() {
        $.ajax({
            url: "store/get_geocode",
            async: true,
            dataType: 'json',
            success: function (data) {
            // console.log(data);
            //load map
            init_map(data);
            init_map2(data);
            }
        });  
    }
  
    function init_map(data) {
        var map_options = {
            zoom: 14,
            center: new google.maps.LatLng(data['latitude'], data['longitude'])
          }
        map = new google.maps.Map(document.getElementById("map"), map_options);
       marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(data['latitude'], data['longitude'])
        });
        infowindow = new google.maps.InfoWindow({
            content: data['formatted_address']
        });
        google.maps.event.addListener(marker, "click", function () {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker);
    }  

    function init_map2(data) {
        var map_options = {
            zoom: 14,
            center: new google.maps.LatLng(data['latitude'], data['longitude'])
          }
        map = new google.maps.Map(document.getElementById("map_edit"), map_options);
       marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(data['latitude'], data['longitude'])
        });
        infowindow = new google.maps.InfoWindow({
            content: data['formatted_address']
        });
        google.maps.event.addListener(marker, "click", function () {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker);
    }

    function importData(that)
    {
        $('#loading-modal').modal('show');

        setTimeout(function() {
            $.ajax({
                url     : BASE_URL+'/admin/store/import-stores',
                type    : 'POST',
                data    : new FormData(that.form),
                cache   : false,
                contentType: false,
                processData: false,
                success : function(response) {
                    $('#loading-modal').modal('hide');
                    
                    if(response.success){
                        swal({
                            title: '',
                            text: response.message,
                            icon: 'success'
                        })
                        .then((value) => {
                            location.reload();
                        });
                    }
                    else{
                        if(response.errors > 0){
                            var html_holder = document.createElement("div");
                            var text_holder = "<ul>";

                            $.each(response.errors, function(index, result) {
                                text_holder += "<li style='text-align:left;'>"+result+"</li>";
                            });

                            text_holder += "</ul>";

                            html_holder.innerHTML = text_holder;

                            swal({
                                title: '',
                                icon:'warning',
                                content: html_holder
                            })
                            .then((value) => {
                                location.reload();
                            });
                        }
                        else{
                            swal({
                                title: '',
                                icon:'warning',
                                text: response.message,
                            })
                            .then((value) => {
                                location.reload();
                            });
                        }
                    }
                },
                error: function(xhr, status, errorThrown){
                    $('#loading-modal').modal('hide');

                    var msg = '';

                    if (xhr.status === 0) {
                        msg = xhr.status+' - Server Timeout Error.';
                    } else if (xhr.status == 404) {
                        msg = xhr.status+' - Requested page not found.';
                    } else if (xhr.status >= 500) {
                        msg = xhr.status+' - Internal Server Error.';
                    } else if (status === 'parsererror') {
                        msg = 'Requested JSON parse failed.';
                    } else if (status === 'timeout') {
                        msg = 'Time out error.';
                    } else if (status === 'abort') {
                        msg = 'Ajax request aborted.';
                    } else {
                        msg = 'Uncaught Error.\n' + xhr.responseText;
                    }

                    swal({
                        title: "",
                        icon: "warning",
                        text: "Error : "+msg,
                    })
                    .then((value) => {
                        location.reload();
                    });
                }            
            });
        }, 2000);
    }
</script>  
<link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
   />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="{{ asset('js/store-management/store.js') }}" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDuecHbwpEspX6hLuKU-HafgSocd8UjPDE&callback=getData" async defer></script>
@endsection