@extends('layouts.dashboard')

@section('title', 'Appearance & Branding')
@section('header', 'Appearance & Branding')

@section('sidebar')
@include('super-admin.partials.sidebar')
@endsection

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Page Header -->
    <div class="mb-6">
        <h2 class="text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">Appearance & Branding</h2>
        <p class="text-sm text-gray-500 mt-1">Customize your system's logo and branding</p>
    </div>

    @if(session('success'))
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 text-green-800 px-6 py-4 rounded-lg mb-6 shadow-md">
            <div class="flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <strong class="font-semibold">{{ session('success') }}</strong>
            </div>
        </div>
    @endif

    @if($errors->any())
        <div class="bg-gradient-to-r from-red-50 to-pink-50 border-l-4 border-red-500 text-red-800 px-6 py-4 rounded-lg mb-6 shadow-md">
            <div class="flex items-start">
                <svg class="w-5 h-5 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div>
                    <strong class="font-semibold">Error:</strong>
                    <ul class="list-disc list-inside mt-2 space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-8 mb-6">
        <h2 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent mb-6 flex items-center">
            <svg class="w-6 h-6 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
            Logo & Branding
        </h2>
        
        <form action="{{ route('super-admin.appearance.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <!-- System Name -->
            <div class="mb-6">
                <label for="system_name" class="block text-sm font-semibold text-gray-700 mb-2">
                    System Name
                </label>
                <input type="text" 
                       id="system_name" 
                       name="system_name" 
                       value="{{ old('system_name', $systemName) }}"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 shadow-sm"
                       placeholder="Enter system name">
                <p class="mt-2 text-sm text-gray-500">This will be displayed in the navigation bar and throughout the system.</p>
            </div>

            <!-- System Tagline -->
            <div class="mb-6">
                <label for="system_tagline" class="block text-sm font-semibold text-gray-700 mb-2">
                    System Tagline (Optional)
                </label>
                <input type="text" 
                       id="system_tagline" 
                       name="system_tagline" 
                       value="{{ old('system_tagline', $systemTagline) }}"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 shadow-sm"
                       placeholder="Enter tagline or slogan">
                <p class="mt-2 text-sm text-gray-500">A short tagline or slogan for your system (optional).</p>
            </div>

            <!-- Logo Upload -->
            <div class="mb-6">
                <label for="logo" class="block text-sm font-medium text-gray-700 mb-2">
                    System Logo
                </label>
                
                @if($logo)
                    <div class="mb-4 p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200">
                        <p class="text-sm font-semibold text-gray-700 mb-3">Current Logo:</p>
                        <div class="flex items-center space-x-4">
                            <img src="{{ \App\Helpers\ImageHelper::url($logo) }}" 
                                 alt="Current Logo" 
                                 class="h-20 object-contain bg-white p-3 rounded-xl border-2 border-gray-200 shadow-sm"
                                 id="current-logo-preview"
                                 onerror="this.onerror=null; this.src='{{ \App\Helpers\ImageHelper::placeholder(200, 100) }}';">
                            <div class="flex flex-col gap-2">
                                <button type="button" 
                                        onclick="removeLogo()"
                                        class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition duration-200 shadow-sm hover:shadow">
                                    Remove Logo
                                </button>
                                <button type="button" 
                                        onclick="clearLogoInput()"
                                        class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition duration-200 shadow-sm hover:shadow">
                                    Choose Different Logo
                                </button>
                                <input type="hidden" name="remove_logo" id="remove_logo" value="0">
                            </div>
                        </div>
                    </div>
                @endif

                <div class="flex items-center space-x-4">
                    <label for="logo" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-xl cursor-pointer bg-gradient-to-br from-gray-50 to-gray-100 hover:from-blue-50 hover:to-indigo-50 transition duration-200">
                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
                            <svg class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <p class="mb-2 text-sm text-gray-500">
                                <span class="font-semibold">Click to upload</span> or drag and drop
                            </p>
                            <p class="text-xs text-gray-500">PNG, JPG, GIF, SVG or WEBP (MAX. 5MB)</p>
                        </div>
                        <input id="logo" name="logo" type="file" class="hidden" accept="image/jpeg,image/png,image/jpg,image/gif,image/svg+xml,image/webp" onchange="previewLogo(this)">
                    </label>
                </div>
                
                <div id="logo-preview" class="mt-4 hidden">
                    <p class="text-sm text-gray-600 mb-2">Preview:</p>
                    <img id="logo-preview-img" src="" alt="Logo Preview" class="h-16 object-contain bg-white p-2 rounded border border-gray-200">
                </div>
            </div>

            <!-- Favicon Upload -->
            <div class="mb-6">
                <label for="favicon" class="block text-sm font-medium text-gray-700 mb-2">
                    Favicon
                </label>
                
                @if($favicon)
                    <div class="mb-4 p-4 bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl border-2 border-purple-200">
                        <p class="text-sm font-semibold text-gray-700 mb-3">Current Favicon:</p>
                        <div class="flex items-center space-x-4">
                            <img src="{{ \App\Helpers\ImageHelper::url($favicon) }}" 
                                 alt="Current Favicon" 
                                 class="h-12 w-12 object-contain bg-white p-2 rounded-xl border-2 border-gray-200 shadow-sm"
                                 id="current-favicon-preview"
                                 onerror="this.onerror=null; this.src='{{ \App\Helpers\ImageHelper::placeholder(32, 32) }}';">
                            <div class="flex flex-col gap-2">
                                <button type="button" 
                                        onclick="removeFavicon()"
                                        class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition duration-200 shadow-sm hover:shadow">
                                    Remove Favicon
                                </button>
                                <button type="button" 
                                        onclick="clearFaviconInput()"
                                        class="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-lg hover:bg-purple-700 transition duration-200 shadow-sm hover:shadow">
                                    Choose Different Favicon
                                </button>
                                <input type="hidden" name="remove_favicon" id="remove_favicon" value="0">
                            </div>
                        </div>
                    </div>
                @endif

                <div class="flex items-center space-x-4">
                    <label for="favicon" class="flex flex-col items-center justify-center w-full h-24 border-2 border-gray-300 border-dashed rounded-xl cursor-pointer bg-gradient-to-br from-gray-50 to-gray-100 hover:from-purple-50 hover:to-pink-50 transition duration-200">
                        <div class="flex flex-col items-center justify-center pt-3 pb-4">
                            <svg class="w-8 h-8 mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <p class="mb-1 text-sm text-gray-500">
                                <span class="font-semibold">Click to upload</span>
                            </p>
                            <p class="text-xs text-gray-500">ICO, PNG, SVG (MAX. 512KB)</p>
                        </div>
                        <input id="favicon" name="favicon" type="file" class="hidden" accept="image/x-icon,image/png,image/jpeg,image/svg+xml,image/webp" onchange="previewFavicon(this)">
                    </label>
                </div>
                
                <div id="favicon-preview" class="mt-4 hidden">
                    <p class="text-sm text-gray-600 mb-2">Preview:</p>
                    <img id="favicon-preview-img" src="" alt="Favicon Preview" class="h-8 w-8 object-contain bg-white p-1 rounded border border-gray-200">
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end space-x-4 mt-8">
                <a href="{{ route('super-admin.dashboard') }}" 
                   class="px-6 py-3 border-2 border-gray-300 rounded-xl text-gray-700 font-semibold hover:bg-gray-50 transition duration-200 shadow-sm hover:shadow">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-indigo-700 transition duration-200 shadow-lg hover:shadow-xl">
                    <span class="flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        Save Changes
                    </span>
                </button>
            </div>
        </form>
    </div>

    <!-- Preview Section -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-8">
        <h2 class="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 flex items-center">
            <svg class="w-6 h-6 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
            </svg>
            Live Preview
        </h2>
        <div class="border-2 border-gray-200 rounded-xl overflow-hidden shadow-inner">
            <nav class="bg-white shadow-sm">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="flex justify-between h-16 items-center">
                        <div class="flex items-center">
                            @if($logo)
                                <a href="{{ route('landing') }}" class="flex items-center">
                                    <img src="{{ \App\Helpers\ImageHelper::url($logo) }}" 
                                         alt="{{ $systemName }}" 
                                         class="h-10 object-contain"
                                         onerror="this.style.display='none';">
                                    @if($systemName)
                                        <span class="ml-3 text-xl font-bold text-gray-900">{{ $systemName }}</span>
                                    @endif
                                </a>
                            @else
                                <a href="{{ route('landing') }}" class="text-xl font-bold text-blue-600">
                                    {{ $systemName }}
                                </a>
                            @endif
                        </div>
                        <div class="flex items-center space-x-4">
                            <a href="#" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md">Properties</a>
                            <a href="#" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md">Login</a>
                            <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-md">Register</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</div>

