@php($productCount = 1)
@php($productStatus = 0)

@if ($customerProducts)
    @if ($customerProducts->status)
        @php($productStatus = 1)
    @endif
@endif

@if ($productStatus == 0)
    <table class="table table-bordered">
        <tr>
            <td>No product found</td>
        </tr>
    </table>
@elseif($productStatus == 1)
    {{-- {{dd($customerProducts)}} --}}

    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Type</th>
                    <th>Brand</th>
                    <th>ID</th>
                    <th>Product</th>
                    {{-- <th>Qty</th> --}}
                    <th style="min-width: 110px;">Bill No</th>
                    <th style="min-width: 110px;">Bill Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($customerProducts->products as $customerProduct)
                    <tr id="tr_product_{{ $productCount }}" class="tr_product" style="cursor: pointer;">
                        <td>
                            <input type="checkbox" class="product-checkbox"
                                data-item-value="{{ $customerProduct->item_type_name }}|{{ $customerProduct->brand_name }}|{{ $customerProduct->inv_code }}|{{ $customerProduct->item_name }} ({{ $customerProduct->ser_no }})|{{ $customerProduct->bill_no }}|{{ $customerProduct->bill_date }}">
                        </td>
                        <td>{{ $customerProduct->item_type_name }}</td>
                        <td>{{ $customerProduct->brand_name }}</td>
                        <td>{{ $customerProduct->inv_code }}</td>
                        <td>{{ $customerProduct->item_name }}<br>({{ $customerProduct->ser_no }})</td>
                        {{-- <td>{{ $customerProduct->qty }}</td> --}}
                        <td>
                            @if(isset($customerProduct->doc_no_enc) && $customerProduct->doc_no_enc)
                                <a href="{{ url('/in-voice/' . $customerProduct->doc_no_enc) }}"
                                    class="invoice-link" target="_blank"
                                    rel="noopener noreferrer" title="View Bill/ Invoice">
                                    <i class="fas fa-eye"></i>&nbsp; {{ $customerProduct->bill_no }}
                                </a>
                            @else
                                <a href="{{ url('/invoice/' . $customerProduct->bill_no) }}"
                                    class="invoice-link" target="_blank"
                                    rel="noopener noreferrer" title="View Bill/ Invoice">
                                    <i class="fas fa-eye"></i>&nbsp; {{ $customerProduct->bill_no }}
                                </a>
                            @endif
                        </td>
                        <td>{{ $customerProduct->bill_date }}</td>
                    </tr>

                    <tr class="repair-details-row" style="display: none;">
                        <td colspan="8">
                            <form action="{{ url('product-repair-from-ryans') }}" method="post" class="repair-form" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="checkedItem[]" class="hidden-item-value">
                                <input type="hidden" name="phone2" value="{{Auth::guard('customer')->user()->phone}}">
                                <input type="hidden" name="customer_name" value="{{$customerProduct->customer_name}}">
                                <input type="hidden" name="agent" value="0">
                                <input type="hidden" name="is_terminal" value="0">
                                <div class="mt-2 service-form repair-details-div">
                                    <div class="mb-2">
                                        <textarea class="form-control" rows="2" placeholder="Problem Details" name="rdetails" id="rdetails"></textarea>
                                    </div>
                                    <div class="mb-2 d-flex flex-column">
                                        <label for=""><b>Add photos/videos</b></label>
                                        <input type="file" name="files[]" id="rfile" multiple>
                                        <small class="text-danger">*Maximum file size 10MB</small>
                                    </div>
                                    <div class="input-group mb-2 trouble-phone-form">
                                        <input type="text" class="form-control phone-input" name="phone" value="0{{Auth::guard('customer')->user()->phone}}">
                                        <button type="button" class="btn btn-primary change-phone-btn" data-bs-toggle="tooltip"  data-bs-placement="top" title="To change your contact number, click here" disabled>Phone</button>
                                    </div>

                                    <div class="mb-1">
                                        <input type="submit" class="btn btn-outline-primary w-25" value="Submit">
                                    </div>
                                </div>

                            </form>
                        </td>
                    </tr>
                @endforeach

            </tbody>
        </table>
    </div>
@endif

