@extends('layouts.app')

@section('title', 'Company Branding Settings')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb and Search -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center" style="padding: 15px 0; border-bottom: 1px solid #e0e0e0;">
                <nav aria-label="breadcrumb" style="margin: 0;">
                    <ol class="breadcrumb mb-0" style="background: transparent; padding: 0;">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" style="color: #666; text-decoration: none;">Settings</a></li>
                        <li class="breadcrumb-item active" aria-current="page" style="font-weight: bold; color: #333;">Company Branding</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <!-- Branding Settings Form -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="mb-0">
                        <i class="fas fa-paint-brush me-2"></i>Company Branding Settings
                        @if(isset($reseller) && $reseller)
                            <small class="text-muted">(Reseller Specific)</small>
                        @endif
                    </h5>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-triangle me-2"></i>Please fix the errors below and try again.
                            <ul class="mb-0 mt-2">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('settings.branding.update') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <!-- Company Name -->
                        <div class="mb-4">
                            <label for="company_name" class="form-label" style="font-weight: 600; color: #333; margin-bottom: 10px;">
                                <i class="fas fa-building me-2"></i>Company Name
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="company_name" 
                                   name="company_name" 
                                   value="{{ old('company_name', $settings['company_name'] ?? '') }}" 
                                   placeholder="Enter your company name"
                                   required
                                   style="padding: 12px; border: 1px solid #ddd; border-radius: 6px;">
                            <small class="form-text text-muted">
                                This name will be displayed on the login page.
                                @if(isset($reseller) && $reseller)
                                    <br><strong>Note:</strong> This branding is specific to your reseller account and will be shown when users access the login page with your reseller ID.
                                @endif
                            </small>
                        </div>

                        <!-- Company Logo -->
                        <div class="mb-4">
                            <label for="company_logo" class="form-label" style="font-weight: 600; color: #333; margin-bottom: 10px;">
                                <i class="fas fa-image me-2"></i>Company Logo
                            </label>
                            
                            <!-- Current Logo Preview -->
                            @if(!empty($settings['company_logo']) && file_exists(public_path($settings['company_logo'])))
                                <div class="mb-3" style="padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e0e0e0;">
                                    <p class="mb-2" style="font-weight: 600; color: #666;">Current Logo:</p>
                                    <img src="{{ asset($settings['company_logo']) }}" 
                                         alt="Company Logo" 
                                         style="max-width: 200px; max-height: 200px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                                </div>
                            @endif
                            
                            <input type="file" 
                                   class="form-control" 
                                   id="company_logo" 
                                   name="company_logo" 
                                   accept="image/jpeg,image/png,image/jpg,image/gif,image/svg+xml"
                                   style="padding: 12px; border: 1px solid #ddd; border-radius: 6px;">
                            <small class="form-text text-muted">
                                Upload your company logo (Max: 2MB). Supported formats: JPEG, PNG, JPG, GIF, SVG
                            </small>
                            
                            <!-- Logo Preview -->
                            <div id="logoPreview" class="mt-3" style="display: none;">
                                <p class="mb-2" style="font-weight: 600; color: #666;">New Logo Preview:</p>
                                <img id="previewImage" src="" alt="Logo Preview" style="max-width: 200px; max-height: 200px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary" style="padding: 12px 30px; font-size: 16px; font-weight: 600;">
                                <i class="fas fa-save me-2"></i>Save Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const logoInput = document.getElementById('company_logo');
        const logoPreview = document.getElementById('logoPreview');
        const previewImage = document.getElementById('previewImage');

        if (logoInput) {
            logoInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImage.src = e.target.result;
                        logoPreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    logoPreview.style.display = 'none';
                }
            });
        }
    });
</script>

<style>
    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
</style>
@endsection