@extends('layouts.mop_master')
@section('css')
    <style>
        .details {
            font-size: 15px;
        }

        .bg-color {
            background-color: #e9edfa;
            margin: auto;
            padding: 1em 0 0.1em 0;
            border-radius: 6px;
            margin-bottom: 10px;
        }
    </style>
@endsection
@section('title')
    Order
@endsection
@section('content')
    <div class="card">
        <div class="card-header">
            <div class="col-lg-12 d-flex align-items-center">
                <h4 class="card-title mb-0 flex-grow-1">ORDER DETAILS</h4>
                <div>
                    <a type="button" class="btn btn-soft-primary waves-effect waves-light" href="/admin/order"><i
                            class="las la-angle-double-left"></i> Go Back</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row ">
                <div class="col-lg-4 text-center">
                    <div class="bg-color">
                        <h5 class="text-primary">ORDER CODE</h5>
                        <p class="details">{{ $order->order_code }}</p>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="bg-color">
                        <h5 class="text-primary">ORDER DATE</h5>
                        <p class="details">{{ \Carbon\Carbon::parse($order->order_date)->format('d M Y') }}
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="bg-color">
                        <h5 class="text-primary">Customer</h5>
                        <p class="details">{{ $order->debitLedger?->name }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="row mt-4">
            <div class="card col-md-5  p-2">
                <div class="card-body">
                    <div class="card-header">
                        <div class="col-lg-6">
                            <h4 class="card-title mb-0 flex-grow-1">Existing Order</h4>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Item</th>
                                    <th>Quantity</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="appendExistingItem">
                                @foreach ($order->items as $item)
                                    <tr id="{{ $item->id }}" class="existingRow_{{ $item->id }}">
                                        <td>{{ $item->stockItem->name }}</td>
                                        <td class="existingQty_{{ $item->id }}">{{ $item->quantity }}</td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-sm btn-primary copy_item_{{ $item->id }}"
                                                onclick="copyItem({{ $item->id }}, '{{ $item->stockItem->name }}', {{ $item->quantity }})"
                                                title="copy item"><i class="fa fa-clone" aria-hidden="true"></i></button>
                                            <button type="button"
                                                class="btn btn-sm btn-secondary move_item_{{ $item->id }}"
                                                onclick="moveItem({{ $item->id }}, '{{ $item->stockItem->name }}', {{ $item->quantity }})"
                                                title="move item"><i class="fa fa-arrow-right"
                                                    aria-hidden="true"></i></button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-1"></div>
            <div class="card col-md-5  p-2">
                <div class="card-body ">
                    <div class="card-header d-flex">
                        <div class="col-md-9">
                            <h4 class="card-title mb-0 flex-grow-1">New Order</h4>
                        </div>
                        <div class="col-md-3">
                            <label for="new_order_status">Status</label>
                            <select name="new_order_status" id="new_order_status" class="form-control">
                                <option value="">Select Status</option>
                                <option value="Hold">Hold</option>
                                <option value="Pending">Pending</option>
                                <option value="Accepted">Accepted</option>
                                @if (Auth::user()->company_profile->mop_fas == 1)
                                    <option value="In Store">In Store</option>
                                    <option value="Production">In Production</option>
                                    <option value="Production Completed">Production Completed</option>
                                @endif
                                <option value="Packing">Packing</option>
                                <option value="Packing Started">Packing Started</option>
                                <option value="Packed">Packed</option>
                                @if (Auth::user()->company_profile->mop_fas == 1)
                                    <option value="Loading">In Loading</option>
                                    <option value="Loading Started">Loading Started</option>
                                    <option value="Loading Completed">Loading Completed</option>
                                @endif
                                <option value="In Delivery">In Delivery</option>
                                <option value="Delivered">Delivered</option>
                            </select>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Item</th>
                                    <th>Quantity</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="appendNewItem">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-10 d-flex justify-content-end mt-3">
            <button type="button" class="btn btn-primary" id="split-order-submit">Submit</button>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New Item Quantity</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="">
                    <div class="modal-body">
                        <input type="hidden" name="item_id" id="item_id">
                        <input type="hidden" name="item_name" id="item_name">
                        <input type="hidden" name="item_qty" id="item_qty">
                        <div id="error" style="display: none;">
                            <p class="text-danger">Please enter quantity less than existing quantity</p>
                        </div>
                        <div id="zero_qty_error" style="display: none;">
                            <p class="text-danger">Please enter quantity more than zero</p>
                        </div>
                        <input type="number" class="form-control" name="new_qty" id="new_qty"
                            placeholder="Enter quantity">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        function moveItem(id, item, quantity) {
            let html = `<tr id="${id}" class="newRow_${id}">
                            <td>${item}</td>
                            <td class="new_qty_${id}">${quantity}</td>
                            <td>
                                <button type="button" class="btn btn-sm btn-danger" onclick="removeItem(${id}, '${item}', ${quantity})" title="remove item"><i class="fa fa-times" aria-hidden="true"></i></button>
                            </td>
                        </tr>`;
            $("#appendNewItem").append(html);
            $(".existingRow_" + id).remove();
        }

        function copyItem(id, item, quantity) {
            $("#item_id").val(id);
            $("#item_name").val(item);
            $("#item_qty").val(quantity);
            $("#exampleModal").modal('show');
        }

        function removeItem(id, item, quantity) {
            let html = `<tr id="${id}" class="existingRow_${id}">
                            <td>${item}</td>
                            <td class="existingQty_${id}">${quantity}</td>
                            <td>
                                <button type="button" class="btn btn-sm btn-primary copy_item_${id}" onclick="copyItem(${id}, '${item}', ${quantity})" title="copy item"><i class="fa fa-clone" aria-hidden="true"></i></button>
                                <button type="button" class="btn btn-sm btn-secondary move_item_${id}" onclick="moveItem(${id}, '${item}', ${quantity})" title="move item"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
                            </td>
                        </tr>`;
            $("#appendExistingItem").append(html);
            $(".newRow_" + id).remove();
        }

        $("#submit").click(function(e) {
            e.preventDefault();
            $("#error").hide();
            $("#zero_qty_error").hide();
            let existingId = $("#item_id").val();
            let existingItem = $("#item_name").val();
            let existingQty = $("#item_qty").val();
            let newQty = $("#new_qty").val();
            if (parseFloat(existingQty) > parseFloat(newQty) && newQty != 0) {
                let qty = parseFloat(existingQty) - parseFloat(newQty);
                $(".existingQty_" + existingId).html(qty);
                splitItem(existingId, existingItem, newQty);
                $("#exampleModal").modal('hide');
                $("#item_id").val('');
                $("#item_name").val('');
                $("#item_qty").val('');
                $("#new_qty").val('');
            } else if (newQty == 0) {
                $("#zero_qty_error").show();
            } else {
                $("#error").show();
            }
        });

        function splitItem(id, item, quantity) {
            let html = `<tr id="${id}" class="newRow_${id}">
                            <td>${item}</td>
                            <td class="new_qty_${id}">${quantity}</td>
                            <td>
                                <button type="button" class="btn btn-sm btn-danger" onclick="removeSplitItem(${id}, '${item}', ${quantity})" title="remove item"><i class="fa fa-times" aria-hidden="true"></i></button>
                            </td>
                        </tr>`;
            $("#appendNewItem").append(html);
            $(".move_item_" + id).hide();
            $(".copy_item_" + id).hide();
        }

        function removeSplitItem(id, item, quantity) {
            let existingQty = $(".existingQty_" + id).html();
            let qty = parseFloat(quantity) + parseFloat(existingQty);
            $(".existingQty_" + id).html(qty);
            $(".newRow_" + id).remove();
            $(".move_item_" + id).show();
            $(".copy_item_" + id).show();
        }

        $("#split-order-submit").click(function(e) {
            e.preventDefault();
            let orderId = {{ $order->id }};
            let existingItemCount = $('#appendExistingItem' + ' > tr').length;
            let newItemCount = $('#appendNewItem' + ' > tr').length;
            if (existingItemCount != 0 && newItemCount != 0) {
                let existingData = [];
                let newData = [];
                $('#appendExistingItem' + ' > tr').each(function(index, value) {
                    let existingRowId = $(this).attr('id');
                    let existingQty = $(".existingQty_" + existingRowId).html();
                    const existingRow = {
                        'id': existingRowId,
                        'qty': existingQty
                    };
                    existingData.push(existingRow);
                });
                $('#appendNewItem' + ' > tr').each(function() {
                    let newRowId = $(this).attr('id');
                    let newQty = $(".new_qty_" + newRowId).html();
                    const newRow = {
                        'id': newRowId,
                        'qty': newQty
                    };
                    newData.push(newRow);
                });
                $.ajax({
                    type: "post",
                    url: "{{ route('mop-order-split-bill') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        orderId: orderId,
                        existingData: existingData,
                        newData: newData,
                        new_order_status: $("#new_order_status").val()
                    },
                    success: function(response) {


                        if (response.status == 200) {
                            alert(response.message);

                            // Redirect to the previous page
                            let previousPageURL = document.referrer;
                            window.location = previousPageURL;
                        } else if (response.status == 400) {
                            alert(response.message);
                        } else {
                            alert("Something went wrong. Please try again");
                        }
                    },
                    error: function(xhr) {
                        alert("Something went wrong. Please try again");
                    }
                });
            } else {
                alert('At least one item is required on both sides');
            }
        });
    </script>
@endsection