@extends('admin.layouts.app')

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

@section('content')
    <div class="row page-titles">
        <div class="col-md-5 col-8 align-self-center">
            <h3 class="text-themecolor">{{ __('Page Settings') }}</h3>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">Home</a></li>
                <li class="breadcrumb-item active">Page Settings</li>
            </ol>
        </div>
        <div class="col-md-7 col-4 align-self-center">
            <div class="d-flex m-t-10 justify-content-end">
                <a href="{{ url('/') }}" target="_blank" class="btn btn-inverse"><i class="fa fa-external-link"></i> View page</a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card card-outline-info">
                <div class="card-body">
                    <p class="text-muted">Title, colour and logo of the public participant-counter page. Changes show the next time that page is loaded or refreshed.</p>

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

                        <div class="form-group row">
                            <label for="title" class="col-md-4 col-form-label text-md-right">{{ __('Page title') }}</label>
                            <div class="col-md-6">
                                <input id="title" type="text" name="title" maxlength="100" required
                                       class="form-control @error('title') is-invalid @enderror"
                                       value="{{ old('title', $settings['title']) }}">
                                <small class="text-muted">Shown in the browser tab. Default: {{ $defaultTitle }}</small>
                                @include('admin.partials.form-errors', array('field' => 'title'))
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="color_hex" class="col-md-4 col-form-label text-md-right">{{ __('Theme colour') }}</label>
                            <div class="col-md-6">
                                <div class="d-flex align-items-center">
                                    <input type="color" id="color_picker" value="{{ old('color', $settings['color']) }}" style="width:60px;height:38px;padding:2px;">
                                    <input id="color_hex" type="text" name="color" maxlength="7" placeholder="#F57C00"
                                           class="form-control ml-2 @error('color') is-invalid @enderror"
                                           style="max-width:140px;text-transform:uppercase;"
                                           value="{{ old('color', $settings['color']) }}" required>
                                    <button type="button" class="btn btn-link" id="color_default" data-default="{{ $defaultColor }}">Use default orange</button>
                                </div>
                                @include('admin.partials.form-errors', array('field' => 'color'))
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="logo" class="col-md-4 col-form-label text-md-right">{{ __('Logo') }}</label>
                            <div class="col-md-6">
                                @if($settings['logo'])
                                    <div class="mb-2">
                                        <img src="{{ $settings['logo'] }}" alt="Current logo" style="max-height:120px;max-width:100%;border:1px solid #ddd;padding:6px;border-radius:6px;">
                                    </div>
                                    <div class="mb-3">
                                        <input id="remove_logo" type="checkbox" name="remove_logo" value="1" class="filled-in chk-col-cyan">
                                        <label for="remove_logo">Remove current logo</label>
                                    </div>
                                @else
                                    <p class="text-muted mb-2">No logo set — the logo area on the page stays empty.</p>
                                @endif
                                <input id="logo" type="file" name="logo" accept="image/png,image/jpeg,image/gif,image/webp"
                                       class="form-control @error('logo') is-invalid @enderror">
                                <small class="text-muted">PNG, JPG, GIF or WebP, up to 2 MB. Uploading a new file replaces the current logo.</small>
                                @include('admin.partials.form-errors', array('field' => 'logo'))
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="show_venue_counts" class="col-md-4 col-form-label text-md-right">{{ __('Venue-wise counts') }}</label>
                            <div class="col-md-6">
                                <input id="show_venue_counts" type="checkbox" name="show_venue_counts" value="1" class="filled-in chk-col-cyan"
                                       {{ old('show_venue_counts', $settings['show_venue_counts']) ? 'checked' : '' }}>
                                <label for="show_venue_counts">Show per-venue count cards on the public page</label>
                                <small class="text-muted d-block">When off, the public page shows only the single overall total — no per-venue breakdown.</small>
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> {{ __('Save') }}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        (function () {
            var picker = document.getElementById('color_picker');
            var hex = document.getElementById('color_hex');
            var valid = /^#[0-9a-fA-F]{6}$/;

            picker.addEventListener('input', function () { hex.value = picker.value.toUpperCase(); });
            hex.addEventListener('input', function () { if (valid.test(hex.value)) picker.value = hex.value; });
            document.getElementById('color_default').addEventListener('click', function () {
                hex.value = this.dataset.default;
                picker.value = this.dataset.default;
            });
        })();
    </script>
@endsection