@extends('modules.head') @section('contenido')

<div class="form-inline formFilter" style="padding-top: 20px;">
    @if (\Session::has('error'))
        <div class="alert alert-danger" style="display:none">
            <ul>
                <li id="error_content">{!! \Session::get('error') !!}</li>
            </ul>
        </div>
    @endif
    <div class="form-group">
        <label>Reason:</label>
        <input type="text" class="form-control" id="iptShippingReason">
    </div>
    @if (Auth::user()->isSuperAdmin() || Auth::user()->isAccountReceivable())
        <button class="btn btn-default" onclick="addShippingCostReason()">Add</button>
    @endif
</div>

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Reasons</h3>
    </div>
    <div class="box-body table-responsive hideScrollOffset">
        <table id="" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Name</th>
                    <th tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Active</th>
                </tr>
            </thead>
            <tbody>
                @foreach($reasons as $reason)
                <tr>
                    <td>{{ $reason->name }}</td>
                    <td>
                        <label class="switch">
                            @php $checked = $reason->active ? 'checked' : '' @endphp
                            <input class="switch-input chkShippingReasonActive" type="checkbox" {{$checked}} value={{$reason->id}} />
                            <span class="switch-label" data-on="Yes" data-off="No"></span>
                            <span class="switch-handle"></span>
                        </label>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">

    function addShippingCostReason() {
        let shipping_reason = $("#iptShippingReason").val();
        if (!shipping_reason || shipping_reason.length < 4) {
            swal('Warning', 'Please type a valid reason', 'warning');
        }
        else {
            swal({
                text: "Are you sure you want to perform this action?",
                icon: "info",
                buttons: ["Cancel", "Ok"],
            }).then((value) => {
                if(value) {
                    let info = {
                        'shipping_reason' : shipping_reason
                    }
                    $.ajax({
                        url: '/pos/createShippingCostReason',
                        type: 'POST',
                        contentType: "application/json",
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                            "Content-Type": "application/json",
                        },
                        data: JSON.stringify(info),
                        success: function (r) {
                            if(r.status) {
                                swal({
                                    title: "Success",
                                    text: r.m,
                                    icon: "success",
                                }).then(() => {
                                    location.reload();
                                })
                            }
                            else {
                                swal('Error', r.m, 'error');
                            }
                        },
                        error: function (r) {
                            console.log(r);
                        },
                    });
                }
            });
        }
    }

    $(".chkShippingReasonActive").on("change", function() {
        let reason_id = $(this).val();
        let status = $(this).is(':checked');
        let info = {
            'reason_id' : reason_id,
            'status' : status
        };
        swal({
                text: "Are you sure you want to perform this action?",
                icon: "info",
                buttons: ["Cancel", "Ok"],
            }).then((value) => {
                if(value) {
                    $.ajax({
                        url: '/pos/saveShippingCostReason',
                        type: 'POST',
                        contentType: "application/json",
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                            "Content-Type": "application/json",
                        },
                        data: JSON.stringify(info),
                        success: function (r) {
                            if(r.status) {
                                swal({
                                    title: "Success",
                                    text: r.m,
                                    icon: "success",
                                }).then(() => {
                                    location.reload();
                                })
                            }
                            else {
                                swal('Error', r.m, 'error');
                            }
                        },
                        error: function (r) {
                            console.log(r);
                        },
                    });
                }
            });
    });
</script>
<style type="text/css">
    .switch {position: relative;display: block;vertical-align: top;width: 100px;height: 30px;padding: 3px;margin: 0 10px 10px 0;background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);border-radius: 18px;box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);cursor: pointer;}
    .switch-input {position: absolute;top: 0;left: 0;opacity: 0;}
    .switch-label {position: relative;display: block;height: inherit;font-size: 10px;text-transform: uppercase;background: #eceeef;border-radius: inherit;box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);}
    .switch-label:before, .switch-label:after {position: absolute;top: 50%;margin-top: -.5em;line-height: 1;-webkit-transition: inherit;-moz-transition: inherit;-o-transition: inherit;transition: inherit;}
    .switch-label:before {content: attr(data-off);right: 11px;color: #aaaaaa;text-shadow: 0 1px rgba(255, 255, 255, 0.5);}
    .switch-label:after {content: attr(data-on);left: 11px;color: #FFFFFF;text-shadow: 0 1px rgba(0, 0, 0, 0.2);opacity: 0;}
    .switch-input:checked ~ .switch-label {background: #d8c007c8;border-color: rgb(198, 188, 5);box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);}
    .switch-input:checked ~ .switch-label:before {opacity: 0;}
    .switch-input:checked ~ .switch-label:after {opacity: 1;}
    .switch-handle {position: absolute;top: 4px;left: 4px;width: 28px;height: 28px;background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);border-radius: 100%;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);}
    .switch-handle:before {content: "";position: absolute;top: 50%;left: 50%;margin: -6px 0 0 -6px;width: 12px;height: 12px;background: linear-gradient(to bottom, #eeeeee, #FFFFFF);background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);border-radius: 6px;box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);}
    .switch-input:checked ~ .switch-handle {left: 74px;box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);}
</style>
@endsection