@extends('layouts.admin')

@push('styles')
    <link rel="stylesheet" href="{{ asset('plugins/fontawesome-free/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

    <link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">

    <style>
        div.form-group {
            margin-bottom: 3px;
        }

        #unitname,
        #unitname2 {
            position: relative;
            top: 11px;
        }

        #btn_looding {
            display: none;
        }

        .view_item {
            display: none;
        }
    </style>
@endpush

@section('content')
    <!-- Helper::productPrice('product ',); -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid mt-4">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- jquery validation -->
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">Production Entry</h3>

                            <a href="{{ route('usage.index') }}" style="float: right;padding: 3px 26px;"
                                class="btn btn-outline-dark btn-flat">Production List</a>

                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->


                        <form id="userform" class="form-horizontal" method="POST" action="{{ route('usage.store') }}">

                            @csrf

                            @method('POST')

                            <div class="card-body">

                                <div class="row">

                                    <div class="col-sm-3">
                                        <div class="form-group row">
                                            <label for="outlet_id" class="col-sm-12 col-form-label">Outlet<span
                                                    class="text-danger"> * </span>
                                            </label>
                                            <div class="col-sm-12">

                                                <select id="outlet_id" name="outlet_id" class="form-control form-control-sm"
                                                    value="{{ old('outlet_id') }}" style="width: 100%;" required>
                                                    <option value=""> Select Outlet </option>

                                                    @foreach ($outlets as $v)
                                                        <option value="{{ $v->id }}"
                                                            {{ $outlet_id == $v->id ? 'selected' : '' }}>
                                                            {{ $v->outlet_name }} </option>
                                                    @endforeach

                                                </select>
                                                @error('outlet_id')
                                                    <span class="error invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror

                                            </div>

                                        </div>
                                    </div>
                                    
                                    <div class="col-sm-3">
                                        <div class="form-group row">
                                            <label for="department_id" class="col-sm-12 col-form-label">Department<span
                                                    class="text-danger"> * </span>
                                            </label>
                                            <div class="col-sm-12">

                                                <select id="department_id" name="department_id" class="form-control form-control-sm"
                                                    value="{{ old('department_id') }}" style="width: 100%;" required>
                                                    <option value=""> Select Department </option>

                                                    @foreach ($departments as $v)
                                                        <option value="{{ $v->id }}"
                                                            {{ old('department_id') == $v->id ? 'selected' : '' }}>
                                                            {{ $v->department_name }} </option>
                                                    @endforeach

                                                </select>
                                                @error('department_id')
                                                    <span class="error invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror

                                            </div>

                                        </div>
                                    </div>


                                    <div class="col-sm-3">

                                        <div class="form-group row">
                                            <label for="cat_id" class="col-sm-12 col-form-label">Category:</label>
                                            <div class="col-sm-12">

                                                <select id="cat_id" name="cat_id"
                                                    class="form-control form-control-sm select2" style="width: 100%;"
                                                    required readonly>

                                                    <option value="">Select Category</option>
                                                    @foreach ($categories as $v)
                                                        <option value="{{ $v->id }}">{{ $v->cat_name }}</option>
                                                    @endforeach

                                                </select>

                                                @error('cat_id')
                                                    <span class="error invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror

                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-md-2">

                                         <label for="cat_id" style="color: #fff;" class="col-sm-12 col-form-label">.</label>

                                        <button type="button" id="search_product" class="btn btn-sm btn-primary">Search</button>

                                    </div>

                                </div>


                                <div style="margin-top: 15px;" class="row">

                                    <div class="col-md-6">

                                        <table class="table table-sm">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th>Sl</th>
                                                    <th>Product</th>
                                                    <th>P.Code</th>
                                                    <th>Price</th>
                                                    <th>Stock</th>
                                                    <th>Unit</th>
                                                    <th>Prod. Qty</th>
                                                    <th style="width:90px;">Action</th>
                                                </tr>

                                            </thead>

                                            <tbody id="product_list">

                                            </tbody>

                                        </table>

                                    </div>


                                    <div class="col-md-6">

                                        <table class="table table-sm">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th>Sl</th>
                                                    <th>Product</th>
                                                    <th>Price</th>
                                                    <th>Qty</th>
                                                    <th>Unit</th>
                                                    <th>Amount</th>
                                                    <th>Action</th>
                                                </tr>

                                            </thead>

                                            <tbody id="selected_product_list">

                                            </tbody>

                                            <tfoot>
                                                <tr>
                                                    <td colspan="5" style="text-align:right;"> Total: </td>
                                                    <td> <span id="grand_total"> </span> </td>
                                                    <td></td>
                                                </tr>
                                            </tfoot>


                                        </table>

                                    </div>


                                </div>


                                <div class="row">

                                    <div class="col-sm-5">

                                        <div class="form-group row">
                                            <label for="usage_date" class="col-sm-4 col-form-label">Production Date: <span
                                                    class="text-danger"> * </span></label>
                                            <div class="col-sm-8">
                                                <div class="input-group date" id="reservationdate"
                                                    data-target-input="nearest">
                                                    <input type="text"
                                                        class="form-control form-control-sm datetimepicker-input"
                                                        data-target="#reservationdate" name="usage_date" id="usage_date"
                                                        value="{{ $date }}" placeholder="Enter Date" required
                                                        readonly />
                                                    <div class="input-group-append" data-target="#reservationdate"
                                                        data-toggle="datetimepicker">
                                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                    </div>
                                                </div>

                                                @error('usage_date')
                                                    <span class="error invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror

                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-md-7">

                                        <div class="form-group row">
                                            <label for="pur_note" class="col-sm-4 col-form-label text-right">Note:</label>
                                            <div class="col-sm-8">

                                                <textarea class="form-control" id="pur_note" rows="3" name="details" placeholder="Note"
                                                    style="height: 50px;"></textarea>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.card-body -->
                                <div class="card-footer text-right">

                                    <button type="submit" id="submit_data" class="btn btn-primary">Submit</button>

                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.card -->
                </div>
                <!--/.col (left) -->
                <!-- right column -->
                <div class="col-md-6">

                </div>
                <!--/.col (right) -->
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->

    <!-- /.modal -->

    <div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Details</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-head-fixed text-nowrap">
                        <thead>
                            <tr>
                                <th style="width: 10px">Sl</th>
                                <th style="width:200px">Product Name</th>
                                <th style="width:200px">Product Type</th>
                                <th>Unit</th>
                                <th>Current Balance</th>
                                <th>Usage Qty</th>
                                <th>Need Qty</th>
                            </tr>
                        </thead>
                        <tbody id="view_info">

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/inputmask/jquery.inputmask.min.js') }}"></script>

    <script type="text/javascript">


