@extends('layouts.master')

@section('title', $seller->company_name . ' - The Mini Port')

@section('meta_tags')
    <meta name="description" content="{{ $settings->meta_description ?? Str::limit($seller->about, 160) }}">
    <meta property="og:title" content="{{ $settings->meta_title ?? $seller->company_name }}">
@endsection

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<style>
    :root {
        --base-font: 'Inter', sans-serif;
        --display-font: 'Outfit', sans-serif;
        --primary-color: #f97316; /* Orange-500 */
        --primary-hover: #ea580c; /* Orange-600 */
        --secondary-color: #64748b; /* Slate-500 */
    }

    .seller-page { 
        font-family: var(--base-font); 
        color: #1e293b; 
        background-color: #f8fafc;
    }
    
    h1, h2, h3, h4, h5, .display-font { font-family: var(--display-font); }

    /* Seller Header */
    .seller-header { background: white; border-bottom: 1px solid #e2e8f0; padding-top: 1.5rem; padding-bottom: 0px; }
    .seller-logo-box { width: 80px; height: 80px; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 5px; background: white; }
    .seller-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
    
    .company-title { font-size: 1.75rem; font-weight: 800; color: #0f172a; margin-bottom: 0.25rem; line-height: 1.2; }
    .badge-trust { background: #ecfdf5; color: #059669; font-weight: 700; font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #a7f3d0; }
    
    .header-actions .btn-action { font-weight: 700; padding: 0.75rem 2rem; border-radius: 6px; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; }
    
    /* Navigation Tabs */
    .seller-nav { margin-top: 2rem; display: flex; align-items: center; gap: 2rem; border-bottom: 2px solid transparent; }
    .seller-nav-link { color: #64748b; font-weight: 600; padding-bottom: 1rem; text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.2s; }
    .seller-nav-link:hover { color: var(--primary-color); }
    .seller-nav-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
    
    /* Search Bar within Seller */
    .seller-search { position: relative; width: 300px; }
    .seller-search input { padding-left: 2.25rem; border-radius: 99px; background: #f1f5f9; border: 1px solid transparent; font-size: 0.9rem; }
    .seller-search input:focus { background: white; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1); }
    .seller-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }

    /* Content Area */
    .content-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 2rem; margin-bottom: 1.5rem; }
    .section-title { font-size: 1.25rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
    .section-title::before { content: ''; width: 4px; height: 24px; background: var(--primary-color); border-radius: 4px; display: block; }

    /* Highlights Grid */
    .highlight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
    .highlight-item { display: flex; align-items: start; gap: 1rem; }
    .highlight-icon { width: 40px; height: 40px; border-radius: 50%; background: #fef3c7; color: #d97706; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; }
    .highlight-content small { display: block; color: #64748b; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 2px; }
    .highlight-content strong { display: block; color: #1e293b; font-size: 0.95rem; line-height: 1.3; }

    /* Right Sidebar */
    .sidebar-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; margin-bottom: 1.5rem; }
    .sidebar-header { background: #f8fafc; padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; font-weight: 700; color: #1e293b; }
    .sidebar-body { padding: 1.25rem; }

    .contact-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
    .contact-icon { color: var(--primary-color); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
    .contact-text { font-size: 0.9rem; color: #334155; }
    
    .rating-box { background: #fffbeb; border: 1px solid #fcd34d; padding: 0.75rem; border-radius: 6px; text-align: center; margin-bottom: 1rem; }
    .rating-score { font-size: 1.5rem; font-weight: 800; color: #b45309; }
    .rating-stars { color: #f59e0b; }
</style>

<div class="seller-page pb-5">

    <!-- GLOBAL SELLER HEADER -->
    <header class="seller-header">
        <div class="container">
            <div class="row align-items-center g-3">
                <div class="col-md-8">
                    <div class="d-flex align-items-center gap-4">
                        <div class="seller-logo-box">
                             @if($seller->logo)
                                <img src="{{ asset('storage/' . $seller->logo) }}" alt="Logo">
                            @else
                                <span class="fw-bold text-muted fs-4">{{ substr($seller->company_name, 0, 1) }}</span>
                            @endif
                        </div>
                        <div>
                            <h1 class="company-title">{{ $seller->company_name }}</h1>
                            <div class="d-flex flex-wrap align-items-center gap-2">
                                <span class="text-muted small"><i class="bi bi-geo-alt-fill text-danger me-1"></i> {{ $seller->city }}, {{ $seller->state }}, India</span>
                                @if($seller->is_verified)
                                    <span class="badge-trust"><i class="bi bi-patch-check-fill"></i> Trusted Seller</span>
                                @endif
                                <span class="badge bg-light text-dark border"><i class="bi bi-building me-1"></i> Manufacturer</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="d-flex justify-content-md-end gap-2 header-actions">
                        <a href="#contact-sidebar" class="btn btn-action text-white shadow-sm" style="background: var(--primary-color);">Send Inquiry</a>
                        @if($seller->hasActiveSubscription())
                             <a href="tel:{{ $seller->mobile }}" class="btn btn-action btn-outline-dark">View Number</a>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Navigation Row -->
            <div class="d-flex justify-content-between align-items-end mt-2">
                <div class="seller-nav">
                    <a href="{{ route('seller.public.profile', $seller->slug) }}" class="seller-nav-link active">Home</a>
                    <a href="{{ route('seller.public.products', $seller->slug) }}" class="seller-nav-link">Products & Services</a>
                    @if($settings->show_about)<a href="#about" class="seller-nav-link">About Us</a>@endif
                    <a href="#contact-sidebar" class="seller-nav-link">Contact</a>
                </div>
                <div class="pb-3 d-none d-lg-block">
                    <form action="{{ route('seller.public.products', $seller->slug) }}" method="GET" class="seller-search">
                        <i class="bi bi-search"></i>
                        <input type="text" name="q" class="form-control" placeholder="Search in this store...">
                    </form>
                </div>
            </div>
        </div>
    </header>

    <!-- MAIN CONTENT GRID -->
    <div class="container mt-4">
        <div class="row g-4">
            
            <!-- LEFT COLUMN (Content) -->
            <div class="col-lg-9">
                
                <!-- About Section -->
                @if($settings->show_about)
                <div class="content-card" id="about">
                    <h2 class="section-title">About {{ $seller->company_name }}</h2>
                    <div class="text-secondary lh-lg mb-4">
                         {!! nl2br(e($seller->about)) !!}
                    </div>
                    
                    <div class="highlight-grid mt-5 pt-4 border-top">
                        <div class="highlight-item">
                            <div class="highlight-icon"><i class="bi bi-calendar-check"></i></div>
                            <div class="highlight-content">
                                <small>Year Established</small>
                                <strong>{{ $settings->years_in_business ? now()->subYears($settings->years_in_business)->year : 'N/A' }}</strong>
                            </div>
                        </div>
                         <div class="highlight-item">
                            <div class="highlight-icon"><i class="bi bi-briefcase"></i></div>
                            <div class="highlight-content">
                                <small>Business Type</small>
                                <strong>{{ is_array($seller->business_type) ? implode(', ', $seller->business_type) : $seller->business_type }}</strong>
                            </div>
                        </div>
                         <div class="highlight-item">
                            <div class="highlight-icon"><i class="bi bi-people"></i></div>
                            <div class="highlight-content">
                                <small>Employees</small>
                                <strong>{{ $settings->employees_count ?? '10-50' }} People</strong>
                            </div>
                        </div>
                          <div class="highlight-item">
                            <div class="highlight-icon"><i class="bi bi-globe"></i></div>
                            <div class="highlight-content">
                                <small>Market Cover</small>
                                <strong>Pan India</strong>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                
                <!-- Featured Products Preview -->
                 @if($settings->show_products)
                 <div class="content-card">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2 class="section-title mb-0">Featured Products</h2>
                        <a href="{{ route('seller.public.products', $seller->slug) }}" class="text-primary fw-bold text-decoration-none small">View All <i class="bi bi-arrow-right"></i></a>
                    </div>
                    <div class="row g-3">
                         @foreach($products->take(3) as $product)
                            <div class="col-md-4">
                                <div class="border rounded-3 overflow-hidden h-100 shadow-sm hover:shadow-md transition-all">
                                    <div class="bg-light p-3 text-center" style="height: 180px;">
                                        <img src="{{ $product->main_image }}" class="h-100 w-100 object-fit-contain">
                                    </div>
                                    <div class="p-3 bg-white">
                                        <h6 class="text-truncate fw-bold mb-1">{{ $product->name }}</h6>
                                        <div class="text-primary fw-bold small">{{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, 0) }}</div>
                                    </div>
                                </div>
                            </div>
                         @endforeach
                    </div>
                 </div>
                 @endif

            </div>

            <!-- RIGHT COLUMN (Sidebar) -->
            <div class="col-lg-3">
                
                <!-- Seller Details Card -->
                <div class="sidebar-card" id="contact-sidebar">
                    <div class="sidebar-header">Seller Details</div>
                    <div class="sidebar-body">
                         <div class="rating-box">
                            <div class="rating-score">4.5 <small>/5</small></div>
                            <div class="rating-stars small">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                            </div>
                            <div class="text-muted extra-small mt-1">Based on recent inquiries</div>
                        </div>

                        <div class="contact-row">
                            <i class="bi bi-person-circle contact-icon"></i>
                            <div class="contact-text">
                                <span class="d-block text-muted small fw-bold">CONTACT PERSON</span>
                                <strong>{{ $seller->user->name }}</strong>
                            </div>
                        </div>
                        <div class="contact-row">
                            <i class="bi bi-geo-alt-fill contact-icon"></i>
                            <div class="contact-text">
                                <span class="d-block text-muted small fw-bold">ADDRESS</span>
                                <span>{{ $seller->address }}</span>
                            </div>
                        </div>
                         @if($seller->hasActiveSubscription())
                        <div class="contact-row">
                             <i class="bi bi-telephone-fill contact-icon"></i>
                            <div class="contact-text">
                                <span class="d-block text-muted small fw-bold">MOBILE</span>
                                <strong>{{ $seller->mobile }}</strong>
                            </div>
                        </div>
                        @else
                          <div class="alert alert-warning py-2 small"><i class="bi bi-lock-fill"></i> Contact Details Locked</div>
                        @endif
                        
                        <hr class="my-3 border-light">
                        
                         <h6 class="fw-bold small mb-2 text-uppercase">Legal Status</h6>
                         <div class="d-flex flex-column gap-2 small text-muted">
                            @if($seller->gst) <div><span>GST:</span> <span class="text-dark fw-bold">{{ $seller->gst }}</span></div> @endif
                            @if($seller->udyam_number) <div><span>UDYAM:</span> <span class="text-dark fw-bold">{{ $seller->udyam_number }}</span></div> @endif
                         </div>

                    </div>
                </div>

                <!-- Sticky Inquiry Form -->
                <div class="sidebar-card sticky-top" style="top: 20px;">
                    <div class="sidebar-header bg-orange-50 text-orange-800 border-orange-100">
                        <i class="bi bi-envelope-paper me-2"></i> Send Inquiry
                    </div>
                    <div class="sidebar-body">
                         <form action="{{ route('inquiries.store', $seller->id) }}" method="POST">
                            @csrf
                            <input type="text" name="name" class="form-control form-control-sm mb-2" placeholder="Your Name" value="{{ Auth::user()->name ?? '' }}" required>
                            <input type="text" name="phone" class="form-control form-control-sm mb-2" placeholder="Mobile Number" value="{{ Auth::user()->phone ?? '' }}">
                            <textarea name="message" class="form-control form-control-sm mb-3" rows="3" placeholder="Describe requirement..." required></textarea>
                            <button class="btn w-100 text-white fw-bold shadow-sm" style="background: var(--primary-color);">Send Now</button>
                        </form>
                    </div>
                </div>

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

</div>
@endsection