@extends('layouts.app')

@section('stitle', 'Edit Purchase Order')
@section('title', 'Edit Purchase Order')

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">@yield('title') - {{$purchase->reference}}</h2>
                            <div class="breadcrumb-wrapper">
                                <span class="badge badge-glow badge-warning ml-2" style="margin-top: 5px;">{{$purchase->status}}</span>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                    {{-- @include('purchase_order.purchase_order_inner_menu') --}}
                    <button class="btn btn-secondary waves-effect waves-float waves-light" type="button" onclick="location.href='{{ route('purchase_order.list') }}'"><i data-feather='chevron-left' class="mr-1"></i>Back</button>
                </div>
            </div>

            <div class="content-body">
                <div class="row" id="table-hover-animation">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        <label>Supplier</label>
                                        <h5 class="mt-1">{{$purchase->sname}}</h5>
                                        <hr>
                                    </div>
                                    <div class="col-6">
                                        <label>Branch</label>
                                        <h5 class="mt-1">{{$purchase->bname}}</h5>
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <label>Invoice Number</label>
                                        <h5 class="mt-1">- - - </h5>
                                        <hr>
                                    </div>
                                    <div class="col-6">
                                        <label>Invoice Date</label>
                                        <h5 class="mt-1"> - - - </h5>
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <label>Creator</label>
                                        <h5 class="mt-1">{{ $purchase->uname }}</h5>
                                        <hr>
                                    </div>
                                    <div class="col-6">
                                        <label>Created At</label>
                                        <h5 class="mt-1">{{$purchase->created_at}}</h5>
                                        <hr>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Items -->
                <div class="content-header row">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1">Items</h5>
                            </div>
                        </div>
                    </div>
                    <div id="addIngDiv" class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            <button class="getIng btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#addIngredient">Add Item
                            </button>
                        </div>
                    </div>
                </div>

                <form class="a-form">
                    <div class="card">

                        <table id="POrderData" class="invoice-list-table table prowdata_ing" >
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>SKU</th>
                                <th>BARCODE</th>
                                <th>Cost</th>
                                {{--                                        <th>Storage Unit</th>--}}
                                <th>Quantity</th>
                                <th>Total Cost</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($purchaseOrderItems as $pitem)
                                <tr class="{{ $pitem->id }}">
                                    <td>{{ $pitem->name }}</td>
                                    <td>{{ $pitem->sku }}</td>
                                    <td>{{ $pitem->barcode }}</td>
                                    <td>
                                        <div class="input-group input-group-sm" style="max-width: 160px;">
                                            <input type="number" class="form-control cost row_{{$pitem->id}}" name="prItemList[{{ $pitem->id }}][cost]" value="{{ $pitem->cost }}"/>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group input-group-sm" style="max-width: 160px;">
                                            <input type="number" class="form-control qty row_{{$pitem->id}}" name="prItemList[{{ $pitem->id }}][qty]" value="{{ $pitem->qty }}"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text">{{ $pitem->storage_unit }}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group input-group-sm" style="max-width: 160px;">
                                            <input type="text" readonly class="form-control totalCost" name="prItemList[{{ $pitem->id }}][totalItemCost]" value="{{ $pitem->item_total_cost }}"/>
                                        </div>
                                    </td>
                                    <td class="text-right">
                                        <button id="{{$pitem->id}}" class="btn btn-sm btn-danger removeItemPro">
                                            Remove
                                        </button>
                                        <input type="hidden" class="prItemId" name="prItemList[{{ $pitem->id }}][poItemID]" value="{{ $pitem->id }}"/>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="row ingUpdate">
                        <div class="col-10"></div>
                        <div class="col-2 text-right">
                            <input type="hidden" name="purchase_order_id" value="{{ $purchase->id }}">
                            <input type="hidden" class="purchase_order_total" name="purchase_order_total" value="{{ $purchase->total }}">
                            <button class="btn btn-success mb-2 allIngUpdate" >Update</button>
                        </div>
                    </div>
                </form>
                <!-- Table Hover Animation start -->
                <div class="row" id="table-hover-animation">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        <label>Total Tax</label>
                                        <h5 class="mt-1">{{ $purchase->tax_total }}</h5>
                                    </div>
                                    <div class="col-6">
                                        <label>Total</label>
                                        <h5 class="mt-1 tqtycost">{{$purchase->total}}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="scrolling-inside-modal">

        <!-- Modal -->
        <div class="modal fade" id="edit_item" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable">
                <form class="dt_adv_search" action="" method="post">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel17">Edit @yield('stitle')</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-row mb-1">
                                        <div class="col-md-12 mb-1">
                                            <label>Tax Group Id	:</label>
                                            <input type="text" name="tax_group_id" value="" class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                            <input type="hidden" value="" class="item_id" name="id" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label>Name:</label>
                                            <input type="text" name="name" value="" class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label>Reference:</label>
                                            <input type="text" name="reference" value="" class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label>opening:</label>
                                            <input type="text" name="opening" value="" class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label>Closing:</label>
                                            <input type="text" name="closing" value="" class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label>Phone:</label>
                                            <input type="text" name="phone" value="" class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label>Receipt Header:</label>
                                            <input type="text" name="receipt_header" value="" class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label>Receipt Footer:</label>
                                            <input type="text" name="receipt_footer" value="" class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label>Status:</label>
                                            <input type="number" name="active" value=""  class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label>Created by:</label>
                                            <input type="text" name="created_by" value=""  class="form-control dt-input dt-full-name" data-column="1" data-column-index="0" />
                                        </div>
                                    </div>
                                </div>
                            </div>



                        </div>
                        <div class="modal-footer">
                            <button type="submit"  class="btn btn-primary waves-effect waves-float waves-light" data-bs-dismiss="modal">Save</button>
                        </div>
                </form>
            </div>
        </div>
    </div>

        <div class="modal-size-sm d-inline-block">
            <!-- Modal -->
            <div class="modal fade text-left" id="addIngredient" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel17" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel17">Add Ingredients</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label>Select Ingredients:</label>
                                        <select id="addIngre"
                                                class="select2 add_ingredient form-control form-control-lg"
                                                name="add_ingredient[]" multiple required>
                                            @foreach($items as $item)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" class="purchase_id" name="purchase_id" value="{{ $purchase->id }}">
                                        <input type="hidden" class="reference" name="reference" value="{{ $purchase->reference }}">
                                        <input type="hidden" class="branch_id" name="branch_id" value="{{ $purchase->branch_id }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="addIng btn btn-primary">Submit</button>
                        </div>
                        {{--                            </form>--}}
                    </div>
                </div>
            </div>
        </div>

    @endsection