function sumTotalAmounts() {
  const spans = document.getElementsByClassName('total_amount');
  let sum = 0;

  for (let span of spans) {
    const val = parseFloat(span.textContent) || 0;
    sum += val;
  }

  $("#grand_total").html(sum);
}


$(function() {


    $("#userform").on('keydown', '.prod_qty', function(e) { 

            var sel = this;

          var keyCode = e.keyCode || e.which; 

          if (keyCode == 13) { 
            e.preventDefault(); 

            $(sel).parent("td").parent("tr").find(".seled_row").trigger("click");

            $(sel).select();
            $(sel).focus();

             sumTotalAmounts();

                   
        } 
      
    });


});


$(document).ready(function() {
    $('#userform').on('keydown', function(event) {
        // Check if Enter key is pressed
        if (event.key === 'Enter') {
            event.preventDefault(); // Prevent the default form submission
        }
    });
});



function viewRow(product_id, quantity, reciid, prodqty) {

    var route = '{{ route('usagerec.usagedetils') }}';

    $.post(route, {
            "product_id": product_id,
            "quantity": quantity,
            "reciid": reciid,
            "prodqty": prodqty
        })
        .done(function(data) {


            $("#view_info").html(data);
             sumTotalAmounts();



        })
        .fail(function() {



            alert("error");
        });


}

