@extends('layouts.setup')

@section('header')
<div class="setup-header">
    @if(isset($settings['logo_dark']))
        <img src="{{ asset('storage/tenants/' . $tenant->id . '/' . $settings['logo_dark']) }}" alt="Logo" class="logo">
    @else
         <i class="fas fa-shield-alt logo"></i>
    @endif
    
    <h1>Welcome to {{ $tenant->name }}</h1>
    <p>Let's get your brand set up</p>
    <span class="step-counter">Step 1 of 3</span>
</div>
@endsection

@section('progress')
<div class="progress-wrapper">
    <div class="progress-bar">
        <div class="progress" style="width: 33%"></div>
    </div>
    <div class="progress-steps">
        <span class="step-label active">
            <span class="step-num">1</span> Branding
        </span>
        <span class="step-label">
            <span class="step-num">2</span> Company
        </span>
        <span class="step-label">
            <span class="step-num">3</span> Settings
        </span>
    </div>
</div>
@endsection

@section('content')
@php
    $tenantSlug = request()->segment(1);
@endphp

<form method="POST" action="{{ route('tenant.setup.branding.save', ['tenant' => $tenantSlug]) }}" enctype="multipart/form-data">
    @csrf

    <div class="form-group">
        <label>Tenant Name <span class="required">*</span></label>
        <input type="text" name="tenant_name" value="{{ old('tenant_name', $tenant->name) }}" placeholder="Enter your tenant name" required>
    </div>

    <div class="form-group">
        <label>Tagline</label>
        <input type="text" name="tagline" value="{{ old('tagline', $settings['tagline'] ?? '') }}" placeholder="e.g., Exceptional Properties">
        <span class="help-text">A short tagline for your brand</span>
    </div>

    <div class="form-group">
        <label>Subtitle</label>
        <input type="text" name="subtitle" value="{{ old('subtitle', $settings['subtitle'] ?? '') }}" placeholder="e.g., Discover handcrafted developments">
        <span class="help-text">A brief subtitle describing your business</span>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label>Primary Color</label>
            <input type="color" name="primary_color" value="{{ old('primary_color', $settings['primary_color'] ?? '#c9a96e') }}">
            <span class="help-text">Main brand color</span>
        </div>

        <div class="form-group">
            <label>Secondary Color</label>
            <input type="color" name="secondary_color" value="{{ old('secondary_color', $settings['secondary_color'] ?? '#1a1a2e') }}">
            <span class="help-text">Secondary brand color</span>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label>Dark Logo <span style="color:#8fa0b4;font-weight:400;font-size:12px;">(for light backgrounds)</span></label>
            <input type="file" name="logo_dark" accept="image/*">
            <span class="help-text">PNG, JPG, SVG — max 2MB</span>
            
            @if(isset($settings['logo_dark']))
                <div class="logo-preview">
                    <img src="{{ asset('storage/tenants/' . $tenant->id . '/' . $settings['logo_dark']) }}" alt="Dark Logo">
                </div>
            @endif
        </div>

        <div class="form-group">
            <label>Light Logo <span style="color:#8fa0b4;font-weight:400;font-size:12px;">(for dark backgrounds)</span></label>
            <input type="file" name="logo_light" accept="image/*">
            <span class="help-text">PNG, JPG, SVG — max 2MB</span>
            
            @if(isset($settings['logo_light']))
                <div class="logo-preview">
                    <img src="{{ asset('storage/tenants/' . $tenant->id . '/' . $settings['logo_light']) }}" alt="Light Logo">
                </div>
            @endif
        </div>
    </div>

    <div class="form-group">
        <label>Favicon</label>
        <input type="file" name="favicon" accept=".ico,.png">
        <span class="help-text">ICO or PNG, 32x32 or 64x64</span>
        
        @if(isset($settings['favicon']))
            <div class="logo-preview">
                <img src="{{ asset('storage/tenants/' . $tenant->id . '/' . $settings['favicon']) }}" alt="Favicon" style="max-height: 32px; max-width: 32px;">
            </div>
        @endif
    </div>

    <div class="form-actions">
        <span></span>
        <button type="submit" class="btn btn-primary">
            Next Step <i class="fas fa-arrow-right" style="margin-left:8px;"></i>
        </button>
    </div>
</form>
@endsection