@extends('user_layout.app')

@section('content')
<style>
.product-slider { border: 1px solid #eee; padding: 15px; }
.zoom-container { overflow: hidden; }
.zoom-container img { transition: transform 0.4s ease; }
.zoom-container:hover img { transform: scale(1.2); }

.thumb-img { border: 1px solid #ddd; padding: 5px; cursor: pointer; }
.thumb-img img { width: 100%; height: 70px; object-fit: cover; }
.thumb-img.active { border: 2px solid #000; }

.product-title { font-size: 30px; font-weight: bold; margin-top: 15px; }
.price-range { font-size: 28px; color: #d63339; font-weight: bold; }
.section-heading { font-weight: bold; margin-top: 25px; }
</style>

<section class="product-page">
    <div class="container py-5">
        <div class="row">

            {{-- LEFT: Images --}}
            <div class="col-md-5">

                <!-- MAIN SLIDER -->
                <div id="productSlider" class="carousel slide product-slider mb-3" data-ride="carousel">
                    <div class="carousel-inner">

                        @forelse($product->images as $key => $image)
                            <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                <div class="zoom-container text-center">
                                    <img src="{{ asset('uploads/products/images/' . $image->image) }}"
                                         class="img-fluid"
                                         alt="{{ $product->name }}">
                                </div>
                            </div>
                        @empty
                            <div class="carousel-item active">
                                <div class="zoom-container text-center">
                                    <img src="{{ asset('user_assets/images/no-image.png') }}"
                                         class="img-fluid"
                                         alt="No Image">
                                </div>
                            </div>
                        @endforelse

                    </div>

                    {{-- Controls (only if more than 1 image) --}}
                    @if($product->images->count() > 1)
                        <a class="carousel-control-prev" href="#productSlider" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#productSlider" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    @endif
                </div>

                <!-- THUMBNAILS -->
                @if($product->images->count() > 0)
                    <div class="row">
                        @foreach($product->images as $key => $image)
                            <div class="col-3 mb-2">
                                <div class="thumb-img {{ $key == 0 ? 'active' : '' }}"
                                     data-target="#productSlider"
                                     data-slide-to="{{ $key }}">
                                    <img src="{{ asset('uploads/products/images/' . $image->image) }}"
                                         alt="thumb">
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

            </div>

            {{-- RIGHT: Product Details --}}
            <div class="col-md-7">
                <ol class="breadcrumb mb-2">
                    <li class="breadcrumb-item">
                        <a href="{{ route('user.online_shop') }}">Shop</a>
                    </li>
                    <li class="breadcrumb-item active">
                        {{ $product->category->name ?? 'Product' }}
                    </li>
                </ol>

                <h1 class="product-title">{{ $product->name }}</h1>

                <p class="price-range">
                    QR {{ number_format($product->special_price, 2) }}
                    – QR {{ number_format($product->standard_price, 2) }}
                </p>

                <p>{{ $product->description }}</p>

                {{-- Alerts --}}
                @if(session('success'))
                    <div class="alert alert-success mt-3">
                        {{ session('success') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger mt-3">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                {{-- Qty + Get Quote --}}
                <div class="d-flex align-items-center mt-3">
                    <input id="quoteQty" type="number" class="form-control w-25" min="1" value="1">
                    <button type="button"
                            class="btn btn-danger ml-3"
                            data-toggle="modal"
                            data-target="#quoteModal">
                        Get Quote
                    </button>
                </div>

                <p class="mt-3"><a href="#" class="text-muted">♡ Add to Wishlist</a></p>
            </div>

        </div>

        {{-- TABS --}}
        <div class="row">
            <div class="col-12 mt-5">
                <ul class="nav nav-tabs" id="productTab" role="tablist">
                    <li class="nav-item">
                        {{-- Tab Name Changed Here --}}
                        <a class="nav-link active" id="overview-tab" data-toggle="tab" href="#overview" role="tab">
                            Overview
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" id="additional-tab" data-toggle="tab" href="#additional" role="tab">
                            Additional Information
                        </a>
                    </li>
                </ul>

                <div class="tab-content p-3 border border-top-0" id="productTabContent">
                    <div class="tab-pane fade show active" id="overview" role="tabpanel">
                        {{-- You can replace this with dynamic field if you have --}}
                        <p>{{ $product->description }}</p>
                    </div>

                    <div class="tab-pane fade" id="additional" role="tabpanel">
                        {{-- Example table --}}
                        <table class="table table-bordered">
                            <tr>
                                <th>Category</th>
                                <td>{{ $product->category->name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Special Price</th>
                                <td>QR {{ number_format($product->special_price, 2) }}</td>
                            </tr>
                            <tr>
                                <th>Standard Price</th>
                                <td>QR {{ number_format($product->standard_price, 2) }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<!-- GET QUOTE MODAL -->
<div class="modal fade" id="quoteModal" tabindex="-1" role="dialog" aria-labelledby="quoteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form method="POST" action="{{ route('quote.product.store') }}" class="modal-content">
      @csrf

      <div class="modal-header">
        <h5 class="modal-title" id="quoteModalLabel">Get Quote</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">

        <div class="mb-2">
          <strong>Product:</strong> {{ $product->name }}
        </div>

        <input type="hidden" name="product_id" value="{{ $product->id }}">
        <input type="hidden" name="qty" id="modalQty" value="1">

        <div class="form-group">
          <label>Name <span class="text-danger">*</span></label>
          <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
        </div>

        <div class="form-group">
          <label>Email</label>
          <input type="email" name="email" class="form-control" value="{{ old('email') }}">
        </div>

        <div class="form-group">
          <label>Phone <span class="text-danger">*</span></label>
          <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" required>
        </div>

        <div class="form-group">
          <label>Note (optional)</label>
          <textarea name="note" class="form-control" rows="3">{{ old('note') }}</textarea>
        </div>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-danger">Submit</button>
      </div>

    </form>
  </div>
</div>
@endsection


@push('script')
<script>
$(document).ready(function () {

    // Thumbnail click -> active border
    $(document).on('click', '.thumb-img', function () {
        $('.thumb-img').removeClass('active');
        $(this).addClass('active');
    });

    // Slide change -> auto active thumb sync
    $('#productSlider').on('slid.bs.carousel', function (e) {
        var index = $(e.relatedTarget).index();
        $('.thumb-img').removeClass('active');
        $('.thumb-img[data-slide-to="' + index + '"]').addClass('active');
    });

    // When modal opens, copy qty from page input -> hidden qty in modal
    $('#quoteModal').on('show.bs.modal', function () {
        var qty = parseInt($('#quoteQty').val() || 1);
        if (qty < 1) qty = 1;
        $('#modalQty').val(qty);
    });

    // If validation fails, reopen modal automatically
    @if ($errors->any())
        $('#quoteModal').modal('show');
    @endif

});
</script>

{{-- If already in layout then REMOVE this --}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
@endpush