@extends('layouts.admin')
@section('title', 'Perfil do Hotel — Configurações')

@push('styles')
<style>
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}
.settings-nav {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}
.settings-nav-header {
    padding: 16px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}
.settings-nav-link:hover { background: var(--color-bg); color: var(--color-primary); }
.settings-nav-link.active {
    background: color-mix(in srgb, var(--color-primary) 8%, white);
    color: var(--color-primary);
    font-weight: 700;
    border-left-color: var(--color-primary);
}
.logo-upload-area {
    border: 2px dashed var(--color-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: border-color 0.2s;
    cursor: pointer;
}
.logo-upload-area:hover { border-color: var(--color-primary); }
@media (max-width: 768px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { position: static; }
}
</style>
@endpush

@section('breadcrumb')
    <a class="breadcrumb-item" href="{{ route('admin.settings.hotel.index') }}">Configurações</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Perfil do Hotel</span>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Configurações</h1>
        <p class="page-subtitle">Dados do estabelecimento, identidade visual e informações de contato.</p>
    </div>
</div>

<div class="settings-layout">
    {{-- Nav --}}
    <nav class="settings-nav">
        <div class="settings-nav-header">Configurações</div>
        <a href="{{ route('admin.settings.hotel.index') }}" class="settings-nav-link active">
            <i data-lucide="building-2" style="width:16px;height:16px;"></i> Perfil do Hotel
        </a>
        <a href="{{ route('admin.settings.payment-methods.index') }}" class="settings-nav-link">
            <i data-lucide="credit-card" style="width:16px;height:16px;"></i> Pagamentos
        </a>
        <a href="{{ route('admin.settings.accounts.index') }}" class="settings-nav-link">
            <i data-lucide="landmark" style="width:16px;height:16px;"></i> Contas Financeiras
        </a>
        <a href="{{ route('admin.settings.status-colors.index') }}" class="settings-nav-link">
            <i data-lucide="palette" style="width:16px;height:16px;"></i> Cores de Status
        </a>
    </nav>

    {{-- Content --}}
    <div>
        @if(session('success'))
            <div class="alert alert-success mb-lg">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger mb-lg">{{ session('error') }}</div>
        @endif

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

            @if($errors->any())
                <div class="alert alert-danger mb-lg">
                    <ul style="margin:0;padding-left:16px;">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                </div>
            @endif

            {{-- Logo --}}
            <div class="card mb-lg">
                <div class="card-header">
                    <h3 style="margin:0;font-size:14px;font-weight:700;">
                        <i data-lucide="image" style="width:15px;height:15px;display:inline-block;vertical-align:middle;margin-right:6px;"></i>
                        Logotipo
                    </h3>
                </div>
                <div class="card-body">
                    <div style="display:flex;align-items:center;gap:24px;flex-wrap:wrap;">
                        @if($hotel->logo_path)
                            <div style="text-align:center;">
                                <img src="{{ Storage::disk('public')->url($hotel->logo_path) }}"
                                     alt="Logo" style="height:80px;max-width:200px;object-fit:contain;border:1px solid var(--color-border);border-radius:8px;padding:8px;background:#fff;">
                                <div style="margin-top:8px;">
                                    <form action="{{ route('admin.settings.hotel.logo.destroy') }}" method="POST" style="display:inline;" onsubmit="return confirm('Remover logo?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-ghost" style="color:var(--color-danger);">
                                            <i data-lucide="trash-2" style="width:13px;height:13px;"></i> Remover
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @else
                            <div style="width:120px;height:80px;border-radius:8px;background:var(--color-bg);border:1px dashed var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);">
                                <i data-lucide="image-off" style="width:28px;height:28px;opacity:0.4;"></i>
                            </div>
                        @endif

                        <div style="flex:1;">
                            <label class="logo-upload-area" for="logo-input">
                                <i data-lucide="upload-cloud" style="width:24px;height:24px;color:var(--color-primary);margin-bottom:6px;"></i>
                                <div style="font-size:13px;font-weight:600;">Clique para enviar novo logo</div>
                                <div style="font-size:11px;color:var(--color-text-muted);margin-top:4px;">JPG, PNG ou WebP — máx. 2MB</div>
                                <input type="file" id="logo-input" name="logo" accept="image/jpg,image/jpeg,image/png,image/webp" style="display:none;" onchange="previewLogo(this)">
                            </label>
                            <div id="logo-preview" style="display:none;margin-top:10px;text-align:center;">
                                <img id="logo-preview-img" style="max-height:80px;border-radius:8px;border:1px solid var(--color-border);">
                                <div style="font-size:11px;color:var(--color-text-muted);margin-top:4px;">Pré-visualização — salve para confirmar</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Dados Principais --}}
            <div class="card mb-lg">
                <div class="card-header">
                    <h3 style="margin:0;font-size:14px;font-weight:700;">
                        <i data-lucide="building-2" style="width:15px;height:15px;display:inline-block;vertical-align:middle;margin-right:6px;"></i>
                        Dados do Estabelecimento
                    </h3>
                </div>
                <div class="card-body">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">

                        <div class="form-group" style="grid-column:1/-1;">
                            <label class="form-label">Razão Social / Nome <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-input" value="{{ old('name', $hotel->name) }}" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Nome Fantasia</label>
                            <input type="text" name="trade_name" class="form-input" value="{{ old('trade_name', $hotel->trade_name) }}" placeholder="Ex: Hotel Bela Vista">
                        </div>

                        <div class="form-group">
                            <label class="form-label">CNPJ / CPF</label>
                            <input type="text" name="document" class="form-input" value="{{ old('document', $hotel->document) }}" placeholder="00.000.000/0001-00">
                        </div>

                        <div class="form-group">
                            <label class="form-label">E-mail de Contato</label>
                            <input type="email" name="email" class="form-input" value="{{ old('email', $hotel->email) }}">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Telefone</label>
                            <input type="text" name="phone" class="form-input" value="{{ old('phone', $hotel->phone) }}" placeholder="(00) 00000-0000">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Endereço --}}
            <div class="card mb-lg">
                <div class="card-header">
                    <h3 style="margin:0;font-size:14px;font-weight:700;">
                        <i data-lucide="map-pin" style="width:15px;height:15px;display:inline-block;vertical-align:middle;margin-right:6px;"></i>
                        Endereço
                    </h3>
                </div>
                <div class="card-body">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">

                        <div class="form-group" style="grid-column:1/-1;">
                            <label class="form-label">Logradouro</label>
                            <input type="text" name="address" class="form-input" value="{{ old('address', $hotel->address) }}" placeholder="Rua, Av., número, complemento">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Cidade</label>
                            <input type="text" name="city" class="form-input" value="{{ old('city', $hotel->city) }}">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Estado (UF)</label>
                            <input type="text" name="state" class="form-input" maxlength="2" value="{{ old('state', $hotel->state) }}" placeholder="SC" style="text-transform:uppercase;">
                        </div>

                        <div class="form-group">
                            <label class="form-label">CEP</label>
                            <input type="text" name="zip_code" class="form-input" value="{{ old('zip_code', $hotel->zip_code) }}" placeholder="00000-000">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Fuso Horário</label>
                            <select name="timezone" class="form-select">
                                @php $tzs = ['America/Sao_Paulo'=>'Brasília (UTC-3)', 'America/Fortaleza'=>'Fortaleza (UTC-3)', 'America/Manaus'=>'Manaus (UTC-4)', 'America/Belem'=>'Belém (UTC-3)', 'America/Cuiaba'=>'Cuiabá (UTC-4)', 'America/Porto_Velho'=>'Porto Velho (UTC-4)', 'America/Noronha'=>'Fernando de Noronha (UTC-2)', 'America/Rio_Branco'=>'Rio Branco (UTC-5)']; @endphp
                                @foreach($tzs as $tz => $label)
                                    <option value="{{ $tz }}" {{ old('timezone', $hotel->timezone) == $tz ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex gap-sm">
                <button type="submit" class="btn btn-primary">
                    <i data-lucide="save" style="width:15px;height:15px;"></i> Salvar Alterações
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function previewLogo(input) {
    const file = input.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById('logo-preview-img').src = e.target.result;
            document.getElementById('logo-preview').style.display = 'block';
        };
        reader.readAsDataURL(file);
    }
}
</script>
@endpush
@endsection