@extends('admin.layouts.base')

@section('content')
<div>
    <div class="card">
        <!-- Header -->
        <div class="card-header bg-light py-4 border-bottom">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h1 class="h2 mb-1 text-gray-900">Website CMS Settings</h1>
                    <p class="text-muted mb-0">Manage your website's identity, branding, contact information, social links, and operating hours.</p>
                </div>
            </div>
        </div>

        <!-- Body -->
        <div class="card-body">
            <!-- Success Message -->
            @if (session('swal'))
                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                        Swal.fire({
                            title: "{{ session('swal.title') }}",
                            text: "{{ session('swal.text') }}",
                            icon: "{{ session('swal.icon') }}",
                            confirmButtonText: 'OK',
                            timer: 4000,
                            timerProgressBar: true,
                            showCloseButton: true
                        });
                    });
                </script>
            @endif

            <!-- Error Messages -->
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show mb-6" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle me-3 fs-4"></i>
                        <div>
                            <h6 class="alert-heading mb-2">Please fix the following errors:</h6>
                            <ul class="mb-0 ps-3">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <!-- Form -->
            <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" id="settingsForm">
                @csrf

                <!-- 1. General Settings -->
                <div class="settings-section mb-8">
                    <div class="section-header mb-5">
                        <h5 class="fw-bold text-primary mb-2">
                            <i class="fas fa-cog me-2"></i>General Settings
                        </h5>
                        <p class="text-muted mb-0">Basic website configuration</p>
                    </div>
                    
                    <div class="row g-4">
                        <div class="col-lg-8">
                            <div class="form-group">
                                <label class="form-label fw-semibold required">Site Name</label>
                                <input type="text" name="site_name" class="form-control" 
                                       placeholder="e.g. Freight"
                                       value="{{ old('site_name', $settings->site_name ?? '') }}" required>
                                <small class="form-text text-muted">Display name of your website</small>
                                @error('site_name')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="form-group">
                                <label class="form-label fw-semibold">Markup (%)</label>
                                <div class="input-group">
                                    <input type="number" step="0.01" min="0" max="100" name="quote_markup" 
                                           class="form-control" placeholder="0.00"
                                           value="{{ old('quote_markup', $settings->quote_markup ?? '') }}">
                                    <span class="input-group-text">%</span>
                                </div>
                                <small class="form-text text-muted">Percentage added to supplier quotes</small>
                                @error('quote_markup')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2. Branding -->
                <div class="settings-section mb-8">
                    <div class="section-header mb-5">
                        <h5 class="fw-bold text-primary mb-2">
                            <i class="fas fa-palette me-2"></i>Branding
                        </h5>
                        <p class="text-muted mb-0">Website logo and favicon</p>
                    </div>
                    
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="card border h-100">
                                <div class="card-body">
                                    <label class="form-label fw-semibold">Logo</label>
                                    
                                    @if ($settings?->logo)
                                        <div class="current-file mb-4">
                                            <p class="text-muted mb-2">Current logo:</p>
                                            <div class="border rounded p-3 bg-light text-center">
                                                <img src="{{ asset('storage/' . $settings->logo) }}" 
                                                     alt="Current Logo" 
                                                     class="img-fluid" 
                                                     style="max-height: 60px;">
                                            </div>
                                        </div>
                                    @endif
                                    
                                    <div class="file-upload-area">
                                        <input type="file" name="logo" class="form-control" accept="image/*">
                                        <div class="form-text">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Recommended: 300x80px transparent PNG or SVG
                                        </div>
                                    </div>
                                    @error('logo')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card border h-100">
                                <div class="card-body">
                                    <label class="form-label fw-semibold">Favicon</label>
                                    
                                    @if ($settings?->favicon)
                                        <div class="current-file mb-4">
                                            <p class="text-muted mb-2">Current favicon:</p>
                                            <div class="border rounded p-3 bg-light text-center">
                                                <img src="{{ asset('storage/' . $settings->favicon) }}" 
                                                     alt="Current Favicon" 
                                                     class="img-fluid" 
                                                     style="max-height: 32px;">
                                            </div>
                                        </div>
                                    @endif
                                    
                                    <div class="file-upload-area">
                                        <input type="file" name="favicon" class="form-control" accept="image/*">
                                        <div class="form-text">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Recommended: 32x32 or 64x64px ICO/PNG
                                        </div>
                                    </div>
                                    @error('favicon')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 3. Social Media -->
                <div class="settings-section mb-8">
                    <div class="section-header mb-5">
                        <h5 class="fw-bold text-primary mb-2">
                            <i class="fas fa-share-alt me-2"></i>Social Media Links
                        </h5>
                        <p class="text-muted mb-0">Connect your social media profiles</p>
                    </div>
                    
                    <div class="row g-4">
                        @foreach ([
                            'facebook_url' => ['label' => 'Facebook', 'icon' => 'facebook', 'color' => 'primary', 'placeholder' => 'https://facebook.com/yourpage'],
                            'twitter_url' => ['label' => 'Twitter / X', 'icon' => 'twitter', 'color' => 'info', 'placeholder' => 'https://twitter.com/yourhandle'],
                            'instagram_url' => ['label' => 'Instagram', 'icon' => 'instagram', 'color' => 'danger', 'placeholder' => 'https://instagram.com/yourhandle'],
                            'tiktok_url' => ['label' => 'TikTok', 'icon' => 'tiktok', 'color' => 'dark', 'placeholder' => 'https://tiktok.com/@yourhandle'],
                            'wechat_url' => ['label' => 'WeChat', 'icon' => 'weixin', 'color' => 'success', 'placeholder' => 'WeChat ID or official account link']
                        ] as $field => $data)
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label fw-semibold">
                                        {{ $data['label'] }}
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fab fa-{{ $data['icon'] }} text-{{ $data['color'] }}"></i>
                                        </span>
                                        <input type="url" name="{{ $field }}" class="form-control" 
                                               placeholder="{{ $data['placeholder'] }}"
                                               value="{{ old($field, $settings->{$field} ?? '') }}">
                                    </div>
                                    @error($field)
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- 4. Business Hours -->
                <div class="settings-section mb-8">
                    <div class="section-header mb-5">
                        <h5 class="fw-bold text-primary mb-2">
                            <i class="fas fa-clock me-2"></i>Business Hours
                        </h5>
                        <p class="text-muted mb-0">Set your operating schedule</p>
                    </div>
                    
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-semibold">Hours Preset</label>
                                <select name="business_hours_preset" class="form-select" id="business_hours_preset">
                                    <option value="">-- Select a preset --</option>
                                    <option value="9-6" {{ old('business_hours_preset', $settings->business_hours_preset ?? '') === '9-6' ? 'selected' : '' }}>
                                        9:00 AM - 6:00 PM (Monday to Friday)
                                    </option>
                                    <option value="10-7" {{ old('business_hours_preset', $settings->business_hours_preset ?? '') === '10-7' ? 'selected' : '' }}>
                                        10:00 AM - 7:00 PM (Monday to Friday)
                                    </option>
                                    <option value="11-8" {{ old('business_hours_preset', $settings->business_hours_preset ?? '') === '11-8' ? 'selected' : '' }}>
                                        11:00 AM - 8:00 PM (Monday to Friday)
                                    </option>
                                    <option value="custom" {{ old('business_hours_preset', $settings->business_hours_preset ?? '') === 'custom' ? 'selected' : '' }}>
                                        Custom Hours
                                    </option>
                                </select>
                                @error('business_hours_preset')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6" id="custom_hours" style="display: {{ old('business_hours_preset', $settings->business_hours_preset ?? '') === 'custom' ? 'block' : 'none' }};">
                            <div class="form-group">
                                <label class="form-label fw-semibold">Custom Hours</label>
                                <textarea name="business_hours_custom" rows="3" class="form-control" 
                                          placeholder="Monday - Friday: 9:00 AM - 5:00 PM&#10;Saturday: 10:00 AM - 2:00 PM&#10;Sunday: Closed">{{ old('business_hours_custom', $settings->business_hours_custom ?? '') }}</textarea>
                                <small class="form-text text-muted">
                                    <i class="fas fa-lightbulb me-1"></i>
                                    Specify each day's hours on a new line
                                </small>
                                @error('business_hours_custom')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 5. Contact & Location -->
                <div class="settings-section mb-8">
                    <div class="section-header mb-5">
                        <h5 class="fw-bold text-primary mb-2">
                            <i class="fas fa-map-marker-alt me-2"></i>Contact & Location
                        </h5>
                        <p class="text-muted mb-0">Business contact information</p>
                    </div>
                    
                    <div class="row g-4">
                        <!-- Address Section -->
                        <div class="col-12">
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold">Main Address</label>
                                        <textarea name="main_address" rows="3" class="form-control" 
                                                  placeholder="123 Business Street&#10;Suite 100&#10;City, State 12345">{{ old('main_address', $settings->main_address ?? '') }}</textarea>
                                        @error('main_address')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold">Alternate Address</label>
                                        <textarea name="alternate_address" rows="3" class="form-control" 
                                                  placeholder="456 Second Location Ave&#10;City, State 67890">{{ old('alternate_address', $settings->alternate_address ?? '') }}</textarea>
                                        <small class="form-text text-muted">Optional secondary location</small>
                                        @error('alternate_address')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Phone Numbers -->
                        <div class="col-12">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold">Main Phone</label>
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="fas fa-phone"></i>
                                            </span>
                                            <input type="text" name="main_phone" class="form-control" 
                                                   placeholder="(555) 123-4567"
                                                   value="{{ old('main_phone', $settings->main_phone ?? '') }}">
                                        </div>
                                        @error('main_phone')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold">Alternate Phone</label>
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="fas fa-phone-alt"></i>
                                            </span>
                                            <input type="text" name="alternate_phone" class="form-control" 
                                                   placeholder="(555) 987-6543"
                                                   value="{{ old('alternate_phone', $settings->alternate_phone ?? '') }}">
                                        </div>
                                        <small class="form-text text-muted">Optional secondary phone</small>
                                        @error('alternate_phone')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Email Addresses -->
                        <div class="col-12">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold">General Email</label>
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="fas fa-envelope"></i>
                                            </span>
                                            <input type="email" name="general_email" class="form-control" 
                                                   placeholder="hello@yourbusiness.com"
                                                   value="{{ old('general_email', $settings->general_email ?? '') }}">
                                        </div>
                                        @error('general_email')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold">Support Email</label>
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="fas fa-headset"></i>
                                            </span>
                                            <input type="email" name="support_email" class="form-control" 
                                                   placeholder="support@yourbusiness.com"
                                                   value="{{ old('support_email', $settings->support_email ?? '') }}">
                                        </div>
                                        <small class="form-text text-muted">Optional support email</small>
                                        @error('support_email')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Google Maps -->
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form-label fw-semibold">Google Maps Embed</label>
                                <textarea name="location_iframe" rows="4" class="form-control font-monospace fs-7" 
                                          placeholder='<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" ...></iframe>'>{{ old('location_iframe', $settings->location_iframe ?? '') }}</textarea>
                                <div class="form-text">
                                    <i class="fas fa-map-marked-alt me-1"></i>
                                    Go to Google Maps → Share → Embed a map → Copy the full &lt;iframe&gt; code
                                </div>
                                @error('location_iframe')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="settings-footer mt-8 pt-6 border-top">
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary btn-lg px-6" id="saveBtn">
                            <span class="indicator-label">
                                <i class="fas fa-save me-2"></i>Save All Settings
                            </span>
                            <span class="indicator-progress d-none">
                                <span class="spinner-border spinner-border-sm me-2"></span>
                                Saving Changes...
                            </span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .settings-section {
        background: #fff;
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
    }
    
    .section-header {
        padding-bottom: 1rem;
        border-bottom: 2px solid #f3f4f6;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-group:last-child {
        margin-bottom: 0;
    }
    
    .form-label.required:after {
        content: " *";
        color: #dc3545;
    }
    
    .file-upload-area {
        padding: 1.5rem;
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        background: #f8f9fa;
        transition: all 0.3s ease;
    }
    
    .file-upload-area:hover {
        border-color: #0d6efd;
        background: #f0f7ff;
    }
    
    .current-file {
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
    }
    
    .settings-footer {
        background: #f8f9fa;
        margin: -2rem;
        margin-top: 2rem;
        padding: 2rem;
    }
