@extends('layouts.app')
@section('content')
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/forms/selects/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/ui/jquery-ui.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/tables/datatable/dataTables.bootstrap4.min.css')}}">
<style>
    .error-msg {
        background-color: #dd4b39 !important;
        display: none;
    }

    .error-msg span {
        color: #fff;
    }
</style>
@endsection


<div class="card">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
        <div class="heading-elements">
            <a href="{{ route('waste') }}">
                <button class="btn btn-info">Waste</button>
            </a>
        </div>
    </div>
    <div class="card-body collapse in">
        <div class="card-block card-dashboard">

            <form action="{{route('saveWaste')}}" id="waste_form" method="post" accept-charset="utf-8">
                {{ csrf_field() }}
                <div class="box-body">

                    <div class="row">

                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Date</label>
                                <input tabindex="3" type="text" id="date" name="date" class="form-control datepicker" placeholder="Date" value="">
                            </div>
                            <div class="alert alert-error error-msg date_err_msg_contnr" style="padding: 5px !important;">
                                <span id="date_err_msg"></span>
                            </div>
                        </div>

                    </div>


                    <div class="row">
                        <div class="col-md-4">

                            <div class="form-group">
                                <label>Ingredients</span></label> (Only purchased Ingredients are listed)(Last 60 Days)
                                
                                @if(isset($ingredients) && !empty($ingredients))
                                <select name="ingredient_id" id="ingredient_id" class="form-control select2"
                                    style="width:100%;">
                                    <option value="">Select Ingredient</option>
                                    @foreach($ingredients as $row)
                                    <option value="{{$row->id}}|{{$row->name}}|{{$row->ingredient_unit}}|{{$row->unit_price}}">{{$row->name}} - ({{$row->code}})</option>
                                    @endforeach
                                </select>
                                @else
                                <p class="text-danger">Please add Ingredients first.</p>
                                @endif
                            </div>

                            <div class="alert alert-error error-msg ingredient_id_err_msg_contnr" style="padding: 5px !important;">
                                <span id="ingredient_id_err_msg"></span>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="hidden-xs hidden-sm">&nbsp;</div>
                            <a class="btn btn-warning" data-toggle="modal" data-target="#noticeModal">Read Me First</a>
                        </div>
                        <div class="clearfix"></div>
                        <div class="hidden-lg hidden-sm">&nbsp;</div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive" id="waste_cart">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th width="10%">SN</th>
                                            <th width="25%">Ingredient(Code)</th>
                                            <th width="25%">Quantity/Amount</th>
                                            <th width="25%">Loss Amount</th>
                                            <th width="15%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Total Loss</label>
                                <table style="width: 100%">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input style="width: 100%" class="form-control aligning_total_loss" readonly="" type="text" name="total_loss" id="total_loss"></td>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="alert alert-error error-msg total_loss_err_msg_contnr" style="padding: 5px !important;">
                                <span id="total_loss_err_msg"></span>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Note</label>
                                <textarea tabindex="3" class="form-control" rows="2" id="note" name="note" placeholder="Enter ..."></textarea>
                            </div>
                            <div class="alert alert-error error-msg note_err_msg_contnr" style="padding: 5px !important;">
                                <span id="note_err_msg"></span>
                            </div>
                        </div>

                    </div>

                    <input type="hidden" name="suffix_hidden_field" id="suffix_hidden_field" value="1">
                    <div class="box-footer">
                        <a href="{{route('recipe')}}" type="button" class="btn btn-danger">Close</a>
                        <button class="btn btn-success" name="submit" type="submit">Save changes</button>
                    </div>

                </div>
            </form>


        </div>
    </div>
</div>


