@extends('layouts.frontend.app')
@section('content')

<style>
           .share-modal {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        .share-modal .modal-content {
            border: none;
            /* border-radius: 20px; */
            background: white;
            width: 450px;
        }

        .share-modal .modal-header {
            border: none;
            padding: 30px 30px 0 30px;
            background: white;
            position: relative;
        }

        .share-icon {
            width: 80px;
            height: 80px;
            background: #f8f9fa;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 5px auto;
            border: 2px solid #e9ecef;
        }

        .share-icon i {
            font-size: 32px;
            color: #6c757d;
        }

        .modal-title {
            font-size: 28px;
            font-weight: 700;
            color: #212529;
            text-align: center;
            width: 100%;
            margin-bottom: 10px;
        }

        .modal-subtitle {
            color: #6c757d;
            font-size: 16px;
            text-align: center;
            line-height: 1.5;
            margin-bottom: 0;
        }

        .btn-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: #f8f9fa;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .btn-close:hover {
            opacity: 1;
            background: #e9ecef;
            transform: scale(1.05);
        }

        .share-modal .modal-body {
    padding: 10px 30px;
        }

        .link-section {
            margin-bottom: 35px;
        }

        .link-label {
            font-weight: 600;
            color: #212529;
            margin-bottom: 12px;
            font-size: 16px;
        }

        .link-container {
            position: relative;
            background: #f8f9fa;
            border-radius: 12px;
            padding: 16px 50px 16px 16px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }

        .link-container:hover {
            border-color: #667eea;
            background: #f8f9fc;
        }

        .link-text {
            font-size: 15px;
            color: #495057;
            margin: 0;
            word-break: break-all;
            font-family: 'Monaco', 'Menlo', monospace;
        }

        .copy-button {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: #667eea;
            border: none;
            border-radius: 8px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .copy-button:hover {
            background: #5a67d8;
            transform: translateY(-50%) scale(1.05);
        }

        .copy-button:active {
            transform: translateY(-50%) scale(0.95);
        }

        .social-section {
            margin-top: 35px;
        }

        .social-label {
            font-weight: 600;
            color: #212529;
            /* margin-bottom: 20px; */
            font-size: 16px;
        }

        .social-buttons {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
        }

        .social-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 15px 10px;
            border-radius: 12px;
        }

        .social-btn:hover {
            transform: translateY(-3px);
            text-decoration: none;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            transition: all 0.3s ease;
        }

        .social-btn:hover .social-icon {
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

        .social-icon i {
            font-size: 18px;
            color: white;
        }

        .social-label-text {
            font-size: 12px;
            font-weight: 500;
            color: #495057;
            margin: 0;
        }

        /* Social Media Colors */
        .facebook .social-icon {
            background: #1877f2;
        }

        .twitter .social-icon {
            background: #000000;
        }

        .whatsapp .social-icon {
            background: #25d366;
        }

        .telegram .social-icon {
            background: #0088cc;
        }

        .linkedin .social-icon {
            background: #0077b5;
        }

        .copy-feedback {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #28a745;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transform: translateX(400px);
            transition: transform 0.3s ease;
            z-index: 10000;
        }

        .copy-feedback.show {
            transform: translateX(0);
        }

        @media (max-width: 768px) {
            .share-modal .modal-dialog {
                margin: 15px;
            }
            
            .share-modal .modal-header,
            .share-modal .modal-body {
                padding: 20px;
            }
            
            .social-buttons {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }
            
            .social-icon {
                width: 40px;
                height: 40px;
            }
            
            .social-icon i {
                font-size: 20px;
            }
        }
  .section--checkout{
    padding:60px 0px;
  }
  .cart-wrapper{
  .action-links{
        margin-top: 10px;
    display: flex
;
    align-items: center;
  }
  }

    .product-share { margin-top: 20px; }
    .product-share ul { list-style: none; padding: 0; display: flex; gap: 15px; }
    .product-share ul li a { text-decoration: none; font-size: 14px; color: #333; }
    .product-share ul li a:hover { color: #007bff; }
    .product-share i { margin-right: 5px; }

     .email .social-icon {
        background: #007bff
    }

</style>


<section class='section--checkout pt-0 setion-cform '>
<section class="about-section">

    <div class="container">
        <div class="row">
            <div class="col-md-6 about-frist-row">
                <a href="/" class="back-btn">
                    <span class="svg-ic">
                       <i class="bi bi-arrow-left-circle"></i>
                    </span>
                    Back to Home
                </a>
                <h1><i class="fas fa-shopping-cart me-2"></i> Your Shopping Cart</h1>
    <p class="mb-0">Review your items and proceed to checkout</p>
            </div>
        </div>
    </div>
</section>
<div class="container checkout-container py-5">
  <!-- Header -->


  <div class="row g-4">
   
    <!-- Left: Cart Items -->


<div class="col-lg-8">
    <h4>Your Cart</h4>
    <div id="cartItems">
        @if(count($cartItems->where('type','cart')) > 0)
            @foreach($cartItems->where('type','cart') as $item)
                <div class="cart-wrapper removeRowWithAjax" data-cart-id="{{ $item->id }}">
                    <div class="row mb-4">
                        <div class="col-md-2">
                            <div class="product-image">
                             <a href="{{route('product.details',['slug'=>$item->product->slug])}}">
                                <img src="{{ asset('uploads/products/' . ($item->product->primary_image ?? 'comming.jpg')) }}" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <h3 class="book-title">{{ $item->product->title ?? 'No Name' }}</h3>
                            <p class="author mb-1 my-2">{{ $item->product->publisher_name }}</p>
                            <p class="author mb-0">{{ $item->product->contributor_full_name_inverted }}</p>
                            <p class="stock mb-0">
                                <i class="bi bi-check-circle-fill"></i> In Stock ({{ $item->product->available }})
                            </p>

                            <div class="action-links">
                                <button onclick="removeCartItem('{{ $item->id }}')" class="btn btn-sm btn-danger">
                                    <i class="fas fa-trash-alt"></i> Remove
                                </button>
                                
                                <a onclick="saveForLater('{{ $item->id }}')" class="btn btn-sm btn-secondary">
                                    <i class="fas fa-bookmark"></i> Save for Later
                                </a>
                               <!-- Share Button -->
                               <a href="#" 
                                data-bs-toggle="modal" 
                                data-bs-target="#shareModal"
                                data-slug="{{ route('product.details',['slug'=>$item->product->slug]) }}">
                                <i class="fas fa-share-alt"></i> Share
                                </a>

                            </div>
                        </div>
                        @php
                            $priceAmount = $item->product->price_amount;
                            $discountPercent = $item->product->discount_price ?? 0;
                            $finalPrice = $priceAmount - ($priceAmount * $discountPercent / 100);
                        @endphp
                       <div class="col-md-3 text-md-end">
                          <span class="price" id="price-{{ $item->id }}">₹{{ number_format($finalPrice * $item->quantity), 2 }}</span>
                                <div class="quantity-selector justify-content-md-end">
                                    <div class="quantity-btn decrease" data-id="{{ $item->id }}">-</div>
                                    <input type="text" class="quantity-input" id="qty-{{ $item->id }}" value="{{ $item->quantity }}" readonly>
                                    <div class="quantity-btn increase" data-id="{{ $item->id }}">+</div>
                                </div>

                        </div>

                    </div>
                    <hr>
                </div>
            @endforeach
        @else
            <p>Your cart is empty.</p>
        @endif
    </div>

    <h4>Saved for Later</h4>
    <div id="savedItems">
        @if(count($savedItems) > 0)
            @foreach($savedItems as $item)
                <div class="cart-wrapper removeRowWithAjax" data-cart-id="{{ $item->id }}">
                    <div class="row mb-4">
                        <div class="col-md-2">
                            <div class="product-image">
                               <a href="{{route('product.details',['slug'=>$item->product->slug])}}">
                                <img src="{{ asset('uploads/products/' . ($item->product->primary_image ?? 'comming.jpg')) }}" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <h3 class="book-title">{{ $item->product->title ?? 'No Name' }}</h3>
                            <p class="author mb-1 my-2">{{ $item->product->publisher_name }}</p>
                            <p class="author mb-0">{{ $item->product->contributor_full_name_inverted }}</p>

                            <div class="action-links">
                                <button onclick="removeCartItem('{{ $item->id }}')" class="btn btn-sm btn-danger">
                                    <i class="fas fa-trash-alt"></i> Remove
                                </button>
                                <button onclick="moveToCart('{{ $item->id }}')" class="btn btn-sm btn-success">
                                    <i class="fas fa-cart-plus"></i> Move to Cart
                                </button>
                            </div>
                        </div>
                        <div class="col-md-3 text-md-end">
                            <span class="price" id="price-{{ $item->id }}">₹{{ number_format($item->product->price_amount),2 }}</span>
                        </div>
                    </div>
                    <hr>
                </div>
            @endforeach
        @else
            <p>No items saved for later.</p>
        @endif
    </div>
</div>

@if(count($cartItems) > 0)
<div class="col-lg-4">
    <div class="summary-card">
        <h4>Order Summary</h4>
        <div class="summary-item">
            <span id="cart_count">Items ({{ $cartItems->sum('quantity') }})</span>
            <span id="cartSubtotal">₹{{number_format($subtotal),2}}</span>
        </div>
        <hr>
        <div class="summary-total d-flex justify-content-between">
            <span>Total:</span>
            <span id="cartTotal">₹{{number_format($subtotal),2 }}</span>
        </div>
        <div class="checkout">
            <a href="{{ route('checkout',['type' => 'cart']) }}" class="checkout-btn">Proceed to Checkout</a>
        </div>
        <a href="{{ route('index') }}" class="continue-link">
            <i class="fas fa-arrow-left me-1"></i> Continue Shopping
        </a>
    </div>
</div>
@endif

  </div>
</div>


<!-- Share Modal -->
{{-- <div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="shareModalLabel">Share this product</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body product-share">
        <ul class="list-unstyled d-flex flex-column gap-3">
          <li><a id="copyLink" href="#"><i class="bi bi-link-45deg"></i> Copy Link</a></li>
          <li><a id="whatsappLink" href="#" target="_blank"><i class="bi bi-whatsapp text-success"></i> WhatsApp</a></li>
          <li><a id="facebookLink" href="#" target="_blank"><i class="bi bi-facebook text-primary"></i> Facebook</a></li>
          <li><a id="emailLink" href="#"><i class="bi bi-envelope text-danger"></i> Email</a></li>
        </ul>
      </div>
    </div>
  </div>
</div> --}}
 <div class="modal fade share-modal" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="w-100">
                        <div class="share-icon">
                            <i class="fas fa-link"></i>
                        </div>
                        <h2 class="modal-title" id="shareModalLabel">Share with Friends</h2>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                <div class="link-section">
                    <div class="link-label">Share your link</div>
                    <div class="link-container">
                        <p class="link-text" id="shareLink">https://marinabudarina.design</p>
                        <button class="copy-button" id="copyButton" title="Copy link">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>

                <div class="social-section">
                    <div class="social-label">Share to</div>
                    <div class="social-buttons">
                        <a href="#" class="social-btn facebook" data-platform="facebook">
                            <div class="social-icon"><i class="fab fa-facebook-f"></i></div>
                            {{-- <p class="social-label-text">Facebook</p> --}}
                        </a>
                        <a href="#" class="social-btn twitter" data-platform="twitter">
                            <div class="social-icon"><i class="fab fa-x-twitter"></i></div>
                            {{-- <p class="social-label-text">X</p> --}}
                        </a>
                        <a href="#" class="social-btn whatsapp" data-platform="whatsapp">
                            <div class="social-icon"><i class="fab fa-whatsapp"></i></div>
                            {{-- <p class="social-label-text">WhatsApp</p> --}}
                        </a>
                        {{-- <a href="#" class="social-btn telegram" data-platform="telegram">
                            <div class="social-icon"><i class="fab fa-telegram-plane"></i></div>
                            <p class="social-label-text">Telegram</p>
                        </a> --}}
                        <a href="#" class="social-btn linkedin" data-platform="linkedin">
                            <div class="social-icon"><i class="fab fa-linkedin-in"></i></div>
                            {{-- <p class="social-label-text">LinkedIn</p> --}}
                        </a>
                        <a href="#" class="social-btn email" data-platform="email">
                            <div class="social-icon"><i class="fas fa-envelope"></i></div>
                            {{-- <p class="social-label-text">Email</p> --}}
                        </a>
                    </div>
                </div>
            </div>

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

<script>
 
</script>



@endsection