@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 {
        position: relative;
        top: 11px;
    }

    #btn_looding {
        display: none;
    }
</style>
@endpush

@section('content')
<!-- 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">Outlet Requisition Request</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->

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

                        @csrf

                        <div class="card-body">

                            <div class="row">

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

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

                                            <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-3 d-none">

                                    <div class="form-group row">
                                        <label for="outlet" class="col-sm-4 col-form-label">Outlet: <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8 ">

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

                                                <option value="">Select Outlet</option>

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


                                            </select>

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

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">

                                    <div class="form-group row">
                                        <label for="req_invoice" class="col-sm-4 col-form-label">Inv. No: <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">
                                            <input id="req_invoice" type="text" name="req_invoice"
                                                class="form-control form-control-sm" value="{{ $invoice }}"
                                                style="width: 100%;" readonly required>

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

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


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

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

                                </div>


                            </div>

                            <div 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>Action</th>
                                            </tr>

                                        </thead>

                                        <tbody id="selected_product_list">

                                        </tbody>


                                    </table>

                                </div>

                            </div>

                            <div class="row">


                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label for="reqDate" class="col-sm-4 col-form-label">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="reqDate" id="reqDate"
                                                    value="{{ $date }}" placeholder="Enter Date" required />
                                                <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('reqDate')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                </div>


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

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

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

                                        </div>
                                    </div>

                                </div>


                            </div>


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

                                <button type="submit" class="btn btn-primary">Request</button>

                            </div>

                    </form>

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

            </div>
            <!--/.col (right) -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@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 viewRow(product_id, quantity, reciid, prodqty) {
        const route = '{{ route("usagerec.usagedetils") }}';

        $.post(route, {
                "product_id": product_id,
                "quantity": quantity,
                "reciid": reciid,
                "prodqty": prodqty
            })
            .done(function(data) {
                $("#view_info").html(data);
            })
            .fail(function() {
                alert("Error loading usage details.");
            });
    }

    function addSelect(selthis, qty) {
        if (+qty <= 0) {
            $(selthis).trigger("blur");
            return;
        }

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

        const sel = '.p_' + pid;
        const plen = $(sel).length;

        if (plen > 0) {
            const sl = $(sel).closest("tr").find(".sl").val();

            const 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 style="width: 80px;" name="qty[]" type="number" step="any" min="0" class="form-control form-control-sm selqty" value="${qty}">
                </td>
                <td>${unit}</td>
                <td>
                    <button type="button" data-pid="${pid}" class="del_sel btn btn-danger btn-xs">x</button>
                </td>`;

            $(sel).closest("tr").html(appendtr);
        } else {
            const sl = $(".sl").length ? $(".sl").length + 1 : 1;

            const appendtr = `
                <tr>
                    <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 style="width: 80px;" name="qty[]" type="number" step="any" class="form-control form-control-sm selqty" value="${qty}">
                    </td>
                    <td>${unit}</td>
                    <td>
                        <button type="button" data-pid="${pid}" class="del_sel btn btn-danger btn-xs">x</button>
                    </td>
                </tr>`;

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

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

    $(function() {
        // Date pickers
        $('#reservationdate, #reservationdate2').datetimepicker({
            format: 'DD-MM-YYYY'
        });

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

        $(document).on('select2:open', () => {
            document.querySelector('.select2-search__field').focus();
        });

        // Quantity click/change validation
        $("#selected_product_list").on("change", ".selqty", function(e) {
            let number = parseFloat($(this).val()) || 0;
            if (number <= 0) {
                $(this).val(1);
            } else {
                $(this).val(parseFloat(number).toFixed(3));
            }
            $(this).select().focus();
        });

        $("#selected_product_list").on("change", ".selqty", function() {
            let number = parseFloat($(this).val()) || 0;
            if (number <= 0) {
                $(this).val(1);
            } else {
                $(this).val(number.toFixed(3));
            }
            $(this).select().focus();
        });

        // Product list selection
        $("#product_list").on("click", ".prod_qty", function() {
            $(this).select().focus();
        });

        $("#product_list").on("click", ".seled_row", function() {
            const qty = $(this).closest("tr").find(".prod_qty").val();
            addSelect(this, qty);
        });

        $("#selected_product_list").on("click", ".del_sel", function() {
            if (confirm('Want to delete?')) {
                $(this).closest("tr").remove();
            }
        });

        // Enter key adds product
        $("#product_list").on("keydown", ".prod_qty", function(event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                const qty = $(this).val();
                addSelect(this, qty);
            }
        });

        // Submit validation
        $("#submit_data").click(function(e) {
            e.preventDefault();
            const count = $(".sl").length;
            if (count > 0) $("#userform").submit();
            return false;
        });

        // Prevent date typing
        $("body").on("keydown", "#usage_date", function(event) {
            event.preventDefault();
        });

        // Search products by category & outlet
        $("#search_product").click(function() {
            const cat_id = $("#cat_id").val();
            const outlet_id = $("#outlet").val();

            if (!cat_id) return alert('Select Category!');
            if (!outlet_id) return alert('Select Outlet!');

            const route = '{{ route("usagerec.getReqProd") }}';
            $.get(route, {
                    cat_id,
                    outlet_id
                })
                .done(data => $("#product_list").html(data))
                .fail(() => alert("Error fetching products."));
        });

        // View product details
        $("#product_list").on("click", ".view_item", function() {
            const product_id = $(this).data("pid");
            const quantity = $(this).closest("tr").find(".prod_qty").val();
            const reciid = $(this).data("reciid");
            const prodqty = $(this).data("prodqty");

            if (+quantity > 0) {
                viewRow(product_id, quantity, reciid, prodqty);
            } else {
                alert("Please Enter Qty!");
            }
        });

        // Quantity * Rate calculation
        $("#quantity").keyup(function() {
            const product_id = $("#product_id").val();
            if (!product_id) {
                $("#quantity, #rate").val(0);
                alert("Select Product!");
                return false;
            }

            let quantity = parseFloat($("#quantity").val()) || 0;
            let price = parseFloat($("#rate").val()) || 0;

            if (quantity <= 0) {
                alert("Please enter a positive number!");
                $("#quantity").val('');
                return;
            }

            const total = (quantity * price).toFixed(3);
            $("#total").val(total);
        });

        // Outlet change loads product list
        $("#outlet").change(function() {
            const outlet_id = $(this).val();
            if (!outlet_id) return;

            let url = "{{ route('response.finalproduct', ':id') }}";
            url = url.replace(':id', outlet_id);

            $.get(url)
                .done(data => $("#product_id").html(data.rows))
                .fail(() => console.log("Product fetch failed."));
        });

        // Product change updates details
        $("#product_id").change(function() {
            const selected = $(this).find(':selected');
            if (!selected.val()) {
                $("#rate").val('');
                $("#unitname").html('');
                return;
            }

            $("#cur_stock").html(selected.data('stock'));
            $("#rate").val(selected.data('lastprice'));
            $("#unitname").html(selected.data('unit'));
            $("#quantity").focus();
        });
    });
</script>

@endpush