@extends('layouts.master')

@section('content')
<div class="tw-bg-gray-50 tw-min-h-screen tw-py-8">
    <div class="container">
        <div class="row g-4">
            <!-- Sidebar -->
            <div class="col-lg-3">
                @include('seller.partials.sidebar')
            </div>

            <!-- Main Content -->
            <div class="col-lg-9">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h4 class="fw-bold mb-1">Microsite Manager</h4>
                        <p class="text-muted small mb-0">Manage your public profile content</p>
                    </div>
                    <a href="{{ route('seller.public.profile', $seller->slug) }}" target="_blank" class="btn btn-outline-primary">
                        <i class="bi bi-box-arrow-up-right me-2"></i> View Live Site
                    </a>
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <!-- Plan Limits Summary -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body">
                        <h6 class="fw-bold mb-3">Your Plan Limits ({{ $plan->name ?? 'Free' }})</h6>
                        <div class="row g-3 text-center">
                            <div class="col-md-3 col-6">
                                <div class="p-3 bg-light rounded">
                                    <small class="text-muted d-block mb-1">Banners</small>
                                    <span class="fw-bold h5">{{ $seller->banners->count() }} / {{ $plan->banner_limit }}</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="p-3 bg-light rounded">
                                    <small class="text-muted d-block mb-1">Certificates</small>
                                    <span class="fw-bold h5">
                                        @if($plan->has_certificates)
                                            <span class="text-success"><i class="bi bi-check-circle-fill"></i> Allowed</span>
                                        @else
                                            <span class="text-danger"><i class="bi bi-x-circle-fill"></i> Not Allowed</span>
                                        @endif
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="p-3 bg-light rounded">
                                    <small class="text-muted d-block mb-1">Custom Pages</small>
                                    <span class="fw-bold h5">{{ $seller->pages->count() }} / {{ $plan->custom_page_limit }}</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="p-3 bg-light rounded">
                                    <small class="text-muted d-block mb-1">Video</small>
                                    <span class="fw-bold h5">
                                        @if($plan->has_video)
                                            <span class="text-success"><i class="bi bi-check-circle-fill"></i> Allowed</span>
                                        @else
                                            <span class="text-danger"><i class="bi bi-x-circle-fill"></i> Not Allowed</span>
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabs -->
                <ul class="nav nav-tabs mb-4" id="micrositeTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="banners-tab" data-bs-toggle="tab" data-bs-target="#banners" type="button" role="tab">Banners</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="certificates-tab" data-bs-toggle="tab" data-bs-target="#certificates" type="button" role="tab">Certificates</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pages-tab" data-bs-toggle="tab" data-bs-target="#pages" type="button" role="tab">Custom Pages</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab">Settings</button>
                    </li>
                </ul>

                <div class="tab-content" id="micrositeTabsContent">
                    <!-- Banners Tab -->
                    <div class="tab-pane fade show active" id="banners" role="tabpanel">
                        <!-- ... existing banner content ... -->
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                                <h6 class="fw-bold mb-0">Hero Banners</h6>
                                @if($seller->banners->count() < $plan->banner_limit)
                                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addBannerModal">
                                        <i class="bi bi-plus-lg"></i> Add Banner
                                    </button>
                                @else
                                    <button class="btn btn-sm btn-secondary" disabled>Limit Reached</button>
                                @endif
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    @forelse($seller->banners as $banner)
                                        <div class="col-md-6">
                                            <div class="card h-100">
                                                <img src="{{ asset('storage/' . $banner->image_path) }}" class="card-img-top" alt="Banner" style="height: 150px; object-fit: cover;">
                                                <div class="card-body p-2">
                                                    <p class="small fw-bold mb-1">{{ $banner->title ?? 'No Title' }}</p>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <small class="text-muted">Order: {{ $banner->order }}</small>
                                                        <form action="{{ route('seller.microsite.banner.destroy', $banner) }}" method="POST" onsubmit="return confirm('Delete this banner?');">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-outline-danger border-0"><i class="bi bi-trash"></i></button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12 text-center py-4 text-muted">
                                            <p>No banners uploaded yet.</p>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Certificates Tab -->
                    <div class="tab-pane fade" id="certificates" role="tabpanel">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                                <h6 class="fw-bold mb-0">Certificates</h6>
                                @if($plan->has_certificates)
                                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addCertificateModal">
                                        <i class="bi bi-plus-lg"></i> Add Certificate
                                    </button>
                                @else
                                    <button class="btn btn-sm btn-secondary" disabled>Upgrade Plan</button>
                                @endif
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    @forelse($seller->certificates as $cert)
                                        <div class="col-md-4 col-6">
                                            <div class="card h-100">
                                                <img src="{{ asset('storage/' . $cert->image_path) }}" class="card-img-top" alt="Certificate" style="height: 200px; object-fit: contain; padding: 10px;">
                                                <div class="card-body p-2 text-center">
                                                    <p class="small fw-bold mb-1">{{ $cert->title ?? 'Certificate' }}</p>
                                                    <form action="{{ route('seller.microsite.certificate.destroy', $cert) }}" method="POST" onsubmit="return confirm('Delete this certificate?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger border-0"><i class="bi bi-trash"></i></button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12 text-center py-4 text-muted">
                                            <p>No certificates uploaded yet.</p>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pages Tab -->
                    <div class="tab-pane fade" id="pages" role="tabpanel">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                                <h6 class="fw-bold mb-0">Custom Pages</h6>
                                @if($seller->pages->count() < $plan->custom_page_limit)
                                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addPageModal">
                                        <i class="bi bi-plus-lg"></i> Add Page
                                    </button>
                                @else
                                    <button class="btn btn-sm btn-secondary" disabled>Limit Reached</button>
                                @endif
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0">
                                        <thead class="bg-light">
                                            <tr>
                                                <th>Title</th>
                                                <th>Slug</th>
                                                <th>Status</th>
                                                <th class="text-end">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($seller->pages as $page)
                                                <tr>
                                                    <td>{{ $page->title }}</td>
                                                    <td><code>/{{ $page->slug }}</code></td>
                                                    <td>
                                                        @if($page->is_active)
                                                            <span class="badge bg-success">Active</span>
                                                        @else
                                                            <span class="badge bg-secondary">Inactive</span>
                                                        @endif
                                                    </td>
                                                    <td class="text-end">
                                                        <form action="{{ route('seller.microsite.page.destroy', $page) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this page?');">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="4" class="text-center py-4 text-muted">No custom pages created.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Settings Tab -->
                    <div class="tab-pane fade" id="settings" role="tabpanel">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-white py-3">
                                <h6 class="fw-bold mb-0">Microsite Settings</h6>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('seller.microsite.settings.update') }}" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-bold">Theme Color</label>
                                            <div class="d-flex align-items-center">
                                                <input type="color" class="form-control form-control-color me-2" name="theme_color" value="{{ $seller->theme_color ?? '#0d6efd' }}" title="Choose your theme color">
                                                <small class="text-muted">Select a primary color for your microsite.</small>
                                            </div>
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <label class="form-label fw-bold">Google Map Embed Code</label>
                                            <textarea name="google_map_embed" class="form-control" rows="4" placeholder='<iframe src="https://www.google.com/maps/embed?..." ...></iframe>'>{{ $seller->google_map_embed }}</textarea>
                                            <small class="text-muted">Paste the "Embed a map" HTML code from Google Maps here.</small>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-end">
                                        <button type="submit" class="btn btn-primary">Save Settings</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->
<!-- Add Banner Modal -->
<div class="modal fade" id="addBannerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('seller.microsite.banner.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Banner</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Banner Image <span class="text-danger">*</span></label>
                        <input type="file" name="image" class="form-control" required accept="image/*">
                        <small class="text-muted">Recommended size: 1200x400px</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Title (Optional)</label>
                        <input type="text" name="title" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Link (Optional)</label>
                        <input type="url" name="link" class="form-control" placeholder="https://...">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Upload Banner</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Add Certificate Modal -->
<div class="modal fade" id="addCertificateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('seller.microsite.certificate.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Certificate</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Certificate Image <span class="text-danger">*</span></label>
                        <input type="file" name="image" class="form-control" required accept="image/*">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Title (e.g., ISO 9001)</label>
                        <input type="text" name="title" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Upload Certificate</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Add Page Modal -->
<div class="modal fade" id="addPageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('seller.microsite.page.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create Custom Page</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Page Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Content <span class="text-danger">*</span></label>
                        <textarea name="content" class="form-control" rows="10" required></textarea>
                        <small class="text-muted">HTML is allowed.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create Page</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
