@extends('layouts.app')
@section('title', 'Shipping | Shopping Cart')
@section('extrastyles')
    <link href="{{ asset('/plugins/select2/select2.css') }}" rel="stylesheet">
    <style>
        table.table-bordered tbody th, table.table-bordered tbody td {
            border-left-width: 0;
            border-bottom-width: 0;
        }
        table td[class*="col-"], table th[class*="col-"] {
            position: static;
            display: table-cell;
            float: none;
        }
        .v-align {
            vertical-align: middle !important;
        }
        .col-lg-3 {
            width: 25%;
        }
        p {
            margin: 0 0 10px;
        }
        .text-center {
            text-align: center;
        }
        table ul {
            margin-top: 35px;
            margin-left: 20%;
            text-align: left;
        }
        ul {
            padding-left: 0;
        }
        table ul li {
            list-style: disc;
            line-height: 28px;
        }
        .alert-success, .alert-danger, .alert-info, .alert-warning {
            border: none;
        }
        .glyphicon-question-sign {
            margin-right: 0px;
        }
        .shipping_method_img{
            max-width: 100px;
        }
        .shipping-method-listing tr td{
            width: 33%;
        }
        .select2-container {
            z-index: 99999;
        }
        .panel-title  .tabTitle{
            font-size: 18px;
        }
        .custom-height tr > td:first-child > p:first-child{
            min-height: 200px;
            vertical-align: middle;
            display: flex;
        }
        .custom-height tr > td:first-child > p:first-child > img{
            vertical-align: middle;
            display: inline-block;
            height: auto;
            object-fit: contain;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
@endsection

@section('content')
    <div class="studio98_websters">
        <div class=" wrapper white-bg page-heading " style="padding-top: 1px;">
            <div class="col-lg-12">
                <h2 class="pull-left" style="font-family: Newsreader; font-weight: 300;">Shipping</h2>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
            <table class="table table-bordered custom-height">
                <tbody class="shipping-method-listing">
                <tr>
                    <td class="v-align text-center col-lg-3">
                        <p><img class="shipping_method_img" src="{{ asset('/images/fedEx.png') }}"></p>
                        <p><small><a target="_blank" href="https://www.fedex.com/en-us/home.html"><span class="glyphicon glyphicon-question-sign"></span> Get more Info</a></small></p>
                    </td>
                    <td class="v-align col-lg-5">
                        <p>Easily integrate FedEx services into your website to give customers a seamless experience.</p>
                        <p>Automatically calculate, display, and bill for shipping costs based on your customer's cart.</p>
                    </td>
                    <td class="v-align text-center col-lg-4" data-type="fedex">
                        @if(isset($fedex_method))
                            <p class="connected">
                                <span><img src="{{ asset('images/check.png') }}"></span>
                                <span><strong>Connected as <br>{{$fedex_method->name}}</strong></span>
                            </p>
                            <p><a class="btn btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#setting_for_fedex">Settings</a></p>
                            <p><a class="btn btn-danger disable-shipping-method" href="javascript:void(0)">Disable</a></p>
                            {{--                            <p><a class="btn btn-default deactivate_method" href="javascript:void(0)" data-id="{{ $fedex_method->id }}">Deactivate</a></p>--}}
                        @else
                            <p><a class="btn btn-primary" href="javascript:void(0)" data-toggle="modal" data-target="#setting_for_fedex">Enable</a></p>
                        @endif
                    </td>
                </tr>
                <tr>
                    <td class="v-align text-center col-lg-3">
                        <p><img class="shipping_method_img" src="{{ asset('/images/ups.png') }}"></p>
                        <p><small><a target="_blank" href="https://www.ups.com/us/en/Home.page"><span class="glyphicon glyphicon-question-sign"></span> Get more Info</a></small></p>                    </td>
                    <td class="v-align col-lg-5">
                        <p>Easily integrate UPS services into your website to give customers a seamless experience.</p>
                        <p>Automatically calculate, display, and bill for shipping costs based on your customer's cart.</p>
                    </td>
                    <td class="v-align text-center col-lg-4" data-type="ups">
                        @if(isset($ups_method))
                            <p class="connected">
                                <span><img src="{{ asset('images/check.png') }}"></span>
                                <span><strong>Connected as <br>{{$ups_method->name}}</strong></span>
                            </p>
                            <p><a class="btn btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#setting_for_ups">Settings</a></p>
                            <p><a class="btn btn-danger disable-shipping-method" href="javascript:void(0)">Disable</a></p>
                        @else
                            <p><a class="btn btn-primary" href="javascript:void(0)" data-toggle="modal" data-target="#setting_for_ups">Enable</a></p>
                        @endif
                    </td>
                </tr>

                <tr>
                    <td class="v-align text-center col-lg-3">
                        <p><img class="shipping_method_img" src="{{ asset('/images/shipstation.png') }}"></p>
                        <p><small><a target="_blank" href="https://www.fedex.com/en-us/home.html"><span class="glyphicon glyphicon-question-sign"></span> Get more Info</a></small></p>
                    </td>
                    <td class="v-align col-lg-5">
                        <p>Enjoy discounted shipping rates, automated workflows, flexible order and shipment management, and more!</p>
                    </td>
                    <td class="v-align text-center col-lg-4" data-type="shipstation">
                        @if(isset($shipStationMethod))
                            <p class="connected">
                                <span><img src="{{ asset('images/check.png') }}"></span>
                                <span><strong>Connected as <br>{{$shipStationMethod->name}}</strong></span>
                            </p>
                            <p><a class="btn btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#shipstation_settings">Settings</a></p>
                            <p><a class="btn btn-danger disable-shipping-method" href="javascript:void(0)">Disable</a></p>
                        @else
                            <p><a class="btn btn-primary" href="javascript:void(0)" data-toggle="modal" data-target="#shipstation_settings">Enable</a></p>
                        @endif
                    </td>
                </tr>


                <tr>
                    <td class="v-align text-center col-lg-3">
                        <p><img class="shipping_method_img" src="https://voxships.com/wp-content/uploads/2020/12/voxships@2x.png" alt="WoxShips"></p>
                        <p><small><a target="_blank" href="https://www.fedex.com/en-us/home.html"><span class="glyphicon glyphicon-question-sign"></span> Get more Info</a></small></p>
                    </td>
                    <td class="v-align col-lg-5">
                        <p>Vox uses the latest in state of the art technology and software to make sure your operation runs flawlessly.</p>
                        <p>Vox takes care of every product belonging to every company that they service.</p>
                    </td>
                    <td class="v-align text-center col-lg-4" data-type="voxships">
                        @if(isset($shipVoxShipsMethod))
                            <p class="connected">
                                <span><img src="{{ asset('images/check.png') }}"></span>
                                <span><strong>Connected as <br>{{$shipVoxShipsMethod->name}}</strong></span>
                            </p>
                            <p><a class="btn btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#voxships_settings">Settings</a></p>
                            <p><a class="btn btn-danger disable-shipping-method" href="javascript:void(0)">Disable</a></p>
                        @else
                            <p><a class="btn btn-primary" href="javascript:void(0)" data-toggle="modal" data-target="#voxships_settings">Enable</a></p>
                        @endif
                    </td>
                </tr>

                <tr>
                    <td class="v-align text-center col-lg-3">
                        <p><img class="shipping_method_img" src="{{ asset('/images/custom.png') }}"></p>
                        <p><small><a target="_blank" href="javascript:void(0)"><span class="glyphicon glyphicon-question-sign"></span> Get more Info</a></small></p>
                    </td>
                    <td class="v-align text-center col-lg-5">
                        <ul>
                        </ul>
                    </td>
                    <td class="v-align text-center col-lg-4" data-type="custom">
                        @if(isset($customMethods) && count($customMethods) > 0)
                            <p><a class="btn btn-default custom_method_popup" href="javascript:void(0)">Settings</a></p>
                        @else
                            <p><a class="btn btn-primary custom_method_popup" href="javascript:void(0)">Enable</a></p>
                        @endif
                    </td>
                </tr>


                {{--                <tr>--}}
                {{--                    <td class="v-align text-center col-lg-3">--}}
                {{--                        <p><img class="shipping_method_img" src="{{ asset('/images/direct-scale-logo.svg') }}"></p>--}}
                {{--                        <p><small><a target="_blank" href="https://www.directscale.com/"><span class="glyphicon glyphicon-question-sign"></span> Get more Info</a></small></p>--}}
                {{--                    </td>--}}
                {{--                    <td class="v-align text-center col-lg-5">--}}
                {{--                        <ul>--}}
                {{--                            <li>Integrated checkout on your site to accept credit cards</li>--}}
                {{--                            <li>No monthly fees, no refund costs, no hidden fees</li>--}}
                {{--                            <li>2.9% + .30c per successful charge</li>--}}
                {{--                            <li>Instantaneously accept credit cards on your site</li>--}}
                {{--                            <li>Earnings are transferred to your bank account on a 2-day rolling basis</li>--}}
                {{--                        </ul>--}}
                {{--                    </td>--}}
                {{--                    <td class="v-align text-center col-lg-4">--}}
                {{--                        @if($direct_method)--}}
                {{--                            <p class="connected">--}}
                {{--                                <span><img src="{{ asset('images/check.png') }}"></span>--}}
                {{--                                <span><strong>Connected as <br>{{$direct_method->name}}</strong></span>--}}
                {{--                            </p>--}}
                {{--                            <p><a class="btn btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#setting_for_direct_scale">Settings</a></p>--}}
                {{--                        @else--}}
                {{--                            <p><a class="btn btn-primary" href="javascript:void(0)" data-toggle="modal" data-target="#setting_for_direct_scale">Enable</a></p>--}}
                {{--                        @endif--}}
                {{--                    </td>--}}
                {{--                </tr>--}}
                {{-- <tr>
                    <td class="v-align text-center col-lg-3">
                        <p><img class="shipping_method_img" src="{{ asset('/images/amaazon.png') }}"></p>
                        <p><small><a target="_blank" href="https://www.amazon.com/"><span class="glyphicon glyphicon-question-sign"></span> Get more Info</a></small></p>
                    </td>
                    <td class="v-align text-center col-lg-5">
                        <ul>
                            <li>Integrated checkout on your site to accept credit cards</li>
                            <li>No monthly fees, no refund costs, no hidden fees</li>
                            <li>2.9% + .30c per successful charge</li>
                            <li>Instantaneously accept credit cards on your site</li>
                            <li>Earnings are transferred to your bank account on a 2-day rolling basis</li>
                        </ul>
                    </td>
                    <td class="v-align text-center col-lg-4" data-type="amazon">
                        @if($amazon_method)
                            <p class="connected">
                                <span><img src="{{ asset('images/check.png') }}"></span>
                                <span><strong>Connected as <br>{{$amazon_method->name}}</strong></span>
                            </p>
                            <p><a class="btn btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#setting_for_amazon">Settings</a></p>
                            <p><a class="btn btn-danger disable-shipping-method" href="javascript:void(0)">Disable</a></p>
                        @else
                            <p><a class="btn btn-primary" href="javascript:void(0)" data-toggle="modal" data-target="#setting_for_amazon">Enable</a></p>
                        @endif
                    </td>
                </tr> --}}

                </tbody>
                {{--                <div>--}}
                {{--                </div>--}}
            </table>
        </div>
    </div>

        @include('Product::shopping-cart.shipping._popup',compact('popup_name','title','method','name'))
        @include('Product::shopping-cart.shipping._popup',compact('popup_name','title','method','name'))
        @include('Product::shopping-cart.shipping._popup',compact('popup_name','title','method','name'))
        @include('Product::shopping-cart.shipping._popup',compact('popup_name','title','method','name'))

        @include('Product::shopping-cart.shipping._popup',compact('popup_name','title','method','name'))

        @include('Product::shopping-cart.shipping._popup',compact('popup_name','title','method','name'))
@endsection


@section('footer')
    <script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script>
        $( document ).ready(function() {
            $('.ups_services,#ups_services').select2();
            $('.deactivate_method').click(function () {
                var id = $(this).data('id');
                if(confirm('Are you sure you want to delete?')) {
                    $.ajax({
                        method: 'POST',
                        url: '{{ shopping_cart_url('shipping/settings-delete')}}',
                        data: 'shipping_id='+id+'&_token='+csrf_token,
                    }).done(function() {
                        location.reload();
                    });
                }
            });

            $(".disable-shipping-method").on('click', function () {
                var serviceType = $(this).closest('td').data('type');
                if( confirm('Are you sure you want to disable this shipping method?') ) {
                    processBtnDisable($(this));
                    $.ajax({
                        type: 'POST',
                        url: '{{ shopping_cart_url('shipping/remove') }}',
                        data: '_token={{ csrf_token() }}&serviceType=' + serviceType,
                        dataType: 'json'
                    }).done(function (response) {
                        location.reload();
                    });
                }
            });

            // if($('.carriers_parent').length > 0) {
            //     $('#shipStation_carrier').trigger('change');
            // }
        });
        function storeSetting(parentId)
        {
            return reloadAjaxSubmit(parentId,"{{ shopping_cart_url('shipping/settings-method') }}",'type','Submit');
        }


        $(document).on('change', '.custom_method', function () {
            var customMethodValue = $(this).val();
            if(customMethodValue == 'Price Range'){
                $(this).closest('.col-md-12').find('.amount').hide();
                $(this).closest('.col-md-12').find('.custom_checkbox').show();
                $(this).closest('.col-md-12').find('.from_to_amount').show();

            }else {
                $(this).closest('.col-md-12').find('.amount').show();
                $(this).closest('.col-md-12').find('.custom_checkbox').hide();
                $(this).closest('.col-md-12').find('.from_to_amount').hide();
            }
        });

        $(document).on('click', '.custom_all_value', function () {
            if($(this).prop("checked") == true){
                $(this).closest('.col-md-12').find('.custom_zip').hide();
            }else if($(this).prop("checked") == false){
                $(this).closest('.col-md-12').find('.custom_zip').show();
            }
        });


        $(document).on('click', '.add_more_value', function (){
            let accordionDataIndex = $(this).closest('.panel-default').data('index');
            accordionDataIndex = isNaN(accordionDataIndex) ? 0 : accordionDataIndex;
            var html = "<div class='row from_to_amount'>" +
                "<div class='col-lg-3'><div class='form-group from'>" +
                "<label for= 'from'>Form:</label>" +
                "<input type= 'text' name= 'from["+accordionDataIndex+"][]' class = 'form-control' placeholder = 'From'>" +
                "</div></div>" +
                "<div class='col-lg-3'><div class='form-group to'>" +
                "<label for= 'from'>To:</label>" +
                "<input type= 'text' name= 'to["+accordionDataIndex+"][]' class = 'form-control' placeholder = 'To'>" +
                "</div></div>" +
                "<div class='col-lg-3'><div class='form-group amount_value'>" +
                "<label for= 'from'>Amount:</label>" +
                "<input type= 'text' name= 'amount_value["+accordionDataIndex+"][]' class = 'form-control' placeholder = 'Amount'>" +
                "</div></div>" +
                "<div class='col-lg-1 mt-5'><i class='fa fa-trash delete_row' aria-hidden='true'></i></div>" +
                "</div>";
                $(this).closest('.col-md-12').append(html);
        });


        function addVoxShipNewItem(parentId)
        {
            var html =
                '<div class="row voxships_delete_item mt-1">' +
                '<div class="col-lg-4">'+
                '<input type="text" class="form-control" name="settings[voxships_label][]" value="">' +
                '</div>'+
                '<div class="col-lg-4">'+
                '<input type="text" class="form-control" name="settings[voxships_value][]" value="">' +
                '</div>'+
                '<div class="col-lg-3">'+
                '<input type="text" class="form-control" name="settings[voxships_price][]" value="">' +
                '</div>'+
                '<div class="col-lg-1">' +
                '<span class="input-group-btn">' +
                '<a href="javascript:void(0)" tabindex="-1" class="btn btn-transparent delete-voxships-item" style="margin-left: 11px;"><i class="fa fa-trash-o"></i></a>' +
                '</span>' +
                '</div>' +
                '</div>';
            $('#'+parentId).find('#voxshpis_price').append(html);
            $('#'+parentId).find('#voxshpis_price').find('input[type=text]').filter(':visible:nth-child(1)').focus();


            deleteVoxItem();
        }
        deleteVoxItem();

        function deleteVoxItem() {
            $('.delete-voxships-item').unbind('click');
            $('.delete-voxships-item').on('click', function (){
                $(this).closest('.voxships_delete_item').remove();
            });
        }


        $(document).on('click', '.delete_row', function (){
            $(this).closest('.row').remove();
        });


        var data_index = -1
        $(document).on('click', '.add_custom_settings', function () {
            var accordionDataIndex = $('#accordion').find('.panel-default').last().data('index');
            if (accordionDataIndex != ''){
                data_index = accordionDataIndex;
            }
            data_index++;
            const id = $(this).data('id');
            $.ajax({
                type: 'GET',
                url: '{{ shopping_cart_url('shipping/custom-form/') }}/'+data_index,
            }).done(function (response) {
                $('#wrapper .proDbTabs #accordion').append(response);
            });
        });

        $(document).on('hidden.bs.modal', '#setting_for_custom', function () {
            $('#wrapper #setting_for_custom').remove();
        });

        $(document).on('click', '.custom_method_popup', function () {
            $.ajax({
                type: 'GET',
                url: '{{ shopping_cart_url('shipping/custom-methods') }}',
            }).done(function (response) {
                $('#wrapper').append(response);
                $('#custom_methods_modal').modal('show');
                $('.custom_method').trigger('change')
            });
        });

        function storeCustomSetting(object) {
            var data = $(object).serialize();
            const btn = $("#custom_methods_modal button[type=submit]");
            processBtnDisable(btn);
            $.ajax({
                method: 'POST',
                url: "{{ shopping_cart_url('shipping/custom-methods')}}",
                data: data,
                dataType: "json"
            }).done(function(data) {
                $('#custom_methods_modal').modal('hide');
                revertProcessBtnDisable(btn, 'Submit');
                toastrShow('Success','Data has been saved successfully!');
                location.reload();
            });
            return false;
        }

        $(document).on('click', '.remove_custom_method', function () {
            $(this).closest('.panel-default').remove();
            var remove_custom_method =  $(this).data('id');
            if (remove_custom_method != ''){
                $.ajax({
                    method: 'DELETE',
                    url: "{{ shopping_cart_url('shipping/custom-methods-delete/')}}/" + remove_custom_method,
                    dataType: "json"
                }).done(function() {
                });
                return false;
            }
        });

        $(document).on('change', '#shipStation_carrier', function () {
            const carrier = $(this).find(":selected").val();
            const type = $(this).closest('.modal-body').find('.method_type').val();
            if(carrier !=='') {
                $.ajax({
                    method: 'GET',
                    url: "{{ shopping_cart_url('shipping/shipstation-package')}}",
                    data: {carrier,type},
                    dataType: "json"
                }).done(function(data) {
                    if(data && data.success) {
                        if(data.data) {
                            $('.shipstation_packages_parent').show();
                            const packages = data.data;
                            $('#shipstation_packages').empty();
                            Object.keys(packages).forEach(function (i, item) {
                                $('#shipstation_packages').append($('<option>', {
                                    value: i,
                                    text : packages[i]
                                }));
                            })
                        }
                    }
                });
            }else{
                $('#shipstation_packages').empty();
                $('.shipstation_packages_parent').hide();
            }
            return false;
        });

    </script>
@endsection