@php
    use Carbon\Carbon;
@endphp

@extends('layouts.root')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
@section('styles')

@endsection

@section('root-content')

<div class="dashboard-widg-bar d-block">


<!-- ================================  Job Detail ========================== -->
<div class="row">
    <div class="col-lg-6 col-md-12">

        <div class="jbs-blocs style_03 b-0 mb-md-4 mb-sm-4">
            <div class="jbs-blocs-body px-4 py-4">
                <img src="{{ asset('storage/' . $product->image) }}" class="img-fluid" style="height: 400px;width:800px;">
            </div>
            <div class="jbs-blocs-body px-4 py-4">
                <div class="jbs-content mb-4">
                    <h5 class="text-primary">{{ $product->category ? $product->category->libelle : '' }}</h5>
                    <p>{{ $product->libelle }}</p>
                </div>
                <div class="jbs-content mb-4">
                    <h5>Description</h5>
                    <p>{!! $product->description !!}</p>
                </div>
            </div>
            <div class="jbs-blox-footer">
                <div class="blox-first-footer">
                    <div class="ftr-share-block">
                        <ul>
                            <li><strong>Partager sur vos reseaux:</strong></li>
                            <li><a href="JavaScript:Void(0);"><i class="fa-brands fa-facebook"></i></a></li>
                            <li><a href="JavaScript:Void(0);"><i class="fa-brands fa-linkedin"></i></a></li>
                            <li><a href="JavaScript:Void(0);"><i class="fa-brands fa-google-plus"></i></a></li>
                            <li><a href="JavaScript:Void(0);"><i class="fa-brands fa-twitter"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="col-lg-6 col-md-12">

        <div class="pg-side-groups">

            <div class="pg-side-block">
                <div class="pg-side-block-head">
                    <div class="pg-side-left">
                        <div class="pg-side-thumb">
                            <img src="{{ $product->user ? $product->user->avatar : 'storage/avatars/avatar.png' }}" class="img-fluid circle" alt="">
                        </div>
                    </div>
                    <div class="pg-side-right">
                        <div class="pg-side-right-caption">
                            <h4>{{ $product->user ? $product->user->name : 'Webmaster' }}</h4>
                            <span><i class="fa-solid fa-location-dot me-2"></i>{{ $product->user->adresse ? $product->user->adresse : 'Libreville, Gabon' }}</span>
                        </div>
                    </div>
                </div>

                <div class="pg-side-block-body">
                    <div class="pg-side-block-info">
                        <div class="vl-elfo-group">
                            <div class="vl-elfo-icon"><i class="fa-solid fa-phone-volume"></i></div>
                            <div class="vl-elfo-caption"><h6>Contact</h6><p>(+241) 74 83 56 31</p></div>
                        </div>
                        <div class="vl-elfo-group">
                            <div class="vl-elfo-icon"><i class="fa-regular fa-envelope"></i></div>
                            <div class="vl-elfo-caption"><h6>Email</h6><p>contact@jobbo.com</p></div>
                        </div>
                        <div class="vl-elfo-group">
                            <div class="vl-elfo-icon"><i class="fa-solid fa-globe"></i></div>
                            <div class="vl-elfo-caption"><h6>Site web</h6><p>https://www.jobbo.com</p></div>
                        </div>
                    </div>
                    <div class="pg-side-block-buttons">
                        <div class="single-button"><a href="{{ route('site.contact') }}" class="btn fw-medium btn-primary full-width">
                            <i class="fa-solid fa-comments me-2"></i>Laissez moi un Message</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        &nbsp;

        <form id="add-to-cart" method="POST">
            @csrf
            <input type="hidden" name="product_id" value="{{ $product->id }}" />
            <div class="detail-side-block bg-white mb-4">
                <div class="detail-side-heads mb-2">
                    <h3>{{ $product->price . ' XAF' }}</h3>
                    <p class="text-primary">{{ $product->libelle }}</p>
                </div>
                <div class="detail-side-middle">
                    <div class="form-floating mb-3">
                        <input type="number" class="form-control" name="quantity" placeholder="Quantité" min="1">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary full-width fw-medium font-sm">Ajouter au Panier</button>
                    </div>
                </div>
            </div>
        </form>


    </div>
</div>
<!-- =============================== Job Detail ================================== -->

</div>



@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function updateCartCount() {
        $.ajax({
            url: '{{ route('site.cart.count') }}',
            method: 'GET',
            success: function(data) {
                $('.new-cart').text(data.count);
            }
        });
    }

    $(document).ready(function() {
        updateCartCount();

        // Handle Add to Cart form submission
        $('#add-to-cart').on('submit', function(e) {
            e.preventDefault();

            var formData = $(this).serialize(); // Serialize form data to send via Ajax

            $.ajax({
                url: '{{ route('site.cart.add', $product->id) }}', // Use the correct route
                method: 'POST',
                data: formData,
                success: function(response) {
                    updateCartCount();
                    Swal.fire({
                        icon: 'success',
                        title: 'Produit ajouté',
                        text: 'Le produit a été ajouté au panier avec succès!',
                        showConfirmButton: false,
                        timer: 1500
                    });
                },
                error: function(response) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: 'Impossible d\'ajouter le produit au panier.',
                    });
                }
            });
        });

        // Handle Remove from Cart button
        $('.remove-from-cart-button').on('click', function(e) {
            e.preventDefault();
            var productId = $(this).data('product-id');

            $.ajax({
                url: '{{ route('site.cart.remove', '') }}/' + productId,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    updateCartCount();
                    Swal.fire({
                        icon: 'success',
                        title: 'Produit supprimé',
                        text: 'Le produit a été retiré du panier.',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    // Optionally remove the item from the DOM
                    $(this).closest('.cart-item').remove();
                },
                error: function(response) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: 'Impossible de retirer le produit du panier.',
                    });
                }
            });
        });
    });
</script>
@endsection