@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">
                        <h6 class="fw-bold text-dark mb-0">{{ $produk->petani->nama_lengkap ?? 'Petani Mitra' }}</h6>
                        <small class="text-muted d-block" style="font-size: 0.8rem;">
                            <i class="fas fa-map-marker-alt text-danger me-1"></i>
                            {{ Str::limit($produk->petani->alamat ?? 'Alamat tidak tersedia', 35) }}
                        </small>
                    </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>

                {{-- Link Maps --}}
                @if(isset($produk->petani->link_maps) && $produk->petani->link_maps != '')
                <a href="{{ $produk->petani->link_maps }}" target="_blank"
                    class="btn btn-light border-danger text-danger border fw-bold mb-4 w-100 text-start shadow-sm"
                    style="border-radius: 10px;">
                    <i class="fas fa-map-marker-alt me-2 fs-5 align-middle"></i>
                    Lihat Lokasi Lahan di Google Maps
                    <i class="fas fa-external-link-alt float-end mt-1 text-muted opacity-50"></i>
                </a>
                @endif

                {{-- 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">
            @include('landing.partials.product_list', ['produks' => $produk_terkait])
        </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