function addSelect(selthis, qty) {

    if (+qty > 0) {


        var pid = $(selthis).data("pid");
        var unitid = $(selthis).data("unitid");
        var unit = $(selthis).data("unit");
        var price = $(selthis).data("price");
        var pname = $(selthis).data("pname");
        var prodqty = $(selthis).data("prodqty");
        var reciid = $(selthis).data("reciid");

        var total_amount = price * qty;

        
            var sel = '.p_' + pid;

            var plen = $(sel).length;

            if (plen > 0) {

                var sl = $(sel).parent("td").parent("tr").find(".sl").val();

                var appendtr = `<td>

            <input type="hidden" name="product_id[]" class="p_` + pid + `" value="` + pid + `">

            <input type="hidden" name="pname[]"  value="` + pname + `">
            <input type="hidden" name="price[]"  value="` + price + `">
            <input type="hidden" name="unitid[]"  value="` + unitid + `">
            <input type="hidden" name="unit[]"  value="` + unit + `">

            <input type="hidden"  class="sl" value="` + sl + `">
            ` + sl + `
            </td>
            <td>` + pname + `</td>
            <td>` + price + `</td>
            <td>
            <input data-prodqty="` + prodqty + `" data-reciid="` + reciid + `"  data-unitid="` + unitid +
                    `" data-unit="` + unit + `" data-price="` + price + `" data-pname="` + pname +
                    `" data-pid="` + pid +
                    `" type="number" style="width:80px" class="prodQty form-control form-control-sm prod_qty" step="any" name="qty[]"  value="` +
                    qty + `">
            </td>
            <td>` + unit + `</td>
            <td> <span class="total_amount">` + total_amount + ` </span></td>
            <td>
            <button type="button" data-pid="` + pid + `" class="del_sel btn btn-danger btn-xs">x</button>

            <button data-prodqty="` + prodqty + `" data-reciid="` + reciid + `"  data-unitid="` + unitid +
                    `" data-unit="` + unit + `" data-price="` + price + `" data-pname="` + pname +
                    `" data-pid="` + pid + `" type="button" data-toggle="modal" data-target="#modal-lg" class="btn btn-primary btn-xs view_item">View</button>

            </td>`;

                $(sel).parent("td").parent("tr").html(appendtr);

            } else {


                if ($(".sl").length == 0) {

                    var sl = 1;

                } else {

                    var sl = $(" .sl ").length + 1;

                }

                var appendtr = `<tr class="` + pid + `">
            <td>
            <input type="hidden" name="product_id[]" class="p_` + pid + `" value="` + pid + `">

            <input type="hidden" name="pname[]"  value="` + pname + `">
            <input type="hidden" name="price[]"  value="` + price + `">
            <input type="hidden" name="unitid[]"  value="` + unitid + `">

            <input type="hidden" name="unit[]"  value="` + unit + `">

            <input type="hidden"  class="sl" value="` + sl + `">

            ` + sl + `
            </td>
            <td>` + pname + `</td>
            <td>` + price + `</td>
            <td>

            <input data-prodqty="` + prodqty + `" data-reciid="` + reciid + `"  data-unitid="` +
                    unitid + `" data-unit="` + unit + `" data-price="` + price + `" data-pname="` +
                    pname + `" data-pid="` + pid +
                    `" type="number" style="width:80px" class="prodQty form-control form-control-sm prod_qty" step="any" name="qty[]"  value="` +
                    qty + `">

            </td>
            <td>` + unit + `</td>
            <td> <span class="total_amount">` + total_amount + ` </span></td>
            <td>
            <button type="button" data-pid="` + pid + `" class="del_sel btn btn-danger btn-xs">x</button>

            <button data-prodqty="` + prodqty + `" data-reciid="` + reciid + `"  data-unitid="` +
                    unitid + `" data-unit="` + unit + `" data-price="` + price + `" data-pname="` +
                    pname + `" data-pid="` + pid + `" type="button" data-toggle="modal" data-target="#modal-lg" class="btn btn-primary btn-xs view_item">View</button>

            </td>
            </tr>`;

                $("#selected_product_list").append(appendtr);

            }


            $(selthis).select().focus();



    } else {

        $(selthis).trigger("blur");

    }

    sumTotalAmounts();


}

