@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Website Builder - {{ $website->name }}</h1>
    <div class="btn-toolbar">
        <a href="{{ route('website.show', $website) }}" class="btn btn-outline-secondary me-2">
            <i class="bi bi-arrow-left me-1"></i>Back
        </a>
        @if($website->is_published)
        <a href="{{ route('preview.website', $website) }}"
           class="btn btn-success" target="_blank">
            <i class="bi bi-box-arrow-up-right me-1"></i>Preview Site
        </a>
    @endif
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <!-- Theme Preview -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Theme Preview</h5>
            </div>
            <div class="card-body">
                <div class="theme-preview-container">
                    <iframe src="{{ route('public.website', $website->domain) }}"
                            class="w-100" height="400" style="border: 1px solid #ddd; border-radius: 8px;">
                    </iframe>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <a href="{{ route('pages.index', $website) }}" class="btn btn-outline-primary w-100 p-3">
                            <i class="bi bi-file-earmark-text display-6 d-block mb-2"></i>
                            <strong>Manage Pages</strong>
                            <br><small>{{ $website->pages->count() }} pages</small>
                        </a>
                    </div>

                    <div class="col-md-6 mb-3">
                        <a href="{{ route('website.visual-builder', $website) }}" class="btn btn-outline-success w-100 p-3">
                            <i class="bi bi-brush display-6 d-block mb-2"></i>
                            <strong>Visual Builder</strong>
                            <br><small>Drag & drop page builder</small>
                        </a>
                    </div>



                    <div class="col-md-6 mb-3">
                        <a href="{{ route('menus.index', $website) }}" class="btn btn-outline-success w-100 p-3">
                            <i class="bi bi-list display-6 d-block mb-2"></i>
                            <strong>Manage Menus</strong>
                            <br><small>{{ $website->menus->count() }} menus</small>
                        </a>
                    </div>
                    @if($website->ecommerce_enabled)
                    <div class="col-md-6 mb-3">
                        <a href="{{ route('products.index', $website) }}" class="btn btn-outline-info w-100 p-3">
                            <i class="bi bi-box display-6 d-block mb-2"></i>
                            <strong>Manage Products</strong>
                            <br><small>{{ $website->products->count() }} products</small>
                        </a>
                    </div>
                    <div class="col-md-6 mb-3">
                        <a href="{{ route('orders.index', $website) }}" class="btn btn-outline-warning w-100 p-3">
                            <i class="bi bi-cart display-6 d-block mb-2"></i>
                            <strong>View Orders</strong>
                            <br><small>{{ $website->orders->count() }} orders</small>
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <!-- Theme Selector -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Change Theme</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('website.theme', $website) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="mb-3">
                        @foreach($themes as $theme)
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="theme"
                                   id="theme-{{ $theme->slug }}" value="{{ $theme->slug }}"
                                   {{ $website->theme === $theme->slug ? 'checked' : '' }}>
                            <label class="form-check-label" for="theme-{{ $theme->slug }}">
                                <strong>{{ $theme->name }}</strong>
                                <br><small class="text-muted">{{ $theme->description }}</small>
                            </label>
                        </div>
                        @endforeach
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Update Theme</button>
                </form>
            </div>
        </div>

        <!-- Website Settings -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Website Settings</h5>
            </div>
            <div class="card-body">
                <!-- Custom Domain -->
                <form action="{{ route('website.domain', $website) }}" method="POST" class="mb-3">
                    @csrf
                    @method('PUT')
                    <label for="custom_domain" class="form-label">Custom Domain</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="custom_domain"
                               value="{{ $website->custom_domain }}" placeholder="yourdomain.com">
                        <button class="btn btn-outline-secondary" type="submit">Update</button>
                    </div>
                </form>

                <!-- Toggle Actions -->
                <div class="d-grid gap-2">
                    <form action="{{ route('website.ecommerce.toggle', $website) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <button type="submit" class="btn btn-{{ $website->ecommerce_enabled ? 'outline-danger' : 'outline-success' }} w-100">
                            {{ $website->ecommerce_enabled ? 'Disable' : 'Enable' }} E-commerce
                        </button>
                    </form>

                    <form action="{{ route('website.publish', $website) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <button type="submit" class="btn btn-{{ $website->is_published ? 'outline-warning' : 'outline-primary' }} w-100">
                            {{ $website->is_published ? 'Unpublish' : 'Publish' }} Website
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection