@extends('layouts.espace_collaboration')
@section('meta-title', 'Donnez vie à votre projet')
@section('meta-keywords', '')
@section('meta-description', '')
@section('sub-menu')
    @include('front.espace_collaboration.menu')
@endsection
@section('style')
    <style>
        /* Cart Container */
        .cart-container {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background-color: #fff;
            padding: 16px;
            width: 100%;
            font-family: 'Poppins';
        }

        /* Cart List */
        .cart-list {
            min-height: 400px;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* Cart Item */
        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            padding: 10px 5px;
            background-color: #f9f9f9;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        @media (max-width: 760px) {
            .cart-item {
                flex-direction: column;
                gap: 10px;
            }
        }

        .item-details {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .item-image {
            width: 48px;
            height: 48px;
            border-radius: 4px;
            object-fit: cover;
        }

        .item-info {
            display: flex;
            flex-direction: column;
        }

        .item-info strong {
            font-size: 14px;
            color: #333;
        }

        .item-dimensions {
            font-size: 12px;
            color: #666;
        }

        /* Item Controls */
        .item-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .control-btn {
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            color: #333;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
        }

        .control-btn:hover {
            background-color: #eaeaea;
        }

        .quantity {
            font-size: 14px;
            color: #333;
        }

        .delete-btn {
            border: none;
            background: none;
            color: #d9534f;
            font-size: 16px;
            cursor: pointer;
        }

        .delete-btn:hover {
            color: #c9302c;
        }

        /* Cart Footer */
        .cart-footer {
            margin-top: 16px;
            padding: 16px;
            background-color: #f1f1f1;
            border-top: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            border-radius: 0 0 8px 8px;
            gap: 10px;
        }

        .footer-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .return-btn {
            margin-right: auto;
        }

        .footer-btn {
            transition: background-color 0.3s ease;
            white-space: nowrap;
            /* Prevent text wrap */
        }

        .cart-header {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            margin: 0px 1px 12px;
            font-family: 'Poppins';
        }

        #cart-count {
            font-size: 14px !important;
            color: #666;
            white-space: nowrap;
        }

        @media (max-width: 820px) {
            .cart-footer {
                flex-direction: column;
                /* Stack items */
                align-items: stretch;
                /* padding: 16px 0px; */
            }

            .footer-right {
                flex-direction: column;
                /* Stack count and button */
                align-items: stretch;
                gap: 5px;
            }

            .footer-btn {
                width: 80%;
                text-align: center;
                margin: auto;
            }

            .return-btn {
                width: 50%;
            }

            #cart-count {
                text-align: center;
            }
        }

        .confirmation-container {
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 16px;
            font-family: 'Poppins', sans-serif;
            width: 100%;
        }

        /* Header Section */
        .confirmation-header {
            background-color: #f8f8f8;
            border-bottom: 1px solid #e0e0e0;
            border-radius: 8px 8px 0 0;
            padding: 12px 16px;
        }

        .confirmation-header h2 {
            font-size: 20px;
            color: #333;
            margin: 0;
        }

        .success-icon {
            font-size: 20px;
            color: #28a745;
        }

        /* Body Section */
        .confirmation-body {
            padding: 16px;
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

        .order-number {
            font-weight: bold;
            color: #007bff;
            text-decoration: none;
        }

        .order-number:hover {
            text-decoration: underline;
        }

        .order-link {
            color: #007bff;
            text-decoration: none;
        }

        .order-link:hover {
            text-decoration: underline;
        }

        /* Action Buttons */
        .confirmation-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px;
            border-top: 1px solid #e0e0e0;
            background-color: #f8f8f8;
            border-radius: 0 0 8px 8px;
        }

        /* Responsive Design */
        @media (max-width: 820px) {
            .confirmation-actions {
                flex-direction: column;
                align-items: stretch;
            }
        }

        .quote-btn {
            background-color: #6c757d;
            color: #fff;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }

        .quote-btn:hover {
            background-color: #5a6268;
        }

        .btn-secondary {
            background-color: #6c757d;
            color: #fff;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 14px;
        }

        .btn-secondary:hover {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: black;
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid" id="main-shopping">
        @include('front.espace_collaboration.shopping_initial')
    </div>
    @include('front.components.modal-vider-panier')

@endsection
@section('script')
    <script src="https://js.pusher.com/7.2/pusher.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/jquery.validate.min.js"></script>
    <script type="text/javascript">
        // function isCalendlyEvent(e) {
        //     return e.data.event && e.data.event.indexOf('calendly') === 0;
        // }

        // $(window).on('message', function(e) {
        //     if (isCalendlyEvent(e.originalEvent)) {
        //         if (e.originalEvent.data.event == "calendly.event_scheduled") {
        //             setTimeout(function() {
        //                 if (!$('#calendly-container').hasClass('d-none')) {
        //                     $('#calendly-container').toggleClass('d-none');
        //                     $('#scheduled-content').toggleClass('d-none');
        //                     $('html, body').animate({
        //                         scrollTop: 0
        //                     }, 'slow');
        //                 }

        //                 var url = $('#calendly-container').data('url');
        //                 $.ajax({
        //                     url: url,
        //                     method: "GET",
        //                     success: function(response) {
        //                         // Handle success response
        //                     },
        //                     error: function(xhr, status, error) {
        //                         // Handle error
        //                     }
        //                 });
        //             }, 2000);
        //         }
        //     }
        // });

        $(document).ready(function() {
            $(document).on("click", ".add-to-cart", function() {
                $('html, body').animate({
                    scrollTop: $(".cart-container").offset().top - 125
                }, 800); // 800ms for smooth scrolling

                const productName = $(this).data("name");
                const productSize = $(this).data("size");
                const productImage = $(this).data("image");
                const productId = $(this).data("id");

                let data = {
                    id: productId,
                    name: productName,
                    size: productSize,
                    image: productImage,
                };

                // Check for associated project ID
                if ($(this).parents("[data-projet]").data("projet")) {
                    const projet_id = $(this).parents("[data-projet]").data("projet");
                    data.projet_id = projet_id;
                }

                $('.loader').fadeIn();

                // Perform AJAX request to add item to the cart
                $.ajax({
                        url: "/api/panier",
                        type: "POST",
                        data: data,
                    })
                    .success((response) => {
                        if (response.success) {
                            var number = parseInt($("#productCount").text(), 10);

                            if ($("#cart-item-" + productId).length > 0) {
                                // Update quantity if the product is already in the cart
                                const qtyInput = $("#cart-item-" + productId).find(".quantity");
                                qtyInput.text(parseInt(qtyInput.text()) + 1);
                            } else {
                                // Add new product to the cart
                                $("#cart-items").append(`
                    <li class="cart-item" id="cart-item-${productId}">
                        <div class="item-details">
                            <img src="${productImage}" alt="${productName}" class="item-image" />
                            <div class="item-info">
                                <strong>${productName}</strong>
                                <span class="item-dimensions">${productSize}</span>
                            </div>
                        </div>
                        <div class="item-controls">
                            <button class="control-btn decrease-qty">-</button>
                            <span class="quantity">1</span>
                            <button class="control-btn increase-qty">+</button>
                            <button class="delete-btn">🗑️</button>
                        </div>
                    </li>
                `);
                            }

                            // Update cart count
                            updateCartCount();
                            $("#productCount").text(++number);

                            // Show a success alert for the product
                            $(this).parents(".produit").find(".alert").fadeIn();
                            setTimeout(() => {
                                $(this).parents(".produit").find(".alert").fadeOut();
                            }, 2000);
                        } else {
                            // Handle specific server responses
                            if (response.vider_panier) {
                                $("#modal-vider-panier").modal("show");
                            } else if (response.refuser_fournisseur) {
                                Swal.fire({
                                    title: "Marque non disponible en commande sur pipcke.fr <br> N'hésitez pas à en discuter avec votre designer.",
                                    confirmButtonColor: "#3085d6",
                                    confirmButtonText: "Ok",
                                });
                            }
                        }
                    })
                    .error((error) => {
                        if (error.status == 401) {
                            document.location.href = window.location.origin + "/connexion";
                        }
                    })
                    .always(() => {
                        $('.loader').fadeOut();
                        $(this).removeClass("hidden");
                    });
            });

            $(document).on("click", ".delete-btn", function() {
                const productId = $(this).parents('.cart-item').attr('id').split('-')[2];
                let data = {
                    id: productId,
                };
                $('.loader').fadeIn();
                $.ajax({
                        url: "/api/panier/delete-line",
                        type: "DELETE",
                        data: data,
                    })
                    .success((data) => {
                        if (data.success) {
                            $(this).closest(".cart-item").remove();
                            updateCartCount();
                        }
                    })
                    .error((error) => {
                        if (error.status == 401) {
                            document.location.href = window.location.origin + "/connexion";
                        }
                    })
                    .always(() => {
                        $('.loader').fadeOut();
                    });
            });

            $(document).on("click", ".increase-qty", function() {
                const productId = $(this).parents('.cart-item').attr('id').split('-')[2];
                let data = {
                    id: productId,
                };
                $('.loader').fadeIn();
                $.ajax({
                        url: "/api/panier/add",
                        type: "POST",
                        data: data,
                    })
                    .success((data) => {
                        if (data.success) {
                            const qty = $(this).siblings(".quantity");
                            qty.text(parseInt(qty.text()) + 1);
                            updateCartCount();
                        }
                    })
                    .error((error) => {
                        if (error.status == 401) {
                            document.location.href = window.location.origin + "/connexion";
                        }
                    })
                    .always(() => {
                        $('.loader').fadeOut();
                    });
            });

            $(document).on("click", ".decrease-qty", function() {
                const productId = $(this).parents('.cart-item').attr('id').split('-')[2];
                let data = {
                    id: productId,
                };
                $('.loader').fadeIn();
                $.ajax({
                        url: "/api/panier/remove",
                        type: "POST",
                        data: data,
                    })
                    .success((data) => {
                        if (data.success) {
                            const qty = $(this).siblings(".quantity");
                            const newQty = parseInt(qty.text()) - 1;
                            if (newQty > 0) {
                                qty.text(newQty);
                            } else {
                                $(this).closest(".cart-item").remove();
                            }
                            updateCartCount();
                        }
                    })
                    .error((error) => {
                        if (error.status == 401) {
                            document.location.href = window.location.origin + "/connexion";
                        }
                    })
                    .always(() => {
                        $('.loader').fadeOut();
                    });
            });

            $(document).on("click", ".remove-item", function() {
                $(this).closest(".cart-item").remove();
                updateCartCount();
            });

            function updateCartCount() {
                let totalQuantity = 0;
                $("#cart-items .quantity").each(function() {
                    totalQuantity += parseInt($(this).text(), 10);
                });
                if (totalQuantity === 0) {
                    $("#cart-count").text("Aucun produit sélectionné");
                    $("#request-quote").addClass("disabled");
                    $("#complete-address").addClass("disabled");
                } else if (totalQuantity === 1) {
                    $("#request-quote").removeClass("disabled");
                    $("#complete-address").removeClass("disabled");
                    $("#cart-count").text("1 produit sélectionné");
                } else {
                    $("#request-quote").removeClass("disabled");
                    $("#complete-address").removeClass("disabled");
                    $("#cart-count").text(totalQuantity + " produits sélectionnés");
                }
            }

            $(document).on('click', '#request-quote', function() {
                const projectId = $(this).data('project-id');
                $('.loader').fadeIn();
                $.ajax({
                    url: '{{ route('client.update.shopping') }}',
                    type: 'GET',
                    data: {
                        project_id: projectId
                    },
                    success: function(response) {
                        $('#main-shopping').html(response);
                        $('.loader').fadeOut();
                    },
                    error: function() {
                        console.log('Something went wrong!');
                        $('.loader').fadeOut();
                    }
                });
            });

            $(document).on("click", "#back-initial-btn", function() {
                const projectId = $(this).data('project-id');
                $('.loader').fadeIn();
                $.ajax({
                    url: '{{ route('client.initial.shopping') }}',
                    type: 'GET',
                    data: {
                        project_id: projectId
                    },
                    success: function(response) {
                        $('#main-shopping').html(response);
                        $('.loader').fadeOut();
                    },
                    error: function() {
                        console.log('Something went wrong!');
                        $('.loader').fadeOut();
                    }
                });
            });

            $(document).on("click", "#complete-address", function() {
                const projectId = $(this).data('project-id');
                $('.loader').fadeIn();
                $.ajax({
                    url: '{{ route('client.address.shopping') }}',
                    type: 'GET',
                    data: {
                        project_id: projectId
                    },
                    success: function(response) {
                        $('#main-shopping').html(response);
                        $('.loader').fadeOut();
                    },
                    error: function() {
                        console.log('Something went wrong!');
                        $('.loader').fadeOut();
                    }
                });
            });

            $(document).on("click", "#back-final-btn", function() {
                const projectId = $(this).data('project-id');
                $('.loader').fadeIn();
                $.ajax({
                    url: '{{ route('client.update.shopping') }}',
                    type: 'GET',
                    data: {
                        project_id: projectId
                    },
                    success: function(response) {
                        $('#main-shopping').html(response);
                        $('.loader').fadeOut();
                    },
                    error: function() {
                        console.log('Something went wrong!');
                        $('.loader').fadeOut();
                    }
                });
            });

            $(document).on('click', '.toggle1', function(event) {
                $("#adresse").addClass('hidden');
                $("#adresse2").removeClass('hidden');
            });

            $(document).on('click', '.toggle2', function(event) {
                $("#adresse").removeClass('hidden');
                $("#adresse2").addClass('hidden');
            });

            $(document).on('click', '#btnDemandeDevis', function() {
                let adresseId = $(this).data('adresse-id');
                let projectId = $(this).data('projet-id');
                $('.loader').fadeIn();
                $.ajax({
                    url: '{{ route('client.monpanier.demandeDevis') }}',
                    type: 'GET',
                    data: {
                        project_id: projectId,
                        address_id: adresseId
                    },
                    success: function(response) {
                        $('#main-shopping').html(response);
                        $('.loader').fadeOut();
                    },
                    error: function() {
                        console.log('Something went wrong!');
                        $('.loader').fadeOut();
                    }
                });
            });

            $(document).on("change", "[name=adresse-livraison-shopping] [name]", function(event) {
                event.stopPropagation();

                // Get the form reference
                var form = $("[name=adresse-livraison-shopping]");

                // Set up form validation rules and messages
                form.validate({
                    rules: {
                        telephone_mobile: {
                            required: true,
                            minlength: 10,
                            number: true,
                        },
                    },
                    messages: {
                        prenom: {
                            required: "Champ obligatoire",
                        },
                        nom: {
                            required: "Champ obligatoire",
                        },
                        adresse: {
                            required: "Champ obligatoire",
                        },
                        code_postal: {
                            required: "Champ obligatoire",
                        },
                        ville: {
                            required: "Champ obligatoire",
                        },
                        telephone_mobile: {
                            required: "Champ obligatoire",
                            minlength: "10 caractères au minimum",
                            number: "Chiffres uniquement",
                        },
                    },
                });
            });

            $(document).on("submit", "[name=adresse-livraison-shopping]", function(event) {
                event.stopPropagation();
                event.preventDefault();

                // Get the form reference
                var form = $("[name=adresse-livraison-shopping]");
                console.log('$(this).serialize()', $(this).serialize());
                // Check if the form is valid
                if (form.valid()) {
                    $(".loader").fadeIn(); // Show the loader

                    // Submit the form via AJAX
                    $.ajax({
                        url: "/mon-panier", // Form submission URL
                        type: "POST",
                        data: $(this).serialize(), // Serialize form data
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                                "content"), // CSRF token
                        },
                        success: function(response) {
                            $('#main-shopping').html(
                                response); // Update the shopping content
                            $('html, body').animate({
                                scrollTop: 0
                            }, 800);
                            $('.loader').fadeOut(); // Hide the loader
                        },
                        error: function() {
                            $('html, body').animate({
                                scrollTop: 0
                            }, 800);
                            $(".loader").fadeOut(); // Hide the loader on error
                            console.log("An error occurred.");
                        },
                    });
                }
            });
        });
    </script>
@endsection