@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">Brand Settings</h3>
                        <div>
                            <a href="{{ route('admin.brand.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Add Setting
                            </a>
                            <a href="{{ route('admin.brand.edit') }}" class="btn btn-success">
                                <i class="fas fa-edit"></i> Edit All
                            </a>
                            <form method="POST" action="{{ route('admin.brand.seed-defaults') }}" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-secondary">
                                    <i class="fas fa-seedling"></i> Seed Defaults
                                </button>
                            </form>
                            <a href="{{ route('admin.brand.preview') }}" class="btn btn-info" target="_blank">
                                <i class="fas fa-eye"></i> Preview
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Statistics Cards -->
                    <div class="row mb-4">
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{ $stats['total_settings'] }}</h3>
                                    <p>Total Settings</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-cogs"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ $stats['public_settings'] }}</h3>
                                    <p>Public Settings</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-globe"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>{{ $stats['categories'] }}</h3>
                                    <p>Categories</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-tags"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($settings->count() > 0)
                        @foreach($settings as $category => $categorySettings)
                            <div class="card mb-3">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <i class="fas fa-{{ 
                                            $category === 'general' ? 'info-circle' : 
                                            ($category === 'branding' ? 'palette' : 
                                            ($category === 'contact' ? 'address-book' : 
                                            ($category === 'seo' ? 'search' : 'cog'))) 
                                        }}"></i>
                                        {{ ucfirst($category) }} Settings
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Setting</th>
                                                    <th>Value</th>
                                                    <th>Type</th>
                                                    <th>Public</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($categorySettings as $setting)
                                                    <tr>
                                                        <td>
                                                            <strong>{{ $setting->label }}</strong>
                                                            @if($setting->description)
                                                                <br><small class="text-muted">{{ $setting->description }}</small>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if($setting->type === 'image' && $setting->value)
                                                                <img src="{{ $setting->value }}" alt="{{ $setting->label }}" 
                                                                     style="max-width: 100px; max-height: 50px;" class="img-thumbnail">
                                                            @elseif($setting->type === 'color')
                                                                <div class="d-flex align-items-center">
                                                                    <div style="width: 20px; height: 20px; background-color: {{ $setting->value }}; border-radius: 3px; margin-right: 8px;"></div>
                                                                    <code>{{ $setting->value }}</code>
                                                                </div>
                                                            @elseif($setting->type === 'boolean')
                                                                <span class="badge badge-{{ $setting->typed_value ? 'success' : 'secondary' }}">
                                                                    {{ $setting->typed_value ? 'Yes' : 'No' }}
                                                                </span>
                                                            @elseif($setting->type === 'url' && $setting->value)
                                                                <a href="{{ $setting->value }}" target="_blank">{{ Str::limit($setting->value, 30) }}</a>
                                                            @elseif($setting->type === 'email' && $setting->value)
                                                                <a href="mailto:{{ $setting->value }}">{{ $setting->value }}</a>
                                                            @else
                                                                {{ Str::limit($setting->value, 50) }}
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <span class="badge badge-secondary">{{ $setting->type }}</span>
                                                        </td>
                                                        <td>
                                                            @if($setting->is_public)
                                                                <i class="fas fa-eye text-success" title="Public"></i>
                                                            @else
                                                                <i class="fas fa-eye-slash text-muted" title="Private"></i>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <form method="POST" action="{{ route('admin.brand.destroy', $setting) }}" class="d-inline"
                                                                  onsubmit="return confirm('Are you sure you want to delete {{ $setting->label }}?')">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            </form>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="alert alert-info text-center">
                            <h5><i class="fas fa-info-circle"></i> No Brand Settings Found</h5>
                            <p>Get started by seeding the default brand settings or creating custom ones.</p>
                            <form method="POST" action="{{ route('admin.brand.seed-defaults') }}" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-seedling"></i> Seed Default Settings
                                </button>
                            </form>
                        </div>
                    @endif
                </div>

                <div class="card-footer">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{{ route('admin.brand.export') }}" class="btn btn-outline-primary">
                                <i class="fas fa-download"></i> Export Settings
                            </a>
                            <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#importModal">
                                <i class="fas fa-upload"></i> Import Settings
                            </button>
                        </div>
                        <div class="col-md-6 text-right">
                            <small class="text-muted">
                                Public settings are visible on the welcome page and other frontend components.
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Brand Settings</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('admin.brand.import') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="settings_file">Settings File (JSON)</label>
                        <input type="file" class="form-control-file" id="settings_file" name="settings_file" 
                               accept=".json" required>
                        <small class="form-text text-muted">
                            Upload a JSON file exported from the brand settings system.
                        </small>
                    </div>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Warning:</strong> Importing will update existing settings with matching keys.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Import Settings</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Live Preview Section -->
<div class="row mt-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Live Brand Preview</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <h6>Site Identity</h6>
                        <div class="border rounded p-3 mb-3" style="background: linear-gradient(135deg, {{ \App\Models\BrandSetting::get('primary_color', '#6A1B9A') }}, {{ \App\Models\BrandSetting::get('secondary_color', '#388E3C') }});">
                            <h4 class="text-white mb-0">{{ \App\Models\BrandSetting::get('site_name', 'Brambles and Blessings') }}</h4>
                            <p class="text-white-50 mb-0">{{ \App\Models\BrandSetting::get('site_tagline', 'Farm Management Excellence') }}</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h6>Color Scheme</h6>
                        <div class="d-flex">
                            <div class="text-center mr-3">
                                <div style="width: 50px; height: 50px; background: {{ \App\Models\BrandSetting::get('primary_color', '#6A1B9A') }}; border-radius: 8px;"></div>
                                <small>Primary</small>
                            </div>
                            <div class="text-center">
                                <div style="width: 50px; height: 50px; background: {{ \App\Models\BrandSetting::get('secondary_color', '#388E3C') }}; border-radius: 8px;"></div>
                                <small>Secondary</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h6>Contact Info</h6>
                        <div class="text-muted">
                            @if(\App\Models\BrandSetting::get('contact_email'))
                                <i class="fas fa-envelope"></i> {{ \App\Models\BrandSetting::get('contact_email') }}<br>
                            @endif
                            @if(\App\Models\BrandSetting::get('contact_phone'))
                                <i class="fas fa-phone"></i> {{ \App\Models\BrandSetting::get('contact_phone') }}<br>
                            @endif
                            <i class="fas fa-map-marker-alt"></i> {{ \App\Models\BrandSetting::get('business_address', 'Booneville, AR') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection