@extends('layouts.admin')

@section('title', 'Hotel Settings')

@push('styles')
<style>
    .logo-preview-box {
        width: 120px;
        height: 120px;
        border: 1px dashed var(--hp-border-green);
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: hidden;
    }
    .logo-preview-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .theme-swatch {
        width: 100%;
        height: 2.25rem;
        border: 1px solid var(--hp-border-green);
        border-radius: .5rem;
        padding: 0;
        cursor: pointer;
    }
    .theme-preview-card {
        border: 1px solid var(--hp-border-green);
        border-radius: 1rem;
        overflow: hidden;
    }
</style>
@endpush

@section('content')
<x-page-header title="Hotel Settings" :subtitle="$hotel->name"/>

<form method="POST" action="{{ route('admin.settings.hotel.update') }}" enctype="multipart/form-data" data-turbo="false" id="hotelSettingsForm">
    @csrf
    @method('PUT')
    <input type="hidden" name="remove_logo" id="removeLogoField" value="0">
    <input type="hidden" name="theme_reset" id="themeResetField" value="0">

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="hp-card mb-4">
                <div class="hp-card-header">Hotel details</div>
                <div class="hp-card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Hotel Name</label>
                            <input name="name" class="form-control" value="{{ old('name', $hotel->name) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $hotel->email) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Phone</label>
                            <input name="phone" class="form-control" value="{{ old('phone', $hotel->phone) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Currency</label>
                            <input name="currency" class="form-control" value="{{ old('currency', $hotel->currency) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Timezone</label>
                            <input name="timezone" class="form-control" value="{{ old('timezone', $hotel->timezone) }}" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Address</label>
                            <textarea name="address" class="form-control" rows="2">{{ old('address', $hotel->address) }}</textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Check-in Time</label>
                            <input name="check_in_time" class="form-control" value="{{ old('check_in_time', $hotel->check_in_time) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Check-out Time</label>
                            <input name="check_out_time" class="form-control" value="{{ old('check_out_time', $hotel->check_out_time) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tax Rate (%)</label>
                            <input type="number" step="0.01" name="tax_rate" class="form-control" value="{{ old('tax_rate', $hotel->tax_rate) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Service Charge (%)</label>
                            <input type="number" step="0.01" name="service_charge_rate" class="form-control" value="{{ old('service_charge_rate', $hotel->service_charge_rate) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Business Date</label>
                            <input type="date" name="business_date" class="form-control" value="{{ old('business_date', $hotel->business_date?->toDateString()) }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="hp-card mb-4">
                <div class="hp-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <span>Theme colors</span>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach($themePresets as $id => $preset)
                            <button type="button" class="btn btn-hp-outline btn-sm theme-preset-btn" data-preset="{{ $id }}">
                                {{ $preset['label'] }}
                            </button>
                        @endforeach
                        <button type="button" class="btn btn-link btn-sm text-muted" id="resetThemeBtn">Reset</button>
                    </div>
                </div>
                <div class="hp-card-body">
                    <div class="row g-3">
                        @foreach($themeLabels as $key => $label)
                            <div class="col-md-4 col-sm-6">
                                <label class="form-label small">{{ $label }}</label>
                                <div class="d-flex gap-2 align-items-center">
                                    <input type="color" class="theme-swatch theme-color-input" data-key="{{ $key }}" value="{{ old($key, $themeColors[$key]) }}">
                                    <input type="text" name="{{ $key }}" id="themeText_{{ $key }}" class="form-control form-control-sm theme-hex-input" data-key="{{ $key }}" value="{{ old($key, $themeColors[$key]) }}" pattern="^#[0-9A-Fa-f]{6}$" maxlength="7">
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="hp-card mb-4">
                <div class="hp-card-header">Logo</div>
                <div class="hp-card-body">
                    <div class="d-flex flex-column align-items-start gap-3">
                        <div class="logo-preview-box" id="logoPreviewBox">
                            @if($logoUrl)
                                <img src="{{ $logoUrl }}" alt="Logo" id="logoPreviewImg">
                            @else
                                <i class="bi bi-image text-muted fs-3" id="logoPreviewFallback"></i>
                                <img src="" alt="" id="logoPreviewImg" class="d-none">
                            @endif
                        </div>
                        <div class="w-100">
                            <label class="form-label">Upload logo</label>
                            <input type="file" name="logo" id="logoInput" class="form-control" accept=".png,.jpg,.jpeg,.webp,.svg,.gif,image/*">
                            <div class="form-text">PNG, JPG, WEBP, SVG or GIF. Max 4MB.</div>
                        </div>
                        @if($logoUrl)
                            <button type="button" class="btn btn-hp-outline btn-sm" id="removeLogoBtn">Remove custom logo</button>
                        @endif
                    </div>
                </div>
            </div>

            <div class="hp-card mb-4">
                <div class="hp-card-header">Live preview</div>
                <div class="hp-card-body p-0">
                    <div class="theme-preview-card">
                        <div id="previewSidebar" class="p-3" style="background:{{ $themeColors['theme_sidebar'] }}">
                            <div class="fw-bold mb-2" id="previewBrand" style="color:{{ $themeColors['theme_primary_dark'] }}">
                                Hotel<span id="previewBrandAccent" style="color:{{ $themeColors['theme_sidebar_brand'] }}">Plus</span>
                            </div>
                            <div class="small text-uppercase mb-2" id="previewMuted" style="color:{{ $themeColors['theme_sidebar_muted'] }};letter-spacing:.06em;font-size:.65rem;">Front Office</div>
                            <div class="rounded-pill px-3 py-2 mb-2 fw-semibold" id="previewActive" style="background:{{ $themeColors['theme_primary'] }};color:{{ $themeColors['theme_sidebar_nav_active'] }}">Dashboard</div>
                            <div class="rounded-pill px-3 py-2 fw-semibold" id="previewLink" style="color:{{ $themeColors['theme_sidebar_nav'] }}">Reservations</div>
                        </div>
                        <div class="p-3" id="previewBody" style="background:{{ $themeColors['theme_bg'] }}">
                            <div class="rounded-4 p-3 bg-white border" id="previewCard" style="border-color:{{ $themeColors['theme_border'] }} !important;">
                                <div class="fw-bold mb-2" id="previewHeading" style="color:{{ $themeColors['theme_primary_dark'] }}">Preview card</div>
                                <button type="button" class="btn btn-sm text-white" id="previewBtn" style="background:{{ $themeColors['theme_primary'] }}">Primary button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-hp-primary w-100">Save Settings</button>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
(function () {
    const presets = @json(collect($themePresets)->mapWithKeys(fn ($p, $id) => [$id => $p['colors']]));

    function applyColors(colors) {
        Object.keys(colors).forEach(function (key) {
            const hex = colors[key];
            const colorInput = document.querySelector('.theme-color-input[data-key="' + key + '"]');
            const textInput = document.getElementById('themeText_' + key);
            if (colorInput) colorInput.value = hex;
            if (textInput) textInput.value = hex;
        });
        updatePreview();
    }

    function currentColors() {
        const colors = {};
        document.querySelectorAll('.theme-hex-input').forEach(function (el) {
            colors[el.dataset.key] = el.value;
        });
        return colors;
    }

    function updatePreview() {
        const c = currentColors();
        const set = function (id, prop, value) {
            const el = document.getElementById(id);
            if (el) el.style[prop] = value;
        };
        set('previewSidebar', 'background', c.theme_sidebar);
        set('previewBrand', 'color', c.theme_primary_dark);
        set('previewBrandAccent', 'color', c.theme_sidebar_brand);
        set('previewMuted', 'color', c.theme_sidebar_muted);
        set('previewActive', 'background', c.theme_primary);
        set('previewActive', 'color', c.theme_sidebar_nav_active);
        set('previewLink', 'color', c.theme_sidebar_nav);
        set('previewBody', 'background', c.theme_bg);
        set('previewHeading', 'color', c.theme_primary_dark);
        set('previewBtn', 'background', c.theme_primary);
        const card = document.getElementById('previewCard');
        if (card) card.style.borderColor = c.theme_border;
    }

    document.querySelectorAll('.theme-preset-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const id = btn.getAttribute('data-preset');
            if (presets[id]) applyColors(presets[id]);
        });
    });

    document.getElementById('resetThemeBtn')?.addEventListener('click', function () {
        document.getElementById('themeResetField').value = '1';
        if (presets.sage) applyColors(presets.sage);
    });

    document.querySelectorAll('.theme-color-input').forEach(function (el) {
        el.addEventListener('input', function () {
            const text = document.getElementById('themeText_' + el.dataset.key);
            if (text) text.value = el.value.toUpperCase();
            document.getElementById('themeResetField').value = '0';
            updatePreview();
        });
    });

    document.querySelectorAll('.theme-hex-input').forEach(function (el) {
        el.addEventListener('input', function () {
            if (/^#[0-9A-Fa-f]{6}$/.test(el.value)) {
                const color = document.querySelector('.theme-color-input[data-key="' + el.dataset.key + '"]');
                if (color) color.value = el.value;
                document.getElementById('themeResetField').value = '0';
                updatePreview();
            }
        });
    });

    document.getElementById('logoInput')?.addEventListener('change', function (e) {
        const file = e.target.files && e.target.files[0];
        const img = document.getElementById('logoPreviewImg');
        const fallback = document.getElementById('logoPreviewFallback');
        if (!file || !img) return;
        const url = URL.createObjectURL(file);
        img.src = url;
        img.classList.remove('d-none');
        if (fallback) fallback.classList.add('d-none');
        document.getElementById('removeLogoField').value = '0';
    });

    document.getElementById('removeLogoBtn')?.addEventListener('click', function () {
        document.getElementById('removeLogoField').value = '1';
        const img = document.getElementById('logoPreviewImg');
        if (img) {
            img.src = '';
            img.classList.add('d-none');
        }
        let fallback = document.getElementById('logoPreviewFallback');
        if (!fallback) {
            fallback = document.createElement('i');
            fallback.id = 'logoPreviewFallback';
            fallback.className = 'bi bi-image text-muted fs-3';
            document.getElementById('logoPreviewBox')?.appendChild(fallback);
        }
        fallback.classList.remove('d-none');
        const input = document.getElementById('logoInput');
        if (input) input.value = '';
    });
})();
</script>
@endpush