@extends('layouts.app')

@section('title', 'Interface · ' . $organization->name)
@section('eyebrow', 'Administrer')
@section('heading', 'Apparence de l’interface')

@section('content')
<div class="ui-settings-page">
    <section class="ui-settings-intro">
        <div>
            <span>IDENTITÉ VISUELLE</span>
            <h2>Adapter Ribambin à votre structure</h2>
            <p>
                La couleur principale génère automatiquement toutes
                les nuances utilisées dans l’application.
            </p>
        </div>
    </section>

    <form
        method="post"
        action="{{ route(
            'tenant.interface-settings.update'
        ) }}"
        class="ui-settings-form"
    >
        @csrf
        @method('PUT')

        <section class="ui-settings-card">
            <header>
                <div>
                    <h3>Couleur principale</h3>
                    <p>
                        Le contraste du texte est calculé
                        automatiquement.
                    </p>
                </div>
            </header>

            <div class="ui-color-control">
                <input
                    type="color"
                    id="primary_color_picker"
                    value="{{ $settings->primary_color }}"
                    data-ui-color-picker
                >

                <input
                    type="text"
                    name="primary_color"
                    value="{{ $settings->primary_color }}"
                    maxlength="7"
                    pattern="^#[0-9A-Fa-f]{6}$"
                    data-ui-color-input
                    required
                >
            </div>

            <div class="ui-color-preview" data-ui-color-preview>
                @foreach([
                    '900','800','700','600','500',
                    '400','300','200','100','50'
                ] as $step)
                    <span data-ui-shade="{{ $step }}">
                        {{ $step }}
                    </span>
                @endforeach
            </div>
        </section>

        <section class="ui-settings-card">
            <header>
                <div>
                    <h3>Densité de la navigation</h3>
                    <p>
                        Le mode confortable améliore la lisibilité.
                    </p>
                </div>
            </header>

            <label class="ui-density-option">
                <input
                    type="radio"
                    name="sidebar_density"
                    value="comfortable"
                    @checked(
                        $settings->sidebar_density
                        === 'comfortable'
                    )
                >
                <span>
                    <b>Confortable</b>
                    <small>
                        Textes et zones cliquables plus grands.
                    </small>
                </span>
            </label>

            <label class="ui-density-option">
                <input
                    type="radio"
                    name="sidebar_density"
                    value="compact"
                    @checked(
                        $settings->sidebar_density
                        === 'compact'
                    )
                >
                <span>
                    <b>Compact</b>
                    <small>
                        Affiche davantage de rubriques.
                    </small>
                </span>
            </label>
        </section>

        <div class="ui-settings-actions">
            <button class="btn primary" type="submit">
                Enregistrer l’apparence
            </button>
        </div>
    </form>
</div>
@endsection