{{-- <div class="mt-2 m-auto service-form repair-details-div">
    <div class="mb-3">
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Problem Details"
            name="rdetails" required></textarea>
    </div>
    <div class="mb-3 text-center">
        <input type="submit" class="btn btn btn-outline-primary w-25" value="Submit">
    </div>
</div> --}}



<script>
    document.querySelectorAll("input[name$='cars']").forEach(function(element) {
        element.addEventListener('click', function() {
            var test = this.value;

            document.querySelectorAll("div.desc").forEach(function(div) {
                div.style.display = 'none';
            });

            document.getElementById("Cars" + test).style.display = 'block';
        });
    });

    // document.querySelectorAll(".repair-details-div").forEach(function(div) {
        //     div.style.display = 'none';
    // });

    // document.querySelectorAll('.product-checkbox').forEach(function(checkbox) {
        //     checkbox.addEventListener('change', function() {
        //         console.log('checkbox click');

        //         var repairDetailsDivs = document.querySelectorAll('.repair-details-div');
        //         var anyChecked = document.querySelectorAll('.product-checkbox:checked').length > 0;

        //         repairDetailsDivs.forEach(function(div) {
        //             div.style.display = anyChecked ? 'block' : 'none';
        //         });
        //     });
    // });

    // document.addEventListener('DOMContentLoaded', function() {
        // const checkboxes = document.querySelectorAll('.product-checkbox');

        // checkboxes.forEach(function(checkbox) {
        //     checkbox.addEventListener('change', function() {
        //         const tr = checkbox.closest('tr'); // Find the parent row of the checkbox
        //         const nextRow = tr.nextElementSibling; // Get the next row, which is the hidden form

        //         // Toggle the visibility of the form
        //         if (checkbox.checked) {
        //             nextRow.style.display = 'table-row';
        //         } else {
        //             nextRow.style.display = 'none';
        //         }
        //     });
        // });
    // });


    var checkboxes = document.querySelectorAll('.product-checkbox');

    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            var phone = $('#cus_phone').val();
            const tr = checkbox.closest('tr'); // Find the parent row of the checkbox
            const nextRow = tr.nextElementSibling; // Get the next row, which contains the hidden form

            var input = nextRow.querySelector('.phone-input');

            const isAgent = "{{ \Auth::guard('customer')->user()->customer_reg_tracker }}" === "agent";

            // If the current checkbox is checked
            if (checkbox.checked) {
                if(phone){
                    $('input[name="phone"]').val(phone);
                    $('input[name="phone2"]').val(phone);
                    // $('input[name="agent"]').val(1);
                }

                if(isAgent){
                    $('input[name="agent"]').val(1);
                }

                // Show the form associated with this checkbox
                nextRow.style.display = 'table-row';

                // Attach the checkbox value to the form's hidden input
                const hiddenInput = nextRow.querySelector('.hidden-item-value');
                hiddenInput.value = checkbox.dataset.itemValue;

                // Disable all other checkboxes
                checkboxes.forEach(function(otherCheckbox) {
                    if (otherCheckbox !== checkbox) {
                        otherCheckbox.disabled = true;
                    }
                });

                input.focus();
                var valueLength = input.value.length;
                input.setSelectionRange(valueLength, valueLength);

            } else {
                // Hide the form when unchecked
                nextRow.style.display = 'none';

                // Enable all checkboxes if this one is unchecked
                checkboxes.forEach(function(otherCheckbox) {
                    otherCheckbox.disabled = false;
                });
            }
        });
    });

    var changeButtons = document.querySelectorAll('.change-phone-btn');

    // Loop through each button and attach a click event listener
    changeButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            // Find the associated input field
            var input = this.closest('.input-group').querySelector('.phone-input');

            // console.log(input);

            // Enable the input field
            input.readOnly = false;
            // Focus on the input field to allow immediate editing
            input.focus();

            // this.textContent = 'Save';
            // this.classList.remove('btn-primary');
            this.classList.add('disabled');

            var valueLength = input.value.length;
            input.setSelectionRange(valueLength, valueLength);
        });
    });

    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

    $('.repair-form').on('submit', function (e) {
        const value = $('#rdetails').val().trim();
        const limit = 500;

        if (value.length > limit) {
            e.preventDefault(); // stop form submission
            alert(`Details cannot exceed ${limit} characters. You have entered ${value.length}.`);
        }
    });
</script>