@push('my_scripts')
<script>
            function removeItem() {
                var iqtytotal = 0;
                $('.totalCost').each(function(){
                    iqtytotal += parseFloat(this.value);
                });
                $('.tqtycost').html(iqtytotal.toFixed(2));
                $('.purchase_order_total').val(iqtytotal.toFixed(2));
            }

            $("#addIngDiv").on("click", ".getIng", function (e) {
                e.preventDefault();
                var pId = $(".purchase_id").val();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: "{{ route('purchase_order.get_ingredient') }}",
                    data: {pId: pId},
                    success: function (data) {
                        $("#addIngre").empty();
                        $.each(data, function (key, value) {
                            $("#addIngre").append('<option value="' + key + '">' + value + '</option>');
                        });
                    }
                });
            });

            $("#addIngredient").on("click", ".addIng", function (e) {
                e.preventDefault();
                var itemIds = $(".add_ingredient").val();
                var pId = $(".purchase_id").val();
                var reference = $(".reference").val();
                var branch_id = $(".branch_id").val();
                if (itemIds != '') {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').val()
                        }
                    });
                    $.ajax({
                        type: 'POST',
                        url: "{{ route('purchase_order.add_ingredient') }}",
                        data: {itemIds: itemIds, pId: pId, reference: reference, branch_id: branch_id},
                        success: function (data) {
                            $('.prowdata_ing tbody').append(data.table_data);
                            $('.tqtycost').html(data.totalcost);
                            $('#addIngredient').modal('hide');
                        }
                    });
                }else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Select Items',
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        showClass: {
                            popup: 'animate__animated animate__shakeX'
                        },
                        buttonsStyling: false
                    });
                }
            });

            $(".ingUpdate").on("click", ".allIngUpdate", function (e) {
                e.preventDefault();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: "{{ route('purchase_order.update_ingredient') }}",
                    data: $('form.a-form').serializeArray(),
                    success: function (data) {
                        Swal.fire({
                            position: 'bottom-end',
                            icon: 'success',
                            title: 'Ingredient has been saved',
                            showConfirmButton: false,
                            timer: 1500,
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                });
            });

            $(".prowdata_ing").on("click", ".removeItemPro", function (e) {
                e.preventDefault();
                var id = this.id;
                var pId = $(".purchase_id").val();
                var selectedTr = $(this).closest('tr');

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, remove it!",
                    customClass: {
                        confirmButton: 'btn btn-primary',
                        cancelButton: 'btn btn-outline-danger ml-1'
                    },
                    buttonsStyling: false
                }).then(function(result) {
                    if (result.value) {
                        selectedTr.remove();
                        removeItem();
                        var purchase_order_total = $('.purchase_order_total').val();
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('input[name="_token"]').val()
                            }
                        });
                        $.ajax({
                            type:'POST',
                            url:"{{ route('purchase_order.remove_ingredient') }}",
                            data:{id:id, pId:pId, purchase_order_total:purchase_order_total},
                            success:function(data)
                            {

                            }
                        });
                        Swal.fire({
                            icon: 'success',
                            title: 'Removed!',
                            text: 'Your record has been removed.',
                            customClass: {
                                confirmButton: 'btn btn-success'
                            }
                        });
                    }
                });
            });

            $(".prowdata_ing").on('focusout', '.cost', function () {
                var cls = this.className;
                var gcls = cls.substring(22);
                console.log(gcls);
                var unitQty = parseFloat($('tr.'+gcls+' input.qty').val());
                var unitCost = parseInt($(this).val());
                total = unitCost*unitQty;
                $('tr.'+gcls+' input.totalCost').val(total.toFixed(2));
                console.log("Qty:"+unitQty + ", Cost:" + unitCost);

                removeItem();

            });
            $(".prowdata_ing").on('focusout', '.qty', function () {
                var cls = this.className;
                var gcls = cls.substring(21);
                var unitCost = parseFloat($('tr.'+gcls+' input.cost').val());
                var unitQty = parseInt($(this).val());
                total = unitCost*unitQty;
                $('tr.'+gcls+' input.totalCost').val(total.toFixed(2));
                console.log("Qty:"+unitQty + ", Cost:" + unitCost);
                removeItem();
            });
    </script>
    @endpush