@extends('layouts.app')

@section('content')
    <div class="container my-4">

        <div class="card shadow-sm mb-4"
            style="background: url('{{ asset('uploads/vendors/' . $vendor->banner_image) }}') no-repeat center center/cover;">
            <div class="row g-0 align-items-center bg-dark bg-opacity-50 text-white rounded">
                <div class="col-md-2 text-center p-3">
                    <img src="{{ asset('uploads/vendors/' . $vendor->vendor_image) }}" class="img-fluid rounded-circle border"
                        alt="Logo Tienda">
                </div>
                <div class="col-md-10">
                    <div class="card-body">
                        <h2 class="card-title mb-1">{{ $vendor->display_name }}</h2>
                        <p class="mb-2">
                            <i class="bi bi-geo-alt"></i> {{ $vendor->address->city }}
                        </p>
                        {{-- <p class="mb-0">
                            Bienvenido a nuestra tienda, aquí encontrarás productos de calidad al mejor precio.
                        </p> --}}
                    </div>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs mb-3" id="storeTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="products-tab" data-bs-toggle="tab" href="#products"
                    role="tab">Productos</a>
            </li>
            {{--<li class="nav-item">
                <a class="nav-link" id="about-tab" data-bs-toggle="tab" href="#about" role="tab">Acerca de</a>
            </li>--}}
            {{-- <li class="nav-item">
            <a class="nav-link" id="reviews-tab" data-bs-toggle="tab" href="#reviews" role="tab">Reseñas</a>
        </li> --}}
        </ul>

        <div class="tab-content" id="storeTabsContent">
            <div class="tab-pane fade show active" id="products" role="tabpanel">
                <div class="row g-3">

                    @forelse ($products as $product)
                        <div class="col-md-4">
                            <div class="card h-100 shadow-sm">
                                <img src="{{ Asset('uploads/products/' . $product->images->first()->image) }}"
                                    class="card-img-top max-image-card"
                                    alt="{{ $product->display_name }}">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $product->display_name }}</h5>
                                    <p class="card-text text-muted">{!! $product->description !!}</p>
                                    <p class="fw-bold text-success">${{ $product->price }}.00</p>
                                    <a href="{{ Route('productDetails', $product->slug) }}"
                                        class="btn btn-primary btn-sm">Ver producto</a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-md-12">
                            <div class="card h-100 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title">Sin productos</h5>
                                </div>
                            </div>
                        </div>
                    @endforelse

                </div>
            </div>

            <div class="tab-pane fade" id="about" role="tabpanel">
                <div class="card shadow-sm p-3">
                    <h5>Sobre la tienda</h5>
                    <p>Me hizo falta un campo de descripcion</p>
                    <p><i class="bi bi-envelope"></i> {{ $vendor->vendor_email }}</p>
                    <p><i class="bi bi-telephone"></i> {{ $vendor->vendor_number }}</p>
                </div>
            </div>
            {{--
            <div class="tab-pane fade" id="reviews" role="tabpanel">
                <div class="card shadow-sm p-3">
                    <h5>Opiniones de clientes</h5>

                    <div class="border-bottom mb-3 pb-2">
                        <strong>Juan Pérez</strong>
                        <span class="text-warning">★★★★☆</span>
                        <p class="mb-0">Muy buenos productos, el envío rápido.</p>
                    </div>

                    <div class="border-bottom mb-3 pb-2">
                        <strong>Ana Gómez</strong>
                        <span class="text-warning">★★★★★</span>
                        <p class="mb-0">Excelente atención y calidad.</p>
                    </div>

                    <div>
                        <strong>Carlos López</strong>
                        <span class="text-warning">★★★☆☆</span>
                        <p class="mb-0">El producto cumplió, pero tardó un poco en llegar.</p>
                    </div>

                </div>
            </div>
            --}}
        </div>
    </div>
@endsection