@extends('modules.head') @section('contenido')
<div class="edit-range-container">
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="branch">Branch</label>
            <select id="branch" class="form-control" disabled>
                @foreach($branches as $branch)
                @if($branch->id == $range->branch_id )
                <option value="{{ $branch->id }}" selected>{{ $branch->short_name }}</option>
                @else
                <option value="{{ $branch->id }}">{{ $branch->short_name }}</option>
                @endif
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-4">
            <label for="min_range">Min range (miles)</label>
            <input type="number" class="form-control" id="min_range" placeholder="Min range" value="{{ number_format($range->min_range) }}" disabled>
        </div>
        <div class="form-group col-md-4">
            <label for="max_range">Max range (miles)</label>
            <input type="number" class="form-control" id="max_range" placeholder="Max range" value="{{ number_format($range->max_range) }}" disabled>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="min_subtotal">Min subtotal ($)</label>
            <input type="number" class="form-control" id="min_subtotal" placeholder="Min subtotal" value="{{ number_format($range->min_subtotal, 0, '.', '') }}">
        </div>
        <div class="form-group col-md-6">
            <label for="free_subtotal">Free subtotal ($)</label>
            <input type="number" class="form-control" id="free_subtotal" placeholder="Free subtotal" value="{{ number_format($range->free_subtotal, 0, '.', '') }}">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-2">
            <label for="use_percentage">Use percentage?</label> 
            @if($range->use_percentage)
            <div class="checkbox checbox-switch switch-success">
                <label> No
                    <input type="checkbox" class="form-control" name="use_percentage" checked="" />
                    <span></span>
                    Yes
                </label>
            </div>
            @else
            <div class="checkbox checbox-switch switch-success">
                <label> No
                    <input type="checkbox" class="form-control" name="use_percentage" />
                    <span></span>
                    Yes
                </label>
            </div>
            @endif
        </div>
        <div class="form-group col-md-2">
            <label for="percentage_fee">Percentage (%)</label>
            <input type="number" class="form-control" id="percentage_fee" placeholder="Percentage fee" value="{{ number_format($range->percentage_fee, 0, '.', '') }}">
        </div>
        <div class="form-group col-md-2">
            <label for="linear_fee">Linear fee ($)</label>
            <input type="number" class="form-control" id="linear_fee" placeholder="Linear fee" value="{{ number_format($range->linear_fee, 0, '.', '') }}">
        </div>
    </div>
</div><br>
<input id="range_id_hidden" type="hidden" data-range-id="{{ $range->id }}">
<button id="update_range_btn" class="btn btnAux pull-right">Update Range</button>
<style>
    .edit-range-container {
        min-height: 350px;
        background-color: #fff;
        padding: 15px 10px;
    }
</style>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script type="text/javascript">
    // Validate and then edit a new range in a selected branch
    $('#update_range_btn').click(function() {
        if (!$('#max_range').val().trim()) {
            swal({
                title: 'Missing field',
                text: "Enter max range.",
                icon: 'info'
            });
            return false;
        }
        if (parseFloat($('#min_range').val().trim()) >= parseFloat($('#max_range').val().trim())) {
            swal({
                title: 'Check ranges',
                text: 'Min range should be less than max range.',
                icon: 'info'
            });
            return false;
        }

        if ($('#min_subtotal').val() == '') {
            swal({
                title: 'Missing field',
                text: 'Enter min subtotal.',
                icon: 'info'
            });
            return false;
        }
        if ($('#free_subtotal').val() == '') {
            swal({
                title: 'Missing field',
                text: 'Enter free subtotal.',
                icon: 'info'
            });
            return false;
        }
        if (parseFloat($('#min_subtotal').val().trim()) >= parseFloat($('#free_subtotal').val().trim())) {
            swal({
                title: 'Check subtotals',
                text: 'Min subtotal should be less than free subtotal.',
                icon: 'info'
            });
            return false;
        }
        if ($('#percentage_fee').val() == '') {
            swal({
                title: 'Missing field',
                text: 'Enter percentage fee.',
                icon: 'info'
            });
            return false;
        }
        if (parseInt($('#percentage_fee').val()) < 1) {
            swal({
                title: 'Missing field',
                text: 'Percentage fee must be greater than 0.',
                icon: 'info'
            });
            return false;
        }
        if ($('#linear_fee').val() == '') {
            swal({
                title: 'Missing field',
                text: 'Enter linear fee.',
                icon: 'info'
            });
            return false;
        }

        let rangeId = $('#range_id_hidden').attr('data-range-id');
        let data = {
            rangeId: rangeId,
            maxRange: $('#max_range').val().trim(),
            minSubtotal: $('#min_subtotal').val().trim(),
            freeSubtotal: $('#free_subtotal').val().trim(),
            usePercentage: $("input[name='use_percentage']").prop('checked'),
            percentageFee: $('#percentage_fee').val().trim(),
            linearFee: $('#linear_fee').val().trim(),
        }

        $.ajax({
            type: 'post',
            url: '/deliveries/ranges/update',
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            data: data,
            success: function(r) {
                if (r.status) {
                    swal({
                        title: 'Success!',
                        text: r.message,
                        icon: 'success'
                    }).then((val) => {
                        if (val) {
                            $(location).attr('href', '/deliveries/ranges');
                        }
                    })
                } else {
                    swal({
                        title: '',
                        text: r.message,
                        icon: 'warning'
                    })
                }
            }
        })
    })

    // Checking url parameters
    let getUrlParameter = function getUrlParameter(sParam) {
        let sPageURL = window.location.search.substring(1),
            sURLVariables = sPageURL.split('&'),
            sParameterName,
            i;

        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');

            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
            }
        }
        return false;
    };

    // If it is greater ring then enable the max range editing logic
    if (getUrlParameter('greaterMaxRange') == 'yes') {
        $('#max_range').attr('disabled', false);
    }
</script>
@endsection