@extends('layouts.app')
@section('title', __('vetSite::lang.theme'))

@section('content')
<section class="content-header">
    <h1><i class="fas fa-palette"></i> {{ __('vetSite::lang.theme') }}
        <small>Pick a look and make it yours</small></h1>
</section>

<section class="content">
    @include('vetSite::admin._flash')

    <div class="row">
        @foreach($themes as $key => $t)
            @php($active = $site->theme === $key)
            <div class="col-md-4 col-sm-6" style="margin-bottom:22px;">
                <div style="border:2px solid {{ $active ? '#3c8dbc' : '#e5e9f0' }};border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.05);">
                    {{-- Theme thumbnail --}}
                    <div style="height:150px;position:relative;background:linear-gradient(135deg,{{ $t['palette']['secondary'] }},{{ $t['palette']['primary'] }});">
                        <div style="position:absolute;top:14px;left:14px;right:14px;height:14px;border-radius:7px;background:rgba(255,255,255,.25);"></div>
                        <div style="position:absolute;top:54px;left:14px;width:60%;height:10px;border-radius:5px;background:rgba(255,255,255,.85);"></div>
                        <div style="position:absolute;top:72px;left:14px;width:40%;height:10px;border-radius:5px;background:rgba(255,255,255,.5);"></div>
                        <div style="position:absolute;bottom:16px;left:14px;width:90px;height:26px;border-radius:13px;background:{{ $t['palette']['accent'] }};"></div>
                        @if($active)<span class="label label-primary" style="position:absolute;top:12px;right:12px;"><i class="fa fa-check"></i> Active</span>@endif
                        @if(!empty($t['distinct']))<span class="label label-warning" style="position:absolute;top:12px;left:12px;"><i class="fa fa-layer-group"></i> Full layout</span>@endif
                    </div>
                    <div style="padding:16px;">
                        <h4 style="margin:0 0 4px;font-weight:700;">{{ $t['name'] }}
                            @if(!empty($t['distinct']))<small class="text-warning" title="Unique structure, not just colours"><i class="fa fa-star"></i></small>@endif
                        </h4>
                        <p class="text-muted" style="font-size:12px;min-height:48px;">{{ $t['description'] }}</p>
                        <div style="display:flex;gap:8px;">
                            <form method="POST" action="{{ route('vs.theme.apply') }}" style="flex:1;">
                                @csrf
                                <input type="hidden" name="theme" value="{{ $key }}">
                                <button class="btn btn-block {{ $active ? 'btn-default' : 'btn-primary' }}" {{ $active ? 'disabled' : '' }}>
                                    {{ $active ? 'Applied' : __('vetSite::lang.apply_theme') }}
                                </button>
                            </form>
                            <a href="{{ route('vs.preview') }}?theme_preview={{ $key }}" target="_blank" class="btn btn-default" title="Preview"><i class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row">
        <div class="col-md-8">
            @component('components.widget', ['title' => 'Customise colours & fonts', 'class' => 'box-primary'])
                <p class="text-muted">Override the theme defaults. Leave a colour empty to use the theme's own palette.</p>
                <form method="POST" action="{{ route('vs.theme.customize') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>Primary colour</label>
                            <input type="color" name="primary_color" class="form-control" style="height:38px;padding:3px;"
                                   value="{{ $site->primary_color ?: $site->palette()['primary'] }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Secondary colour</label>
                            <input type="color" name="secondary_color" class="form-control" style="height:38px;padding:3px;"
                                   value="{{ $site->secondary_color ?: $site->palette()['secondary'] }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Accent colour</label>
                            <input type="color" name="accent_color" class="form-control" style="height:38px;padding:3px;"
                                   value="{{ $site->accent_color ?: $site->palette()['accent'] }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label>Heading font</label>
                            <input type="text" name="font_heading" class="form-control" placeholder="{{ $site->fonts()['heading'] }}"
                                   value="{{ $site->font_heading }}">
                            <small class="text-muted">Any Google Font name, e.g. Poppins, Montserrat.</small>
                        </div>
                        <div class="col-md-6 form-group">
                            <label>Body font</label>
                            <input type="text" name="font_body" class="form-control" placeholder="{{ $site->fonts()['body'] }}"
                                   value="{{ $site->font_body }}">
                        </div>
                    </div>
                    <button class="btn btn-primary"><i class="fa fa-save"></i> Save customisation</button>
                    <a href="{{ route('vs.preview') }}" target="_blank" class="btn btn-default"><i class="fa fa-eye"></i> Preview</a>
                </form>
            @endcomponent
        </div>
    </div>
</section>
@endsection
