@extends('modules.head') @section('contenido')
<div id="delivery_ranges_container" class="delivery_ranges_container">
    <div style="display:flex; justify-content: space-between">
        <div>
            <h3 class="table_title">Delivery Ranges</h3><br>
        </div>
        <div>
            @if ($rangesQuantityInBranch > 0)
            <a class="auxiliar-black">
                <button id="remove-all-ranges-btn" class="btn btnAux pull-right" style="margin-left: 5px;">
                    <i class="fa fa-trash"></i>Remove ranges
                </button>
            </a>
            @endif
            <a class="auxiliar-black" href="{{ URL::to('/deliveries/ranges-create') }}">
                <button class="btn btnAdd pull-right">
                    <i class="fa fa-plus"></i>Create range
                </button>
            </a>
        </div>
    </div>

    <div class="box-body table-responsive" id='ranges_table_container'>
        <table id="ranges_table" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Min range</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Max range</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Min subtotal</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Free subtotal</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Linear fee</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Use percentage?</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Percentage fee</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<style>
    #remove-all-ranges-btn>i {
        color: white
    }

    .fa-trash {
        color: #eb1c24;
        cursor: pointer;
    }
</style>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script type="text/javascript">
    // table logic showing ranges table
    $(document).ready(function() {
        $('#ranges_table thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#ranges_table thead');

        $('#ranges_table thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#ranges_table").dataTable().fnDestroy();
        _table = $('#ranges_table').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            "order": [],
            "language": {
                url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
            },
            ajax: {
                url: '/deliveries/get-all-branch-ranges',
            },
            columns: [{
                    data: 'min_range',
                    name: 'min_range',
                    render: function(data) {
                        return parseFloat(data);
                    }
                },
                {
                    data: 'max_range',
                    name: 'max_range',
                    render: function(data) {
                        return parseFloat(data);
                    }
                },
                {
                    data: 'min_subtotal',
                    name: 'min_subtotal',
                    render: function(data) {
                        return parseFloat(data);
                    }
                },
                {
                    data: 'free_subtotal',
                    name: 'free_subtotal',
                    render: function(data) {
                        return parseFloat(data);
                    }
                },
                {
                    data: 'linear_fee',
                    name: 'linear_fee',
                    render: function(data) {
                        return parseFloat(data);
                    }
                },
                {
                    data: 'use_percentage',
                    name: 'use_percentage',
                    render: function(data) {
                        return data ? "Yes" : "No";
                    }
                },
                {
                    data: 'percentage_fee',
                    name: 'percentage_fee',
                    render: function(data) {
                        return parseInt(data);
                    }
                },
                {
                    data: 'actions',
                    name: 'actions',
                },
            ],
            orderCellsTop: true,
            fixedHeader: true,
            initComplete: addFiltersForDataTable
        });
    })

    // Removing range logic
    function removeRange(rangeId){
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this.",
            icon: 'info',
            buttons: {
                confirm: {
                    text: 'Yes, remove it',
                    className: 'btn btn-primary'
                },
                cancel: {
                    visible: true,
                    className: 'btn btn-danger'
                }
            }
        }).then(function(val) {
            if (val) {
                $.ajax({
                    type: 'get',
                    url: `/deliveries/ranges/${rangeId}/delete`,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    success: function(r) {
                        if (r.status) {
                            swal({
                                title: 'Success!',
                                text: r.message,
                                icon: 'success'
                            }).then((val) => {
                                if (val) {
                                    location.reload();
                                }
                            })
                        } else {
                            swal({
                                title: '',
                                text: r.message,
                                icon: 'warning'
                            })
                        }
                    }
                })
            }
        })
    }

    // Removing all the ranges
    $('#remove-all-ranges-btn').click(function(e) {
        swal({
            title: 'Are you sure?',
            text: "All ranges in this branch will be deleted.",
            icon: 'info',
            buttons: {
                confirm: {
                    text: 'Yes, remove them',
                    className: 'btn btn-primary'
                },
                cancel: {
                    visible: true,
                    className: 'btn btn-danger'
                }
            }
        }).then(function(val) {
            if (val) {
                $.ajax({
                    type: 'get',
                    url: `/deliveries/ranges/delete-all`,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    success: function(r) {
                        if (r.status) {
                            swal({
                                title: 'Success!',
                                text: r.message,
                                icon: 'success'
                            }).then((val) => {
                                if (val) {
                                    location.reload();
                                }
                            })
                        } else {
                            swal({
                                title: '',
                                text: r.message,
                                icon: 'warning'
                            })
                        }
                    }
                })
            }
        })
    })
</script>
@endsection