@extends('layouts.frontend')

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

@section('content')

    <div class="container-fluid bg-light py-3 mb-4">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-muted text-decoration-none">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ route('shop') }}"
                            class="text-muted text-decoration-none">Belanja</a></li>
                    <li class="breadcrumb-item active text-primary fw-bold" aria-current="page">{{ $produk->nama_produk }}
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="container pb-5">
        <div class="row g-5">
            <div class="col-lg-6">
                <div class="rounded-4 overflow-hidden shadow-sm border position-relative bg-white">
                    <img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
                        class="img-fluid w-100" style="object-fit: cover; max-height: 500px;"
                        alt="{{ $produk->nama_produk }}">

                    <div class="position-absolute top-0 start-0 m-3">
                        @if ($produk->stok > 0)
                            <span class="badge bg-primary shadow-sm px-3 py-2 rounded-pill">Stok Tersedia</span>
                        @else
                            <span class="badge bg-danger shadow-sm px-3 py-2 rounded-pill">Stok Habis</span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="h-100 d-flex flex-column justify-content-center">

                    <div class="mb-2">
                        <span
                            class="badge bg-light text-dark border border-secondary text-uppercase px-3 py-2 rounded-pill fw-bold">
                            {{ $produk->kategori ?? 'Hasil Tani' }}
                        </span>
                    </div>

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

                    <div class="mb-4">
                        <h2 class="fw-bold text-primary display-5 mb-0">
                            Rp {{ number_format($produk->harga, 0, ',', '.') }}
                            <span class="fs-6 text-muted fw-normal">/ kg</span>
                        </h2>
                    </div>

                    <p class="text-secondary mb-4" style="line-height: 1.8; font-size: 1.05rem;">
                        {{ $produk->deskripsi }}
                    </p>

                    <div class="d-flex align-items-center bg-white border rounded-4 p-3 mb-4 shadow-sm">
                        <div class="bg-light rounded-circle p-2 me-3 d-flex align-items-center justify-content-center text-primary"
                            style="width: 50px; height: 50px;">
                            <i class="fas fa-user-tie fs-4"></i>
                        </div>
                        <div class="flex-grow-1">
                            <p class="mb-0 text-muted small">Dijual oleh:</p>
                            <h6 class="mb-0 fw-bold text-dark">{{ $produk->petani->nama_lengkap ?? 'Petani Mitra' }}</h6>
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3"
                            data-bs-toggle="modal" data-bs-target="#chatModal">
                            <i class="fas fa-comment-dots me-1"></i> Chat
                        </button>
                    </div>

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

                        <div class="d-flex align-items-center mb-4 flex-wrap gap-3">
                            <div class="input-group shadow-sm" style="width: 140px;">
                                <button type="button" class="btn btn-light border" onclick="updateQty(-1)">
                                    <i class="fa fa-minus small"></i>
                                </button>
                                <input type="number" name="qty" id="input-qty"
                                    class="form-control text-center bg-white border-top border-bottom border-0"
                                    value="1" min="1" max="{{ $produk->stok }}" readonly>
                                <button type="button" class="btn btn-light border" onclick="updateQty(1)">
                                    <i class="fa fa-plus small"></i>
                                </button>
                            </div>
                            <span class="text-muted small">
                                Sisa Stok: <strong class="text-dark">{{ $produk->stok }} Kg</strong>
                            </span>
                        </div>

                        <div class="d-grid gap-2 d-sm-flex">
                            <button type="submit" class="btn btn-primary btn-lg rounded-pill px-5 shadow-sm flex-grow-1">
                                <i class="fa fa-shopping-basket me-2"></i> + Keranjang
                            </button>

                            <a href="javascript:void(0);" onclick="beliLangsung()"
                                class="btn btn-outline-secondary btn-lg rounded-pill px-4 flex-grow-1">
                                Beli Langsung
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @if (isset($produk_terkait) && count($produk_terkait) > 0)
            <div class="mt-5 pt-5 border-top">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <h3 class="fw-bold m-0 text-dark">Produk Sejenis</h3>
                    <a href="{{ route('shop') }}" class="text-primary text-decoration-none fw-bold small">
                        Lihat Semua <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>

                <div class="row g-4">
                    @foreach ($produk_terkait as $related)
                        <div class="col-6 col-md-3">
                            <a href="{{ route('produk.detail', $related->id) }}" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm overflow-hidden rounded-4">
                                    <div class="position-relative">
                                        <img src="{{ $related->foto_produk ? asset('storage/' . $related->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
                                            class="card-img-top" style="height: 200px; object-fit: cover;"
                                            alt="{{ $related->nama_produk }}">
                                    </div>
                                    <div class="card-body p-3">
                                        <h6 class="fw-bold text-dark mb-1 text-truncate">{{ $related->nama_produk }}</h6>
                                        <p class="text-primary fw-bold mb-0">Rp
                                            {{ number_format($related->harga, 0, ',', '.') }}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>

    <div class="modal fade" id="chatModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header bg-primary text-white border-0 rounded-top-4">
                    <h5 class="modal-title fw-bold">Hubungi Petani</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></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 small text-muted text-uppercase">Pesan Anda</label>
                            <textarea name="isi_pesan" class="form-control bg-light border-0 rounded-3 p-3" rows="4" required
                                placeholder="Halo, saya tertarik dengan produk ini..."></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 shadow-sm">
                            <i class="fas fa-paper-plane me-2"></i> Kirim Pesan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        // Fungsi untuk update input number 
        function updateQty(change) {
            let input = document.getElementById('input-qty');
            let newVal = parseInt(input.value) + change;
            let max = parseInt(input.getAttribute('max'));

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

        // Redirect dengan membawa QTY
        function beliLangsung() {
            let qty = document.getElementById('input-qty').value;
            let produkId = "{{ $produk->id }}";
            window.location.href = "{{ route('checkout') }}?produk_id=" + produkId + "&qty=" + qty;
        }
    </script>
@endsection