@extends('layouts.light.master')
@section('title', 'Order')

@section('css')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ dynamic_url('assets/main/css/owlcarousel.css') }}">
@endsection

@section('style')
    <style>
        [id^=product_label_] {
            cursor: pointer;
            /* Makes the mouse pointer a hand */
        }
    </style>

@endsection

@section('breadcrumb-title')
    <h2>Edit an<span>Stock Check Request </span></h2>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Stocck Check Edit</li>
    <li class="breadcrumb-item active">Create</li>
@endsection

@section('content')

    <div class="container-fluid">
        <div class="row">
            @if ($userType == 'admin')
                <div class="form-group col-6">
                    <label for="catalog_select" class="text-bold"><strong>Select Catalog:</strong></label>
                    <select id="catalog_select" name="catalog_id" class="form-control">
                        <option value="">-- Choose Catalog --</option>
                        @foreach ($catalogs as $catalog)
                            <option value="{{ $catalog->id }}">{{ $catalog->name }}</option>
                        @endforeach
                    </select>
                </div>
            @else
                <div class="form-group col-6"></div>
            @endif

            <div class="form-group col-6">
                <a style="float: right;" href="{{ url()->previous() }}" class="btn btn-primary">
                    ← Back
                </a>
            </div>
        </div>
        <div id="catalog_images" class="mt-3 row">
            <!-- Images will be shown here -->
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card b-r-0">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12" style="max-height: 600px; overflow-y: auto;">
                                <input type="search" id="search_sku" placeholder="Enter SKU Number." name="search"
                                    class="sku_no form-control" aria-label="Search">
                                <br>
                                <strong>
                                    <b>NOTE: Do empty search to reset.</b>
                                </strong>
                                <strong>
                                    <b>NOTE: Double click on Cabinet Label to select product.</b>
                                </strong>
                                <hr>

                                <div class="table-responsive table-xs" style="max-height: 250px; overflow-y: auto;">
                                    <table id="searchResultsTable" class="table table-striped table-bordered table-sm ">
                                        <thead>
                                            <tr>
                                                <th>Cabinet Label</th>
                                                <th>SKU</th>
                                                <th>Description</th>
                                                <th>Weight</th>
                                                <th>Cost</th>
                                                <th>Qty</th>
                                            </tr>
                                        </thead>
                                        <tbody><!-- JS injects here --></tbody>
                                    </table>
                                </div>

                                <div class="default-according" id="accordionclose">
                                    @forelse ($product_sections as $sectionId => $section)
                                        <div class="card b-r-0 section-card">
                                            <div class="card-header" id="heading{{ $section->id }}"
                                                style="background-color:#cfe2ff;">
                                                <h6 class="mb-0">
                                                    <button class="btn btn-link" data-bs-toggle="collapse"
                                                        data-bs-target="#collapse{{ $section->id }}" aria-expanded="false"
                                                        aria-controls="collapse{{ $section->id }}">
                                                        {{ $section->cabinets_name }}
                                                    </button>
                                                </h6>
                                            </div>
                                            <div id="collapse{{ $section->id }}" class="collapse"
                                                aria-labelledby="heading{{ $section->id }}"
                                                data-bs-parent="#accordionclose">
                                                <div class="p-1 card-body">
                                                    <div class="table-responsive table-xs"
                                                        style="max-height: 250px; overflow-y: auto;">
                                                        <table
                                                            class="table p-0 m-0 display table-striped table-bordered table-sm sku-table">
                                                            <thead>
                                                                <tr>
                                                                    <th>Cabinet Label</th>
                                                                    <th>SKU</th>
                                                                    <th>Description</th>
                                                                    <th>Weight</th>
                                                                    <th>Cost</th>
                                                                    <th>Qty</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @forelse ($productsBySection[$sectionId] ?? [] as $product)
                                                                    <tr>
                                                                        <td id="product_label_{{ $product->id }}"
                                                                            name="{{ $product->door_factor }}">
                                                                            {{ $product->label }}</td>
                                                                        <td>{{ $product->sku }}</td>
                                                                        <td>{{ $product->description }}</td>
                                                                        <td>{{ $product->weight }}</td>
                                                                        <td>{{ $product->cost }}</td>
                                                                        <td>{{ $product->qty }}</td> {{-- You can customize this based on qty in room if needed --}}
                                                                    </tr>
                                                                @empty
                                                                    <tr>
                                                                        <td colspan="6">No products found in this
                                                                            section.</td>
                                                                    </tr>
                                                                @endforelse
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <p>There is nothing to show.</p>
                                    @endforelse


                                </div>
                            </div>

                            <div class="border col-xl-7 col-lg-7 col-md-12 col-sm-12">
                                <strong class="mt-2">
                                    <b>Step #1: Please enter Job Name and Room before selecting items from
                                        inventory.</b>
                                </strong>
                                <div class="box box-primary" style="overflow-x: auto;">
                                    <div class="form-inline ">
                                        <span class="m-2">
                                            <b>
                                                Job Name <span class="astirisk font-danger">*</span>
                                            </b>
                                        </span>
                                        <input id="job_name" type="text" name="job_name" class="form-control"
                                            value="{{ old('job_name', $stockCheck->job_name ?? '') }}"
                                            placeholder="Enter Job Name." required autofocus>
                                        <button type="button" class="m-2 text-white btn btn-info" id="add_room_btn">+ ADD
                                            JOB</button>
                                        {{-- <span class="" style="float:right;">
                                                <a href="#" id="clear_cart" class="m-2 btn btn-light">
                                                    Clear Cart
                                                </a>
                                            </span> --}}
                                    </div>
                                    <div class="">
                                        <strong class="m-2">Assemble All Cabinetry?<span
                                                class="asterisk font-danger">&nbsp;*</span></strong>
                                        <input type="radio" id="ass_required" name="assemble_cabinets_check"
                                            value="1" {{$stockCheck->assemble_cabinets_check == 'yes' ? 'checked' : ''}} required autofocus>
                                        <label for="html">Yes</label>

                                        <input type="radio" id="" class="space_right"
                                            name="assemble_cabinets_check" value="2" {{$stockCheck->assemble_cabinets_check == 'no' ? 'checked' : ''}}>
                                        <label for="css">No</label><span class="err_assemble_check"
                                            style="font-weight:525;"></span><br>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr class="table-primary">
                                                    <th>Double Check Work</th>
                                                    <th>Cabinet Name</th>
                                                    <th>Cabinet Description</th>
                                                    <th>Weight</th>
                                                    <th>Unit Price</th>
                                                    <th>Total Price</th>
                                                    <th>Quantity</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>

                                            <tbody id="room_table_body"></tbody>
                                            <tfoot>
                                                <tr>
                                                    <th></th>
                                                    <th></th>
                                                    <th></th>
                                                    <th class="custom_all_product_weights">0lbs</th>
                                                    <th></th>
                                                    <th class="custom_all_product_total">$0.00</th>
                                                    <th></th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                    <div class="form-inline">
                                        <label><b>Comment</b></label>
                                        <textarea style="margin-left:1%; width:80%" rows="4" name="order_comment" class="mt-2 form-control"
                                            maxlength="200">{{ old('order_comment', $stockCheck->comment ?? '') }}</textarea>
                                    </div>
                                </div>
                                <div class="clearfix m-2 box-footer pull-left">
                                    <button class="btn btn-primary" id="stock_check_update_btn"
                                        data-type="{{ $userType }}" name="stock_check_update_btn">Update</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ dynamic_url('assets/main/js/form-wizard/form-wizard-two.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/owlcarousel/owl.carousel.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/owlcarousel/owl-custom.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        const stockCheck = @json($stockCheck);
        const allProducts = @json($products);

        const originalJobName = stockCheck.job_name;
        const originalComment = stockCheck.order_comment || ""; // in case it's null
        const originalAssembleCheck = stockCheck.assemble_cabinets_check == 1 || stockCheck.assemble_cabinets_check ===
            "yes" ? "1" : "2";
        const originalRooms = JSON.parse(stockCheck.rooms || "{}");

        function updateTotals() {
            let totalPrice = 0;
            let totalWeight = 0;

            $(".product_total_price").each(function() {
                totalPrice += parseFloat($(this).text().replace("$", "")) || 0;
            });

            $(".product_weight").each(function() {
                totalWeight += parseFloat($(this).text().replace("lbs", "")) || 0;
            });

            $(".custom_all_product_total").text(`$${totalPrice.toFixed(2)}`);
            $(".custom_all_product_weights").text(`${totalWeight.toFixed(2)}lbs`);
        }


        $(document).ready(function() {
            // Set job name
            $("#job_name").val(stockCheck.job_name);

            // Set assemble option
            if (stockCheck.assemble_cabinets_check === "yes" || stockCheck.assemble_cabinets_check == 1) {
                $('#ass_required').prop('checked', true);
            } else {
                $('input[name="assemble_cabinets_check"][value="2"]').prop('checked', true);
            }

            const rooms = JSON.parse(stockCheck.rooms || '{}');
            console.log(rooms)

            for (let key in rooms) {
                const room = rooms[key];
                const uniqueRoomId = "room_" + new Date().getTime() + "_" + key;

                const roomRow = `
                    <tr class="show_room table-warning" data-room-id="${uniqueRoomId}">
                        <td><label>Room<span class="astirisk font-danger">*</span></label></td>
                        <td colspan="5">
                            <input required type="text" name="roomlabel[]" value="${room.room_name}" class="form-control room_input">
                        </td>
                        <td>
                            <button class="btn btn-outline-danger remove_room">x</button>
                        </td>
                    </tr>
                `;

                $("#room_table_body").append(roomRow);
                const lastRoomRow = $("#room_table_body tr.show_room").last();
                room.products.forEach(p => {
                    const qty = p.quantity;
                    const product = allProducts[p.product_id];
                    console.log("note: " + p.note)
                    if (!product) return;

                    const weight = parseFloat(product.weight || 0);
                    const price = parseFloat(product.cost || 0);

                    const productRow = `
                        <tr data-id="${product.id}" data-note="${p.note}" data-quantity="${qty}">
                            <td>
                                <input type="checkbox" class="single_check"><br>
                                <input type="checkbox" class="double_check">
                            </td>
                            <td>${product.label}</td>
                            <td>${product.description}</td>
                            <td class="product_weight">${(weight * qty).toFixed(2)}lbs</td>
                            <td>$${price.toFixed(2)}</td>
                            <td class="product_total_price">$${(price * qty).toFixed(2)}</td>
                            <td class="product_quantity">${p.quantity}</td>
                            <td>
                                <button class="btn btn-outline-danger remove_product">x</button>
                            </td>
                        </tr>
                    `;

                    lastRoomRow.after(productRow);
                });
            }

            updateTotals();
        });



        $("#stock_check_form").submit(function(e) {
            const rooms = {}; // Gather room/product info dynamically
            $(".show_room").each(function(index, el) {
                console.log(el)
                const roomName = $(el).find(".room_input").val();
                const roomId = $(el).data("room-id");

                const roomProducts = [];
                $(`tr[data-room-id="${roomId}"]`).each(function() {
                    const pid = $(this).data("id");
                    if (pid) roomProducts.push({
                        product_id: pid
                    });
                });

                rooms[`room${index}`] = {
                    room_name: roomName,
                    products: roomProducts
                };
            });

            $("#rooms_json").val(JSON.stringify(rooms));
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#stock_check_update_btn').click(function(e) {
                e.preventDefault();
                const userType = $(e).attr('data-type');

                const jobName = $("#job_name").val().trim();
                const comment = $("textarea[name='order_comment']").val().trim();
                const assemble = $("input[name='assemble_cabinets_check']:checked").val();
                const stockCheckId = $("#stock_check_id").val();

                // ✅ Check if any changes were made
                let rooms = {};
                let roomIndex = 0;
                let valid = true;
                let isDataChanged = false;
                if (jobName !== originalJobName || comment !== originalComment || assemble !==
                    originalAssembleCheck) {
                    isDataChanged = true;
                }


                $(".show_room").each(function() {
                    const roomName = $(this).find(".room_input").val().trim();
                    if (!roomName) {
                        Swal.fire("Validation Error", "All rooms must have names.", "warning");
                        valid = false;
                        return false;
                    }

                    const roomId = $(this).data("room-id");
                    let roomProducts = [];

                    let currentRow = $(this).next();
                    while (currentRow.length && !currentRow.hasClass("show_room")) {
                        const productId = currentRow.data("id");
                        const note = currentRow.data("note");
                        const quantity = currentRow.data("quantity");
                        if (productId) {
                            roomProducts.push({
                                product_id: productId,
                                note: note,
                                quantity: quantity
                            });
                        }
                        currentRow = currentRow.next();
                    }

                    if (roomProducts.length === 0) {
                        Swal.fire("Validation Error", `Room "${roomName}" has no products.`,
                            "warning");
                        valid = false;
                        return false;
                    }

                    rooms[`room${roomIndex}`] = {
                        room_name: roomName,
                        products: roomProducts
                    };
                    roomIndex++;
                    // ✅ Detect changes in rooms
                    if (roomName !== originalRooms[`room${roomIndex}`]?.room_name || JSON.stringify(
                            roomProducts) !== JSON.stringify(originalRooms[`room${roomIndex}`]
                            ?.products)) {
                        isDataChanged = true;
                    }
                });

                if (!valid) return;

                if (!isDataChanged) {
                    Swal.fire("No Changes Detected", "You have not made any changes.", "info");
                    return;
                }
                let updateUrl =
                    "{{ route('tenant_stock_check_job_update', ['id' => $stockCheck->id]) }}"; // Generate the URL from route() helper
                let id = {{ $stockCheck->id }}
                // ✅ All good: Send update AJAX request
                $.ajax({
                    url: updateUrl,
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        job_name: jobName,
                        order_comment: comment,
                        assemble_cabinets_check: assemble,
                        rooms_json: JSON.stringify(rooms),
                        id: id
                    },
                    success: function(res) {
                        Swal.fire("Success", "Stock Check updated successfully!", "success");
                        originalJobName = jobName;
                        originalComment = comment;
                        originalAssembleCheck = assemble;
                        originalRooms = rooms;

                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                        Swal.fire("Error", "Something went wrong during update.", "error");
                    }
                });
            });
        });
    </script>


    <script>
        document.getElementById('catalog_select').addEventListener('change', function() {
                    let catalogId = this.value;

                    if (!catalogId) {
                        document.getElementById('catalog_images').innerHTML = '';
                        return;
                    }
                    fetch(`{{ route('tenant_stock_check_image') }}?catalog_id=${catalogId}`)
                        .then(response => response.json())
                        .then(data => {
                                const container = document.getElementById('catalog_images');
                                container.innerHTML = '';

                                if (data.images.length === 0) {
                                    container.innerHTML = '<p>No images available for this catalog.</p>';
                                    return;
                                }

                                data.images.forEach(img => {
                                    const img_name = img.product_labelf;
                                    container.innerHTML += `
                                    <div class="col-md-3 mb-3">
                                        src="{{ dynamic_url('assets/main/images/slider/${img_name}') }}"
                                    </div>
                                `;
                                    .catch(error => console.error('Error fetching images:', error));
                                });
    </script>



    <script>
        $(function() {
            const $input = $('#search_sku');
            const $tables = $('.sku-table');
            const $sections = $('.section-card');
            const $resultsTable = $('#searchResultsTable');
            const $resultsBody = $resultsTable.find('tbody');

            function debounce(fn, delay = 150) {
                let timer;
                return function(...args) {
                    clearTimeout(timer);
                    timer = setTimeout(() => fn.apply(this, args), delay);
                };
            }

            function doSearch() {
                const filter = $input.val().toLowerCase().trim();
                $resultsBody.empty();

                if (!filter) {
                    // no filter → hide results, show all sections
                    $resultsTable.hide();
                    $sections.show();
                    return;
                }

                // with filter → hide original sections
                $sections.hide();

                // find & clone matches into results
                $tables.each(function() {
                    $(this).find('tbody tr').each(function() {
                        const sku = $(this).children('td').eq(1).text().toLowerCase();
                        if (sku.includes(filter)) {
                            $resultsBody.append($(this).clone());
                        }
                    });
                });

                // show or hide results based on matches
                if ($resultsBody.children().length) {
                    $resultsTable.show();
                } else {
                    $resultsTable.hide();
                    // optionally: show a “no results” message
                }
            }

            $input.on('keyup', debounce(doSearch));

            // initialize
            $resultsTable.hide();
        });
    </script>




    <script>
        $(document).ready(function() {

            function updateTotals() {
                let totalPrice = 0;
                let totalWeight = 0;

                $(".product_total_price").each(function() {
                    totalPrice += parseFloat($(this).text().replace("$", "")) || 0;
                });

                $(".product_weight").each(function() {
                    totalWeight += parseFloat($(this).text().replace("lbs", "")) || 0;
                });

                $(".custom_all_product_total").text(`$${totalPrice.toFixed(2)}`);
                $(".custom_all_product_weights").text(`${totalWeight.toFixed(2)}lbs`);
            }

            $("#add_room_btn").click(function() {
                let jobName = $("#job_name").val().trim();
                if (jobName === "") {
                    Swal.fire({
                        icon: "warning",
                        title: "Missing Job Name",
                        text: "Please enter a Job Name before adding a room.",
                        confirmButtonText: "OK",
                        confirmButtonColor: "#d33"
                    });
                    return;
                }

                // $.post("{{ route('cart.saveJobName') }}", {
                //     _token: "{{ csrf_token() }}",
                //     job_name: jobName
                // });
                let uniqueRoomId = "room_" + new Date().getTime();

                let roomRow = `
                    <tr class="show_room table-warning" data-room-id="${uniqueRoomId}">
                        <td><label>Room<span class="astirisk font-danger">*</span></label></td>
                        <td colspan="5">
                            <input required type="text" name="roomlabel[]" placeholder="Enter Room Name." class="form-control room_input">
                        </td>
                        <td>
                            <button class="btn btn-outline-danger remove_room">x</button>
                        </td>
                    </tr>
                `;

                $("#room_table_body").append(roomRow);
                lastRoomRow = $("#room_table_body tr.show_room").last();

                let roomName = lastRoomRow.find(".room_input").val();

            });

            $(document).on("click", ".remove_room", function() {
                let roomRow = $(this).closest("tr");
                let roomName = roomRow.find(".room_input").val();



                roomRow.nextUntil(".show_room").remove();
                roomRow.remove();
                updateTotals();
            });

            $(document).on("dblclick", "[id^=product_label_]", function() {
                let door_factor = $(this).attr("name") || 1; // default to 1 if not set
                door_factor = parseFloat(door_factor) || 1; // make sure it's a number
                if ($(".show_room").length === 0) { // Check if there are no rooms
                    Swal.fire({
                        icon: "warning",
                        title: "Missing Room",
                        text: "Please add a room before selecting a product.",
                        confirmButtonText: "OK",
                        confirmButtonColor: "#d33"
                    });
                    return;
                }

                
                let valid = true;
                let firstInvalidInput = null;
                $('.room_input').each(function() {
                    if ($.trim($(this).val()) === '') {
                        valid = false;
                        firstInvalidInput = $(this);
                        return false; // break loop
                    }
                });

                if (!valid) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Room name required',
                        text: 'Please enter a name for all rooms.',
                    }).then(() => {
                        firstInvalidInput.focus();
                    });
                    return;
                }


                let productRow = $(this).closest("tr");
                let productId = $(this).attr("id").replace("product_label_", "").trim();
                let productLabel = productRow.find("td:nth-child(1)").text().trim();
                let productSku = productRow.find("td:nth-child(2)").text().trim();
                let productDescription = productRow.find("td:nth-child(3)").text().trim();
                let productWeight = parseFloat(productRow.find("td:nth-child(4)").text().trim().replace(
                    "lbs",
                    "")) || 0;
                let productPrice = parseFloat(productRow.find("td:nth-child(5)").text().trim().replace("$",
                    "")) || 0;

                productPrice = (productPrice * door_factor).toFixed(2);

                let lastRoomRow = $("#room_table_body").find(".show_room")
                    .last(); // Get the last room added

                // Ensure a room is selected before adding a product
                if (!lastRoomRow || lastRoomRow.find(".room_input").val().trim() === "") {
                    Swal.fire({
                        icon: "warning",
                        title: "Missing Room Name",
                        text: "Please enter a room name before selecting a product.",
                        confirmButtonText: "OK",
                        confirmButtonColor: "#d33"
                    });
                    return;
                }

                let existingProduct = $(`#room_table_body tr[data-id="${productId}"]`);
                if (existingProduct.length > 0) {
                    let qtyField = existingProduct.find(".product_quantity");
                    let newQty = parseInt(qtyField.text()) + 1;
                    qtyField.text(newQty);
                    existingProduct.attr('data-quantity', newQty);

                    let totalPriceField = existingProduct.find(".product_total_price");
                    totalPriceField.text(`$${(newQty * productPrice).toFixed(2)}`);
                    let weightField = existingProduct.find(".product_weight");
                    weightField.text(`${(newQty * productWeight).toFixed(2)}lbs`);
                } else {
                    let productData = `
                        <tr data-id="${productId}">
                            <td>
                                <input type="checkbox" class="single_check">  <br>
                                <input type="checkbox" class="double_check">
                            </td>
                            <td>${productLabel}</td>
                            <td>${productDescription}</td>
                            <td class="product_weight">${productWeight.toFixed(2)}lbs</td>
                            <td>$${productPrice.toFixed(2)}</td>
                            <td class="product_total_price">$${productPrice.toFixed(2)}</td>
                            <td class="product_quantity">1</td>
                            <td>
                                <button class="btn btn-outline-danger remove_product">x</button>
                            </td>
                        </tr>
                    `;

                    lastRoomRow.after(productData);
                }

                updateTotals();
            });

            $(document).on("click", ".remove_product", function() {
                let productRow = $(this).closest("tr");
                let productId = productRow.data("id");

                $.post("{{ route('cart.removeProduct') }}", {
                    _token: "{{ csrf_token() }}",
                    product_id: productId
                });

                productRow.remove();
                updateTotals();
            });

        });
    </script>

@endsection