@extends('layouts.admin')

@section('title', 'Edit Seller')

@section('admin-content')
<div class="container-fluid px-0">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Edit Seller: {{ $seller->company_name }}</h1>
        <a href="{{ route('admin.sellers') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Back to List
        </a>
    </div>

    @php
        $settings = $seller->getOrCreateMicrositeSettings();
    @endphp

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <form action="{{ route('admin.sellers.update', $seller->id) }}" method="POST">
                @csrf
                @method('PUT')

                <!-- Tabs -->
                <ul class="nav nav-tabs nav-justified bg-light rounded-top" id="sellerTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab">Basic Info & MOQ</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="microsite-tab" data-bs-toggle="tab" data-bs-target="#microsite" type="button" role="tab">Microsite Settings</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="inquiry-tab" data-bs-toggle="tab" data-bs-target="#inquiry" type="button" role="tab">Inquiry Settings</button>
                    </li>
                </ul>

                <div class="tab-content p-4" id="sellerTabsContent">
                    <!-- Basic Info Tab -->
                    <div class="tab-pane fade show active" id="basic" role="tabpanel">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Company Name</label>
                                <input type="text" class="form-control" value="{{ $seller->company_name }}" disabled>
                                <small class="text-muted">Company name cannot be changed here.</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Email</label>
                                <input type="text" class="form-control" value="{{ $seller->user->email }}" disabled>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="moq_quantity" class="form-label fw-bold">MOQ Quantity <span class="text-danger">*</span></label>
                                <input type="number" name="moq_quantity" id="moq_quantity" class="form-control" value="{{ old('moq_quantity', $seller->moq_quantity) }}" required min="1">
                            </div>
                            <div class="col-md-6">
                                <label for="moq_unit_id" class="form-label fw-bold">Unit <span class="text-danger">*</span></label>
                                <select name="moq_unit_id" id="moq_unit_id" class="form-select" required>
                                    @foreach($units as $unit)
                                        <option value="{{ $unit->id }}" {{ (old('moq_unit_id', $seller->moq_unit_id) == $unit->id) ? 'selected' : '' }}>
                                            {{ $unit->name }} ({{ $unit->code }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Microsite Settings Tab -->
                    <div class="tab-pane fade" id="microsite" role="tabpanel">
                        <h5 class="mb-3 text-primary">Microsite Customization</h5>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Tagline</label>
                            <input type="text" name="microsite[tagline]" class="form-control" value="{{ old('microsite.tagline', $settings->tagline) }}" placeholder="e.g. Quality and Trust since 1990">
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">CTA Text</label>
                                <input type="text" name="microsite[cta_text]" class="form-control" value="{{ old('microsite.cta_text', $settings->cta_text) }}" placeholder="e.g. Contact Us">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">CTA Link/Action</label>
                                <input type="text" name="microsite[cta_link]" class="form-control" value="{{ old('microsite.cta_link', $settings->cta_link) }}" placeholder="#contact or https://...">
                            </div>
                        </div>

                        <h6 class="mt-4 mb-3 border-bottom pb-2">Statistics & Numbers</h6>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Years in Business</label>
                                <input type="number" name="microsite[years_in_business]" class="form-control" value="{{ old('microsite.years_in_business', $settings->years_in_business) }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Happy Clients</label>
                                <input type="number" name="microsite[happy_clients]" class="form-control" value="{{ old('microsite.happy_clients', $settings->happy_clients) }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Products Sold</label>
                                <input type="number" name="microsite[products_sold]" class="form-control" value="{{ old('microsite.products_sold', $settings->products_sold) }}">
                            </div>
                        </div>

                        <h6 class="mt-4 mb-3 border-bottom pb-2">Section Visibility</h6>
                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="form-check form-switch card p-2 bg-light border-0">
                                    <input class="form-check-input ms-0 me-2" type="checkbox" name="microsite[show_stats]" id="show_stats" {{ $settings->show_stats ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="show_stats">Show Stats Bar</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch card p-2 bg-light border-0">
                                    <input class="form-check-input ms-0 me-2" type="checkbox" name="microsite[show_about]" id="show_about" {{ $settings->show_about ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="show_about">Show About</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch card p-2 bg-light border-0">
                                    <input class="form-check-input ms-0 me-2" type="checkbox" name="microsite[show_products]" id="show_products" {{ $settings->show_products ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="show_products">Show Products</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch card p-2 bg-light border-0">
                                    <input class="form-check-input ms-0 me-2" type="checkbox" name="microsite[show_certificates]" id="show_certificates" {{ $settings->show_certificates ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="show_certificates">Certificates</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch card p-2 bg-light border-0">
                                    <input class="form-check-input ms-0 me-2" type="checkbox" name="microsite[show_testimonials]" id="show_testimonials" {{ $settings->show_testimonials ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="show_testimonials">Testimonials</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch card p-2 bg-light border-0">
                                    <input class="form-check-input ms-0 me-2" type="checkbox" name="microsite[show_faq]" id="show_faq" {{ $settings->show_faq ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="show_faq">Show FAQ</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch card p-2 bg-light border-0">
                                    <input class="form-check-input ms-0 me-2" type="checkbox" name="microsite[show_video]" id="show_video" {{ $settings->show_video ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="show_video">Show Video</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch card p-2 bg-light border-0">
                                    <input class="form-check-input ms-0 me-2" type="checkbox" name="microsite[show_contact]" id="show_contact" {{ $settings->show_contact ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="show_contact">Show Contact</label>
                                </div>
                            </div>
                    </div>
                </div>

                <!-- Inquiry Settings Tab -->
                <div class="tab-pane fade" id="inquiry" role="tabpanel">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0"><i class="bi bi-envelope-check me-2"></i>Inquiry Notification Settings</h5>
                        </div>
                        <div class="card-body">
                            <!-- Subscription Status Info -->
                            <div class="alert {{ $seller->hasActiveSubscription() ? 'alert-success' : 'alert-warning' }} mb-4">
                                <div class="d-flex align-items-center">
                                    <i class="bi {{ $seller->hasActiveSubscription() ? 'bi-check-circle-fill' : 'bi-exclamation-triangle-fill' }} fs-4 me-3"></i>
                                    <div>
                                        <h6 class="mb-1">Subscription Status: 
                                            @if($seller->hasActiveSubscription())
                                                <span class="badge bg-success">Active (Paid)</span>
                                            @else
                                                <span class="badge bg-secondary">Free Plan</span>
                                            @endif
                                        </h6>
                                        <p class="mb-0 small">
                                            @if($seller->hasActiveSubscription())
                                                This seller has an active subscription and will <strong>always receive</strong> inquiry notifications automatically.
                                            @else
                                                This seller is on the free plan. Use the toggle below to control whether they receive inquiry notifications.
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Notification Toggle -->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card border-{{ $seller->notification_enabled ? 'success' : 'secondary' }} mb-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <h6 class="mb-1">
                                                        <i class="bi bi-bell me-2"></i>Enable Inquiry Notifications
                                                    </h6>
                                                    <p class="text-muted small mb-0">
                                                        @if($seller->hasActiveSubscription())
                                                            <span class="text-success"><i class="bi bi-info-circle me-1"></i>This setting is automatically enabled for paid sellers and cannot be changed.</span>
                                                        @else
                                                            When enabled, this seller will receive email and in-app notifications when inquiries are assigned to them by admin.
                                                        @endif
                                                    </p>
                                                </div>
                                                <div class="form-check form-switch" style="font-size: 1.5rem;">
                                                    <input 
                                                        class="form-check-input" 
                                                        type="checkbox" 
                                                        name="notification_enabled" 
                                                        id="notification_enabled" 
                                                        {{ $seller->notification_enabled ? 'checked' : '' }}
                                                        {{ $seller->hasActiveSubscription() ? 'disabled' : '' }}
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- How It Works -->
                            <div class="card bg-light border-0">
                                <div class="card-body">
                                    <h6 class="mb-3"><i class="bi bi-lightbulb me-2"></i>How Inquiry Notifications Work</h6>
                                    <ul class="mb-0 small">
                                        <li class="mb-2"><strong>Paid Sellers:</strong> Always receive notifications when inquiries are assigned (cannot be disabled)</li>
                                        <li class="mb-2"><strong>Free Sellers (Notifications Enabled):</strong> Receive notifications when admin assigns inquiries to them</li>
                                        <li class="mb-0"><strong>Free Sellers (Notifications Disabled):</strong> Do not receive any notifications; must check dashboard manually</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end p-4 border-top">
                    <button type="submit" class="btn btn-primary px-4 py-2">
                        <i class="bi bi-save me-1"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
