@extends('layout',['heading'=>__('ui.clinic_settings'),'clinic'=>$clinic])
@section('content')
<div class="space-y-6"><section><p class="section-kicker">CLINIC BRANDING</p><h2 class="text-2xl font-extrabold mt-1">{{ __('ui.identity_settings') }}</h2><p class="text-slate-500 mt-1">{{ __('ui.theme_intro') }}.</p></section><form method="post" enctype="multipart/form-data" class="space-y-6">@csrf<section class="card p-6"><div class="flex justify-between items-start mb-5"><div><h3 class="text-lg font-extrabold">{{ __('ui.choose_theme') }}</h3><p class="text-sm text-slate-500 mt-1">{{ __('ui.theme_change') }}.</p></div><span class="text-xs text-slate-400">{{ $clinic->ui_theme ?? 'aurora' }}</span></div><div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-4"><label class="theme-option"><input type="radio" name="ui_theme" value="aurora" {{ ($clinic->ui_theme ?? 'aurora') === 'aurora' ? 'checked' : '' }}><span class="theme-preview aurora-preview"><b>01</b><i></i><em></em></span><strong>Aurora Teal</strong><small>{{ __('ui.aurora_desc') }}</small></label><label class="theme-option"><input type="radio" name="ui_theme" value="midnight" {{ ($clinic->ui_theme ?? '') === 'midnight' ? 'checked' : '' }}><span class="theme-preview midnight-preview"><b>02</b><i></i><em></em></span><strong>Midnight Violet</strong><small>{{ __('ui.midnight_desc') }}</small></label><label class="theme-option"><input type="radio" name="ui_theme" value="sage" {{ ($clinic->ui_theme ?? '') === 'sage' ? 'checked' : '' }}><span class="theme-preview sage-preview"><b>03</b><i></i><em></em></span><strong>Sage Care</strong><small>{{ __('ui.sage_desc') }}</small></label><label class="theme-option"><input type="radio" name="ui_theme" value="royal" {{ ($clinic->ui_theme ?? '') === 'royal' ? 'checked' : '' }}><span class="theme-preview royal-preview"><b>04</b><i></i><em></em></span><strong>Royal Blue</strong><small>{{ __('ui.royal_desc') }}</small></label></div></section><section class="card p-6"><h3 class="text-lg font-extrabold mb-1">{{ __('ui.prescription_data') }}</h3><p class="text-slate-500 mb-5 text-sm">{{ __('ui.clinic_identity_intro') }}.</p><div class="grid md:grid-cols-2 gap-4"><label>{{ __('ui.clinic_name') }}<input class="input" name="name" required value="{{ $clinic->name }}"></label><label>{{ __('ui.logo_file') }}<input class="input" type="file" name="logo" accept="image/jpeg,image/png,image/webp"><small class="block text-slate-500 mt-1">{{ __('ui.allowed_extensions') }}: JPG, PNG, WEBP — {{ __('ui.max_size') }} 2MB.</small>@if(!empty($clinic->logo_path))<img class="logo-preview" src="{{ asset('storage/'.$clinic->logo_path) }}" alt="{{ __('ui.logo_file') }} {{ $clinic->name }}">@endif</label><label>{{ __('ui.address') }}<input class="input" name="address" value="{{ $clinic->address ?? '' }}"></label><label>{{ __('ui.phone_one') }}<input class="input" name="phone" value="{{ $clinic->phone ?? '' }}"></label><label>{{ __('ui.phone_two') }}<input class="input" name="phone2" value="{{ $clinic->phone2 ?? '' }}"></label><label class="md:col-span-2">{{ __('ui.prescription_extra') }}<textarea class="input" name="prescription_header" rows="4">{{ $clinic->prescription_header ?? '' }}</textarea></label></div></section><button class="btn">{{ __('ui.save_clinic_settings') }}</button></form></div><style>.logo-preview{width:92px;height:60px;object-fit:contain;margin-top:8px;border:1px solid #e6ebf2;border-radius:10px;background:#f8fafc;padding:6px}.theme-option{display:flex;flex-direction:column;gap:3px;border:2px solid #e6ebf2;border-radius:16px;padding:10px;cursor:pointer;transition:border .18s,transform .18s,box-shadow .18s}.theme-option:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,55,90,.1)}.theme-option:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 14%,transparent)}.theme-option input{position:absolute;opacity:0}.theme-option strong{font-size:13px;margin-top:7px}.theme-option small{font-weight:400;color:#718096}.theme-preview{height:88px;border-radius:11px;position:relative;display:block;overflow:hidden}.theme-preview b{position:absolute;top:10px;right:10px;color:#fff;font-size:10px;opacity:.75}.theme-preview i{position:absolute;right:10px;top:34px;width:52%;height:8px;background:#fff8;border-radius:4px}.theme-preview em{position:absolute;right:10px;top:51px;width:34%;height:8px;background:#fff5;border-radius:4px}.aurora-preview{background:linear-gradient(135deg,#0f1b31 0 32%,#0d9488 32% 58%,#e8f8f5 58%)}.midnight-preview{background:linear-gradient(135deg,#11152b 0 32%,#6d63d8 32% 58%,#eef1f8 58%)}.sage-preview{background:linear-gradient(135deg,#17342e 0 32%,#4d9c78 32% 58%,#f2f7f3 58%)}.royal-preview{background:linear-gradient(135deg,#1c2450 0 32%,#4775d1 32% 58%,#f4f5fb 58%)}</style>
@endsection