@extends('sales.layout.guest-layout')
@section('main')
    <section class="mt-4 mb-4">
        <div class="container-xxl">
            <div class="row">
                <input type="hidden" id="sessionCustomer_id" value="{{ session('selectedCustomerID') }}">
                <div class="table-card">
                    <div class="tbl-header pt-4">
                        <div class="row">
                            <div class="col-lg-5 col-md-4">
                                <h4 class="px-2">Customer Stats</h4>

                            </div>
                            <div class="col-lg-6 col-md-6 text-end my-auto ms-auto customer-search">
                                <div class="row">

                                    <form action="{{ route('sales.customers') }}" method="get">
                                        <div class="col-lg-6 ms-auto col-md-9">
                                            <input type="text" name="search_name" class="search-bar"
                                                placeholder="Search by customer name"
                                                value="{{ request()->get('search_name') }}">
                                            <button type="submit" class="btn search-btn"><i
                                                    class="fas fa-search"></i></button>
                                        </div>
                                    </form>


                                </div>
                            </div>
                            <div class="col-lg-1 col-2">
                                <a href="{{ route('sales.customers') }}" contenteditable="false"
                                    style="cursor: pointer;"><button type="button"
                                        class="btn btn-danger">reset</button></a>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive table-scroll" id="dynamic_customer">
                        <table class="table ">
                            <thead class="text-center">
                                <tr>
                                    <th>S.No</th>

                                    <th>Customer</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>View Detail</th>
                                    <th>History</th>
                                    <th>Place Order</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="customerTableBody" class="text-center">
                                @foreach ($customerRelations as $key => $item)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $item->customers->contact_person }}</td>
                                        <td>{{ $item->customers->phone }}</td>
                                        <td>{{ $item->customers->email }}</td>
                                        <td>
                                            <a href="javascript:void()" data-id="{{ $item->customers->id }}"
                                                class="customer_details" data-bs-target="#customerDetailsModal1"
                                                data-bs-toggle="modal" contenteditable="false" style="cursor: pointer;">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0)" data-id="{{ $item->customers->id }}"
                                                class="customer_order" data-bs-toggle="modal"
                                                data-bs-target="#customerOrderModal" contenteditable="false"
                                                style="cursor: pointer;">
                                                <i class="fas fa-history"></i>
                                            </a>
                                        </td>

                                        <td>
                                            <a href="{{ route('sales.products') }}?customer_id={{ $item->customers->id }}"
                                                class="btn select-customer" data-id="{{ $item->customers->id }}"
                                                data-name="{{ $item->customers->contact_person }}" style="cursor: pointer;">
                                                <i class="fas fa-bags-shopping"></i>
                                            </a>

                                        </td>


                                        <td style="padding-right:10px !important;">
                                            @if ($item->customers->status)
                                                <div class="sactive">
                                                    Active
                                                </div>
                                            @else
                                                <div class="sdeactive">
                                                    In Active
                                                </div>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

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



        <div class="modal fade" id="customerDetailsModal1" tabindex="-1" aria-labelledby="customerDetailsModal1"
            aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Customer Detail</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row px-4 pb-4 " id="customerTable">


                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal fade" id="customerOrderModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="max-width: 60% !important;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="customerOrderModal">Customer Order Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body customer_order_details">

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


        <script>
            var customer_company_id;
            var category_id;
            $(document).ready(function() {

                $(document).on('click', '.customer_details', function() {
                    var c_id = $(this).data('id');
                    console.log("coming", c_id);

                    $.ajax({
                        type: "GET",
                        url: `https://versova.ca/beta/public/sales/getCustomerDetails/${c_id}`,
                        success: function(response) {
                            console.log("coming", response);
                            $("#customerTable").empty();
                            $("#customerTable").append(response);
                        },
                        error: function(xhr) {
                            console.error(xhr.responseText);
                        },
                    });
                });



                $(document).on('click', '.allCheck', function() {
                    if ($('.allCheck').prop("checked")) {
                        $('.individual_check').prop("checked", true);
                    } else {
                        $('.individual_check').prop("checked", false);
                    }
                })

                // function for stop the submit without select any product
                $(document).on('submit', "#formSubmit_id", function() {

                    var count = [];
                    var checked = $(".individual_check").each(function() {
                        var checke = $(this).is(":checked");
                        var product_id = $(this).data('id');
                        if (checke) {
                            count.push(product_id);
                        } else {}
                    });

                    // console.log('submmit',count.length);
                    if (count.length == 0) {
                        alert('Please select any product');
                        return false
                    } else {
                        return true;
                    }

                });



                // function for get order details
                $(document).on('click', '.customer_order', function() {
                    var customerId = $(this).data('id');
                    console.log("Customer ID: ", customerId);

                    $.ajax({
                        type: "GET",
                        url: `https://versova.ca/beta/public/sales/getcustomerorder/${customerId}`,
                        success: function(response) {
                            $(".customer_order_details").html(response);
                            console.log(response);
                        },
                        error: function(xhr) {
                            if (xhr.status === 404) {
                                $(".customer_order_details").html(
                                    '<p class="text-danger">No orders found for this customer.</p>'
                                );
                            } else {
                                $(".customer_order_details").html(
                                    '<p class="text-danger">Failed to load order details.</p>'
                                );
                            }
                        }
                    });
                });
                $(document).on('click', '.select-customer', function(e) {
                    e.preventDefault();
                    var customerId = $(this).data('id');
                    var customer_name = $(this).data('name');
                    console.log(customer_name);

                    if (customerId) {
                        $.ajax({
                            url: '{{ route('sales.storeCustomerInSession') }}',
                            type: 'POST',
                            data: {
                                customer_id: customerId,
                                customer_name: customer_name,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.success) {
                                    localStorage.setItem('selectedCustomerID', customerId);
                                    localStorage.setItem('selectedCustomerName', customer_name);

                                    // Update the header with the new customer name
                                    $("#selectedCustomerName").text(customer_name);
                                    console.log("Customer Name:", customer_name);

                                    // Redirect to the products page
                                    window.location.href =
                                        "{{ route('sales.products') }}?customer_id=" + customerId;
                                } else {
                                    alert(response.message);
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error("Error updating customer in session:", error);
                                alert("An error occurred while updating the customer.");
                            }
                        });
                    } else {
                        alert('No customer selected. Please try again.');
                    }
                });

            });
        </script>
        <style>
            /* counter start  */

            .counter__incrementt,
            .counter__decrementt {
                transition: all 0.4s ease-in-out;
            }

            .counter {
                position: relative;
                width: 6.5rem;
                height: 1.875rem;
                border-radius: 3px;
                text-align: center;
                overflow: hidden;
                margin: auto;
            }

            .counter__input {
                border: none;
                height: 100%;
                margin: 0 auto;
                text-align: center;
                color: #2f3640;
                font-size: 14px;
                background-color: transparent;
                border: 1px solid #57B05B;
                outline: none;
            }

            .counter__incrementt,
            .counter__decrementt {
                position: absolute;
                top: 0;
                font-size: 16px;
                line-height: 30px;
                height: 30px;
                width: 30px;
                font-weight: normal;
                color: #fff;
                text-decoration: none;
                background-color: #57B05B;
            }

            .counter__incrementt:hover,
            .counter__incrementt:active,
            .counter__incrementt:focus,
            .counter__decrementt:hover,
            .counter__decrementt:active,
            .counter__decrementt:focus {
                color: #ffffff;
                text-decoration: none;
                background-color: #57B05B;
            }

            .counter__incrementt {
                right: 0;
                border-left: 1px solid #2f3640;
            }

            .counter__decrementt {
                left: 0;
                top: 0;
                border-right: 1px solid #2f3640;
                line-height: 1.6875rem;
            }

            .product_image img {
                width: 100px !important;
                height: 50px !important;
                object-fit: cover;
                object-position: center center;
            }

            tr .elseImage:hover {
                background: #fff !important;
            }

            .search-btn-1 {
                margin-top: -60px;
                margin-left: 85%;
            }

            button {
                border: none !important;
            }
        </style>
    </section>
@endsection