@extends('modules.head') @section('contenido')
<div class="add-range-container">
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="branch">Branch</label>
            <select id="branch" class="form-control">
                <option selected value="">Choose...</option>
                @foreach($branches as $branch)
                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                @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="0" 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">
        </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">
        </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">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-2">
            <label for="use_percentage">Use percentage?</label>
            <div class="checkbox checbox-switch switch-success">
                <label> No
                    <input type="checkbox" class="form-control" name="use_percentage" />
                    <span></span>
                    Yes
                </label>
            </div>
        </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">
        </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">
        </div>
    </div>
</div><br>
<button id="create_range_btn" class="btn btnAux pull-right">Add Range</button>
<style>
    .add-range-container {
        min-height: 380px;
        background-color: #fff;
        padding: 15px 10px;
    }
</style>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script type="text/javascript">
    // Validate that min range in a branch is always equals to previous range max plus one
    $('#branch').change(function() {
        if ($(this).val().trim() != '') {
            let data = {
                branchId: $(this).val(),
            }
            $.ajax({
                type: 'post',
                url: '/deliveries/get-previous-max-range',
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                data: data,
                success: function(previousMaxRange) {
                    $('#min_range').val(previousMaxRange);
                }
            })
        }
    })

    // Validate and then create a new range in a selected branch
    $('#create_range_btn').click(function() {
        if ($('#branch').val() == '') {
            swal({
                title: 'Missing field',
                text: 'No branch selected.',
                icon: 'info'
            });
            return false;
        }
        if (!$('#min_range').val().trim()) {
            swal({
                title: 'Missing field',
                text: "Enter min range.",
                icon: 'info'
            });
            return false;
        }
        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 data = {
            branchId: $('#branch').val(),
            minRange: $('#min_range').val().trim(),
            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-create',
            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'
                    })
                }
            }
        })
    })
</script>
@endsection