@extends('layouts.admin.base-dashboard')

@section('title', 'Setting Appearance')

@section('content')
    @include('layouts.admin.include.message')

    <div class="card">
        <div class="card-header">
            <h3>Customize Appearance</h3>
        </div>
        <div class="card-body">
            <form action="{{ route('settings.update') }}" method="POST"
                enctype="multipart/form-data" id="settings-form">
                @csrf
                @method('PATCH')

                <div class="form-section">
                    <h3>Logo</h3>
                    <div class="form-group">
                        <label for="logo"><strong>Current Logo:</strong></label>
                        <div class="custom-file">
                            <input type="file" name="logo" id="logo" class="custom-file-input">
                            <label class="custom-file-label" for="logo">Choose logo file</label>
                        </div>
                        <small>Upload a new logo if needed</small>
                    </div>
                </div>
                <hr>

                <div class="form-section">
                    <h3>Navbar Background Color</h3>
                    <div class="form-group">
                        <label for="navbar_background">Select Navbar Background Color</label>
                        <input type="color" name="navbar_background" id="navbar_background" class="form-control"
                            value="{{ old('navbar_background', $settings->navbar_background ?? '#3498db') }}">

                        <input type="text" id="navbar_background_text"
                            class="form-control mt-2"
                            value="{{ old('navbar_background', $settings->navbar_background ?? '#3498db') }}"
                            placeholder="Navbar Background Color (HEX)" maxlength="7">
                    </div>
                </div>
                <hr>

                <button type="submit" class="btn btn-primary">Save Settings</button>
                <button type="button" id="reset_to_default" class="btn btn-secondary">Reset to Default</button>
            </form>
        </div>
    </div>
@endsection

@push('script')
    <script>
        const colorInput = document.getElementById('navbar_background');
        const textInput = document.getElementById('navbar_background_text');
        const resetButton = document.getElementById('reset_to_default');
        const defaultColor = '#3498db';

        // Sync color picker -> text
        colorInput.addEventListener('input', function () {
            textInput.value = this.value;
        });

        // Sync text -> color picker (only if valid HEX)
        textInput.addEventListener('input', function () {
            if (/^#([0-9A-F]{3}){1,2}$/i.test(this.value)) {
                colorInput.value = this.value;
            }
        });

        // Reset to default color
        resetButton.addEventListener('click', function () {
            colorInput.value = defaultColor;
            textInput.value = defaultColor;
        });
    </script>
@endpush