<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="noticeModal">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i
                            class="fa fa-2x">×</i></span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 hidden-lg hidden-sm">
                        <p class="foodMenuCartNotice">
                            <strong>NOTICE</strong> : You must enter the Quantity and Unit price field, otherwise
                            Inventory will not match.
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@section('js')
<script src="{{asset('assets/admin/vendors/js/forms/select/select2.full.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/forms/select/form-select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/core/libraries/jquery_ui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/ui/jquery-ui/date-pickers.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    var ingredient_id_container = [];

    $(function () {

        $('.select2').select2();
        $(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd'
        }).val();

        var suffix = 0;
        $('#ingredient_id').change(function () {
            var ingredient_details = $('#ingredient_id').val();

            if (ingredient_details != '') {

                var ingredient_details_array = ingredient_details.split('|');
                var index = ingredient_id_container.indexOf(ingredient_details_array[0]);

                if (index > -1) {
                    alert('Ingredient already remains in cart, you can change Quantity/Amount')
                    $('#ingredient_id').val('').change();
                    return false;
                }

                var currency = "";

                suffix++;

                var cart_row = '<tr class="rowCount" data-id="' + suffix + '" id="row_' + suffix +
                    '">' +
                    '<td style="padding-left: 10px;"><p id="sl_' + suffix + '">' + suffix +
                    '</p></td>' +
                    '<input type="hidden" id="ingredient_id_' + suffix +
                    '" name="ingredient_id[]" value="' + ingredient_details_array[0] + '"/>' +
                    '<td><span style="padding-bottom: 5px;">' + ingredient_details_array[1] +
                    '</span></td>' +
                    '<td style="width: 15%"><input type="text" data-countID="' + suffix +
                    '" id="waste_amount_' + suffix +
                    '" name="waste_amount[]" onfocus="this.select();" class="form-control integerchk aligning" placeholder="Waste Amt" onkeyup="return calculateAll();"/><span class="label_aligning"> ' +
                    ingredient_details_array[2] + '</span></td>' +
                    '<input type="hidden" id="last_purchase_price_' + suffix +
                    '" name="last_purchase_price[]" value="' + ingredient_details_array[3] + '"/>' +
                    '<td><input type="text" id="loss_amount_' + suffix +
                    '" name="loss_amount[]" onfocus="this.select();" disabled class="form-control aligning" placeholder="Loss Amt" /><span class="label_aligning">' +
                    currency + '</span></td>' +
                    '<td><a class="btn btn-danger btn-sm" style="color:#fff" onclick="return deleter(' +
                    suffix + ',' + ingredient_details_array[0] +
                    ');" ><i class="icon-trash-o"></i> </a></td>' +
                    '</tr>';

                $('#suffix_hidden_field').val(suffix);

                $('#waste_cart tbody').append(cart_row);

                ingredient_id_container.push(ingredient_details_array[0]);

                $('#ingredient_id').val('').change();
                calculateAll();

            }
        });


        // Validate form
        $("#waste_form").submit(function () {
            var date = $("#date").val();
            var note = $("#note").val();
            var ingredientCount = $("#waste_cart tbody tr").length;
            var error = false;

            if (date == "") {
                $("#date_err_msg").text("The Date field is required.");
                $(".date_err_msg_contnr").show(200);
                error = true;
            }

            if (ingredientCount < 1) {
                $("#ingredient_id_err_msg").text("At least 1 Ingredient should be selected.");
                $(".ingredient_id_err_msg_contnr").show(200)
                error = true;
            }

            if (note == "") {
                $("#note_err_msg").text("The Note field is required.");
                $(".note_err_msg_contnr").show(200);
                error = true;
            }

            if (note.length > 200) {
                $("#note_err_msg").text("The Note field cannot exceed 200 characters in length.");
                $(".note_err_msg_contnr").show(200);
                error = true;
            }

            $(".integerchk").each(function () {
                var n = $(this).attr("data-countID");
                var waste_amount = $.trim($("#waste_amount_" + n).val());
                if (waste_amount == '' || isNaN(waste_amount)) {
                    $("#waste_amount_" + n).css({
                        "border-color": "red"
                    }).show(200).delay(2000, function () {
                        $("#waste_amount_" + n).css({
                            "border-color": "#d2d6de"
                        });
                    });
                    error = true;
                }
            });
            if (error == true) {
                return false;
            }
        });

    })

    function calculateAll() {
        var total_loss = 0;
        var i = 1;
        $(".rowCount").each(function () {
            var id = $(this).attr("data-id");
            var waste_amount = $("#waste_amount_" + id).val();
            var temp = "#sl_" + id;
            $(temp).html(i);
            i++;
            if (typeof (waste_amount) !== "undefined" && waste_amount !== null) {

                var last_purchase_price = $("#last_purchase_price_" + id).val();

                if ($.trim(waste_amount) == "" || $.isNumeric(waste_amount) == false) {
                    waste_amount = 0;
                }
                if ($.trim(last_purchase_price) == "" || $.isNumeric(last_purchase_price) == false) {
                    last_purchase_price = 0;
                }

                var loss_amount = parseFloat($.trim(waste_amount)) * parseFloat($.trim(last_purchase_price));

                $("#loss_amount_" + id).val(loss_amount.toFixed(2));
                total_loss += parseFloat($.trim($("#loss_amount_" + id).val()));

            }
        });

        $("#total_loss").val(total_loss);

    }

    function deleter(suffix, ingredient_id) {

        $("#row_" + suffix).remove();
        var ingredient_id_container_new = [];

        for (var i = 0; i < ingredient_id_container.length; i++) {
            if (ingredient_id_container[i] != ingredient_id) {
                ingredient_id_container_new.push(ingredient_id_container[i]);
            }
        }

        ingredient_id_container = ingredient_id_container_new;

        updateRowNo();
        calculateAll();

    }

    function updateRowNo() {
        var numRows = $("#waste_cart tbody tr").length;
        for (var r = 0; r < numRows; r++) {
            $("#waste_cart tbody tr").eq(r).find("td:first p").text(r + 1);
        }
    }
</script>
@endsection
@endsection