</style>

<script>
    // Submit button loading state
    const form = document.getElementById('settingsForm');
    const saveBtn = document.getElementById('saveBtn');
    const indicatorLabel = saveBtn.querySelector('.indicator-label');
    const indicatorProgress = saveBtn.querySelector('.indicator-progress');

    form.addEventListener('submit', function(e) {
        // Optional: Add form validation before submission
        if (form.checkValidity()) {
            saveBtn.disabled = true;
            indicatorLabel.classList.add('d-none');
            indicatorProgress.classList.remove('d-none');
        }
    });

    // Business Hours Toggle
    const presetSelect = document.getElementById('business_hours_preset');
    const customDiv = document.getElementById('custom_hours');

    function toggleCustomHours() {
        if (presetSelect.value === 'custom') {
            customDiv.style.display = 'block';
            // If selecting a preset, fill the custom field with preset value
            const customField = document.querySelector('textarea[name="business_hours_custom"]');
            if (customField && !customField.value) {
                const selectedOption = presetSelect.options[presetSelect.selectedIndex];
                if (selectedOption.value !== 'custom' && selectedOption.value !== '') {
                    customField.value = selectedOption.text;
                }
            }
        } else {
            customDiv.style.display = 'none';
        }
    }

    presetSelect?.addEventListener('change', toggleCustomHours);
    
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        toggleCustomHours();
        
        // Add input validation styling
        const inputs = form.querySelectorAll('input, textarea, select');
        inputs.forEach(input => {
            input.addEventListener('blur', function() {
                if (!this.checkValidity()) {
                    this.classList.add('is-invalid');
                } else {
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                }
            });
        });
    });
</script>
@endsection