<script>
function previewLogo(input) {
    if (input.files && input.files[0]) {
        // Reset remove flag when new file is selected
        document.getElementById('remove_logo').value = '0';
        
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('logo-preview-img').src = e.target.result;
            document.getElementById('logo-preview').classList.remove('hidden');
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function previewFavicon(input) {
    if (input.files && input.files[0]) {
        // Reset remove flag when new file is selected
        document.getElementById('remove_favicon').value = '0';
        
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('favicon-preview-img').src = e.target.result;
            document.getElementById('favicon-preview').classList.remove('hidden');
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function removeLogo() {
    document.getElementById('remove_logo').value = '1';
    document.getElementById('current-logo-preview').style.opacity = '0.5';
    // Clear file input if something was selected
    document.getElementById('logo').value = '';
    document.getElementById('logo-preview').classList.add('hidden');
}

function removeFavicon() {
    document.getElementById('remove_favicon').value = '1';
    document.getElementById('current-favicon-preview').style.opacity = '0.5';
    // Clear file input if something was selected
    document.getElementById('favicon').value = '';
    document.getElementById('favicon-preview').classList.add('hidden');
}

function clearLogoInput() {
    document.getElementById('logo').value = '';
    document.getElementById('remove_logo').value = '0';
    document.getElementById('logo-preview').classList.add('hidden');
    if (document.getElementById('current-logo-preview')) {
        document.getElementById('current-logo-preview').style.opacity = '1';
    }
}

function clearFaviconInput() {
    document.getElementById('favicon').value = '';
    document.getElementById('remove_favicon').value = '0';
    document.getElementById('favicon-preview').classList.add('hidden');
    if (document.getElementById('current-favicon-preview')) {
        document.getElementById('current-favicon-preview').style.opacity = '1';
    }
}
</script>
@endsection