async function processQuantities() {
    // Convert jQuery collection to an array for proper async handling
    const elements = $("#selected_product_list").find('.prodQty').toArray();

    // Use a for...of loop to iterate over the elements sequentially

    let isValidData = true;

    for (let currentElement of elements) {
        // Retrieve the necessary data from the current element
        let $element = $(currentElement); // Convert back to jQuery object

        let qty = $element.val();
        let prodqty = $element.data('prodqty');
        let reciid = $element.data('reciid');
        let unitid = $element.data('unitid');
        let unit = $element.data('unit');
        let price = $element.data('price');
        let pname = $element.data('pname');
        let pid = $element.data('pid');

        // Define the route for the post request
        let route = '{{ route('usagerec.check') }}';


        try {
            // Wait for the $.post request to complete

            let data = await $.post(route, {
                "product_id": pid,
                "quantity": qty,
                "reciid": reciid,
                "prodqty": prodqty
            });

            // Handle the response data
            if (!data) {

                let sel = "." + pid;

                $(sel).css("color", "red");

                isValidData = false;

                // return false;

            }




        } catch (error) {
            // Handle any errors that occur during the request
            console.error("Error during $.post:", error);
            return isValidData;
        }
    }

    return isValidData;

}


$(function() {


    $('#reservationdate').datetimepicker({
        format: 'DD-MM-YYYY'
    });

    $('#reservationdate2').datetimepicker({
        format: 'DD-MM-YYYY'
    });


    //Initialize Select2 Elements
    $('.select2').select2();
    $('.myselect2').select2();

    //Initialize Select2 Elements
    $('.select2bs4').select2({
        theme: 'bootstrap4'
    });


    $("#submit_data").click(async function(e) {

        e.preventDefault();

        var s = 0;

        $('.sl').each(function(index, currentElement) {

            s = index + 1;

        });


        if (s > 0) {


            $("#userform").trigger("submit");

        }



    });


    $("#product_list").on("click", ".prod_qty", function(e) {
        $(this).select().focus();
    });


    $("#product_list").on("click", ".seled_row", function() {

        var sel = this;
        var qty = $(this).parent("td").parent("tr").find(".prod_qty").val();
        addSelect(sel, qty);
        $(this).parent("td").parent("tr").css({"background": "#000", "color": "#fff"});

    });

    $("#selected_product_list").on("click", ".del_sel", function() {

        if (confirm('Want to delete?')) {

            $(this).closest("tr").remove();

             sumTotalAmounts();



        }


    });



    $("#product_list").on("keydown", ".prod_qty", function(event) {

        if (event.keyCode == 13) {
            event.preventDefault();

            var sel = this;
            var qty = $(this).val();

           // addSelect(sel, qty);

             sumTotalAmounts();


        }

    });



    $("#selected_product_list").on("keyup", ".prodQty", function(event) {
        event.preventDefault();

        var qty = parseFloat($(this).val()) || 0;
        var price = parseFloat($(this).data("price")) || 0;
        var amount = qty * price;

        $(this).closest("tr").find(".total_amount").html(amount.toFixed(2)); // fixed typo: htmL -> html

        sumTotalAmounts();
    });

    $("body").on("keydown", "#usage_date", function(event) {

        event.preventDefault();

    });


    $("#search_product").click(function() {


        if ($("#outlet_id").val()) {

        } else {

            alert('Please Select Outlet!');

            return false;
        }


        if ($("#department_id").val()) {

        } else {

            alert('Please Select Department!');

            return false;
        }


        var cat_id = $("#cat_id").val();
        var outlet_id = $("#outlet_id").val();

        var route = '{{ route('usagerec.getcatprod') }}';

        $.get(route, {
            "cat_id": cat_id,
            "outlet_id": outlet_id,
        })
        .done(function(data) {


            $("#product_list").html(data);


        })
        .fail(function() {



            alert("error");
        });


        


    });



    $("#userform").on("click", ".view_item", function(e) {


        var unitid = $(this).data('unitid');
        var unit_name = $(this).data('unit');
        var pname = $(this).data('pname');
        var reciid = $(this).data('reciid');
        var prodqty = $(this).data('prodqty');

        var product_id = $(this).data("pid");
        var price = $(this).data("price");

        var quantity = $(this).parent("td").parent("tr").find(".prod_qty").val();

        if (+quantity > 0) {


            var viewrow = viewRow(product_id, quantity, reciid, prodqty);

        } else {
            alert("Please Enter Qty!");
        }



    });




});
    </script>
@endpush