@extends('layouts.frontend')

@section('title', $produk->nama_produk)

@section('content')

    {{-- BREADCRUMB --}}
    <div class="container-fluid py-3 mb-3">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-decoration-none">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('shop') }}" class="text-decoration-none">Belanja</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($produk->nama_produk, 40) }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="container pb-5">
        <div class="row g-4 g-lg-5">

            {{-- GALERI PRODUK --}}
            <div class="col-lg-5">
                <div class="sticky-top" style="top: 120px; z-index: 1;">

                    {{-- GAMBAR UTAMA (BESAR) --}}
                    <div class="card border-0 rounded-4 shadow-sm overflow-hidden mb-3">
                        <div class="ratio ratio-4x3 bg-light">
                            <img id="main-image"
                                src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : asset('template/frontend/img/no-image.jpg') }}"
                                class="object-fit-cover cursor-pointer" alt="{{ $produk->nama_produk }}"
                                onerror="this.src='{{ asset('template/frontend/img/no-image.jpg') }}';">
                        </div>
                    </div>

                    {{-- THUMBNAIL (GAMBAR KECIL) --}}
                    <div class="d-flex gap-2 overflow-auto pb-2" style="scrollbar-width: thin;">

                        @if($produk->foto_produk)
                            <div class="flex-shrink-0" style="width: 80px; height: 80px;">
                                <img src="{{ asset('storage/' . $produk->foto_produk) }}"
                                    class="img-thumbnail w-100 h-100 object-fit-cover rounded-3 border-primary thumbnail-active"
                                    onclick="changeImage(this)" style="cursor: pointer; border-width: 2px;">
                            </div>
                        @endif

                        @if($produk->images && $produk->images->count() > 0)
                            @foreach($produk->images as $img)
                                <div class="flex-shrink-0" style="width: 80px; height: 80px;">
                                    <img src="{{ asset('storage/' . $img->foto) }}"
                                        class="img-thumbnail w-100 h-100 object-fit-cover rounded-3 border-0 opacity-75"
                                        onclick="changeImage(this)" style="cursor: pointer; transition: all 0.2s;">
                                </div>
                            @endforeach
                        @endif

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


            {{-- INFO & AKSI --}}
            <div class="col-lg-7">
                <div class="ps-lg-4">

                    {{-- Kategori Badge --}}
                    <div class="mb-3">
                        <span
                            class="badge bg-primary bg-opacity-10 px-3 py-2 rounded-pill fw-bold border border-primary border-opacity-10">
                            <i class="fas fa-tag me-1"></i> {{ $produk->kategori->nama_kategori ?? 'Sayur & Buah' }}
                        </span>
                    </div>

                    {{-- Nama Produk --}}
                    <h1 class="display-6 fw-bold text-dark mb-2">{{ $produk->nama_produk }}</h1>

                    {{-- Harga --}}
                    <div class="d-flex align-items-baseline gap-2 mb-4 pb-4 border-bottom">
                        <h3 class="text-primary fw-bold mb-0">
                            Rp {{ number_format($produk->harga, 0, ',', '.') }}
                        </h3>
                        <span class="text-muted fs-5">/ kg</span>
                    </div>

                    {{-- Deskripsi --}}
                    <div class="mb-4">
                        <h6 class="fw-bold text-dark">Deskripsi Produk</h6>
                        <p class="text-black-50 small mb-0" style="line-height: 1.8;">
                            {{ $produk->deskripsi }}
                        </p>
                    </div>

                    {{-- Info Penjual --}}
                    <div class="d-flex align-items-center bg-light border rounded-3 p-3 mb-4">
                        <div class="bg-white rounded-circle p-2 me-3 shadow-sm text-primary d-flex align-items-center justify-content-center"
                            style="width: 45px; height: 45px;">
                            <i class="fas fa-store fs-5"></i>
                        </div>
                        <div class="flex-grow-1">
                            <p class="text-muted small mb-0 fw-bold text-uppercase" style="font-size: 0.7rem;">Dijual Oleh
                            </p>
                            <h6 class="fw-bold text-dark mb-0">{{ $produk->petani->nama_lengkap ?? 'Petani Mitra' }}</h6>
                        </div>
                        <button type="button" class="btn btn-outline-success btn-sm rounded-pill px-3 fw-bold"
                            data-bs-toggle="modal" data-bs-target="#chatModal">
                            <i class="fab fa-whatsapp me-1"></i> Chat
                        </button>
                    </div>

                    {{-- FORM PEMBELIAN --}}
                    <form action="{{ route('cart.add') }}" method="POST">
                        @csrf
                        <input type="hidden" name="id" value="{{ $produk->id }}">

                        <div class="mb-4">
                            {{-- Input Jumlah --}}
                            <div class="mb-3">
                                <label class="form-label small fw-bold text-muted text-uppercase mb-2">Atur Jumlah</label>
                                <div class="d-flex align-items-center">
                                    <div class="input-group" style="max-width: 180px;">
                                        <button type="button" class="btn btn-outline-primary" onclick="updateQty(-1)">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <input type="text" class="form-control text-center fw-bold bg-white"
                                            id="display-qty" value="1" readonly>
                                        <input type="hidden" name="qty" id="real-input-qty" value="1" min="1"
                                            max="{{ $produk->stok }}">
                                        <button type="button" class="btn btn-outline-primary" onclick="updateQty(1)">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                    <div class="ms-3 small text-muted">
                                        Stok: <span class="fw-bold text-dark">{{ $produk->stok }} Kg</span>
                                    </div>
                                </div>
                            </div>

                            {{-- Tombol Aksi --}}
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary rounded-pill py-2 shadow-sm fw-bold fs-6"
                                    style="height: 50px;">
                                    <i class="fas fa-cart-plus me-2"></i> Masukkan Keranjang
                                </button>
                                <a href="javascript:void(0);" onclick="beliLangsung()"
                                    class="btn btn-outline-dark rounded-pill py-2 border-2 fw-bold fs-6"
                                    style="height: 50px; line-height: 32px;">
                                    Beli Sekarang
                                </a>
                            </div>
                        </div>

                        {{-- Footer Info --}}
                        <div class="d-flex gap-4 pt-3 border-top">
                            <div class="d-flex align-items-center text-muted small">
                                <i class="fas fa-truck me-2 text-primary"></i> Pengiriman Cepat
                            </div>
                            <div class="d-flex align-items-center text-muted small">
                                <i class="fas fa-shield-alt me-2 text-primary"></i> Produk Segar
                            </div>
                        </div>
                    </form>

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


        {{-- BAGIAN PRODUK TERKAIT --}}
        @if (isset($produk_terkait) && $produk_terkait->count() > 0)
            <div class="mt-5 pt-4 border-top">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <h4 class="fw-bold m-0 text-dark">Produk Sejenis</h4>
                    <a href="{{ route('shop') }}" class="btn btn-sm btn-outline-primary rounded-pill px-3">
                        Lihat Lainnya <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>

                <div class="row g-4">
                    @foreach ($produk_terkait as $produk)
                        <div class="col-6 col-md-3">
                            <a href="{{ route('produk.detail', $produk->id) }}" class="text-decoration-none">
                                <div class="card border-0 shadow-sm h-100 product-card">
                                    <!-- Stock Badge -->
                                    <div class="position-absolute top-0 end-0 m-2 z-1">
                                        <span class="badge bg-warning text-dark">
                                            Stok: {{ $produk->stok }} Kg
                                        </span>
                                    </div>

                                    <!-- Image -->
                                    <div class="overflow-hidden" style="height: 200px;">
                                        <img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : 'https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=800&auto=format&fit=crop' }}"
                                            class="card-img-top w-100 h-100" alt="{{ $produk->nama_produk }}"
                                            style="object-fit: cover;">
                                    </div>

                                    <div class="card-body d-flex justify-content-between flex-column p-3">
                                        <div>
                                            <span class="badge bg-success mb-2">{{ $produk->kategori ?? 'Umum' }}</span>
                                            <h6 class="fw-bold mb-2">{{ $produk->nama_produk }}</h6>
                                            <p class="text-muted small mb-3">{{ Str::limit($produk->deskripsi, 60) }}</p>
                                        </div>

                                        <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                                            <div>
                                                <small class="text-muted">Harga/Kg</small>
                                                <h6 class="fw-bold text-success mb-0">
                                                    Rp {{ number_format($produk->harga, 0, ',', '.') }}
                                                </h6>
                                            </div>
                                            <a href="{{ route('produk.detail', $produk->id) }}"
                                                class="btn btn-success btn-sm rounded-pill">
                                                <i class="fa fa-eye"></i> Detail
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>

    {{-- MODAL CHAT --}}
    <div class="modal fade" id="chatModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-3">
                <div class="modal-header bg-primary text-white border-0">
                    <h5 class="modal-title fw-semibold text-white">
                        <i class="fab fa-whatsapp me-2"></i>Hubungi Penjual
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form action="{{ route('pesan.kirim') }}" method="POST">
                    @csrf
                    <div class="modal-body p-4">
                        <input type="hidden" name="penerima_id" value="{{ $produk->petani_id }}">
                        <input type="hidden" name="penerima_type" value="App\Models\Petani">

                        <div class="mb-3">
                            <label class="form-label fw-bold">Kepada:</label>
                            <input type="text" class="form-control"
                                value="{{ $produk->petani->nama_lengkap ?? 'Petani Mitra' }}" readonly>
                        </div>

                        <div class="mb-0">
                            <label class="form-label fw-bold">Pesan Anda:</label>
                            <textarea name="isi_pesan" class="form-control" rows="4" required
                                placeholder="Contoh: Halo, apakah stok untuk produk {{ $produk->nama_produk }} masih tersedia?"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0 px-4 pb-4 pt-0">
                        <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">
                            <i class="fab fa-whatsapp me-2"></i>Kirim Pesan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script>
        const hargaSatuan = {{ $produk->harga }};

        function updateQty(change) {
            let display = document.getElementById('display-qty');
            let input = document.getElementById('real-input-qty');
            let subtotalEl = document.getElementById('subtotal');

            let currentVal = parseInt(input.value);
            let newVal = currentVal + change;
            let max = parseInt(input.getAttribute('max'));

            if (newVal >= 1 && newVal <= max) {
                input.value = newVal;
                display.value = newVal;

                // Update subtotal
                let subtotal = newVal * hargaSatuan;
                subtotalEl.textContent = 'Rp ' + subtotal.toLocaleString('id-ID');
            }
        }

        function beliLangsung() {
            let qty = document.getElementById('real-input-qty').value;
            let produkId = "{{ $produk->id }}";
            window.location.href = "{{ route('checkout') }}?produk_id=" + produkId + "&qty=" + qty;
        }

        // FUNGSI GANTI GAMBAR GALERI
        function changeImage(element) {
            document.getElementById('main-image').src = element.src;

            let thumbnails = document.querySelectorAll('.img-thumbnail');
            thumbnails.forEach(img => {
                img.classList.remove('border-primary', 'thumbnail-active');
                img.classList.add('border-0', 'opacity-75');
                img.style.borderWidth = '1px';
            });

            // Highlight thumbnail yang sedang aktif
            element.classList.remove('border-0', 'opacity-75');
            element.classList.add('border-primary', 'thumbnail-active');
            element.style.borderWidth = '2px';
            element.style.opacity = '1';
        }
    </script>
@endsection