@extends('layout')

@section('content')
<div class="space-y-7">
    <section class="card p-6 md:p-8" style="background:linear-gradient(135deg,#12324a 0%,#087f75 100%);color:#fff;">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-5">
            <div>
                <div class="text-xs font-bold tracking-[.16em] uppercase text-teal-100 mb-3">MASTER DATA</div>
                <h2 class="text-2xl md:text-3xl font-extrabold">{{ __('ui.master_data') }}</h2>
                <p class="mt-3 text-sm md:text-base text-slate-100 max-w-2xl">{{ __('ui.master_data_intro') }}</p>
            </div>
            <div class="text-sm text-teal-50">{{ $clinic->name ?? __('ui.current_clinic') }} <span class="opacity-70">·</span> {{ $clinic->code ?? '' }}</div>
        </div>
    </section>

    <section>
        <div class="flex items-center justify-between mb-4">
            <div><div class="section-kicker">{{ __('ui.clinic_operations') }}</div><h3 class="text-xl font-extrabold mt-1">{{ __('ui.master_data') }}</h3></div>
            <div class="text-xs text-slate-500">{{ __('ui.master_data') }}</div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
            @php($sections = [
                ['key'=>'exam_types','title'=>'master_data_exam_types','desc'=>'ui.exam_types','url'=>'/exam-types','icon'=>'01','tone'=>'#eef4ff','count'=>'exam_types'],
                ['key'=>'services','title'=>'master_data_services','desc'=>'ui.services_procedures_hint','url'=>'/services','icon'=>'02','tone'=>'#ecfbf7','count'=>'services'],
                ['key'=>'medical_catalog','title'=>'master_data_medical_catalog','desc'=>'ui.medical_catalog','url'=>'/medical-catalog','icon'=>'03','tone'=>'#fff8ea','count'=>'medical_catalog'],
                ['key'=>'insurance','title'=>'master_data_insurance','desc'=>'ui.medical_insurance','url'=>'/insurance','icon'=>'04','tone'=>'#f4efff','count'=>'insurance'],
                ['key'=>'settings','title'=>'master_data_settings','desc'=>'ui.clinic_data','url'=>'/clinic-settings','icon'=>'05','tone'=>'#fff1f1','count'=>null],
                ['key'=>'users','title'=>'master_data_users','desc'=>'ui.users','url'=>'/clinic-users','icon'=>'06','tone'=>'#edf8ff','count'=>'users'],
            ])
            @foreach($sections as $section)
                <a href="{{ $section['url'] }}" class="card p-5 group block" style="text-decoration:none;color:inherit;">
                    <div class="flex items-start justify-between gap-4">
                        <div class="w-11 h-11 rounded-2xl grid place-items-center font-extrabold text-sm" style="background:{{ $section['tone'] }};color:var(--teal-dark);">{{ $section['icon'] }}</div>
                        <span class="text-xs font-bold text-slate-400 group-hover:text-teal-700">{{ __('ui.master_data_open') }} ←</span>
                    </div>
                    <h4 class="text-lg font-extrabold mt-5">{{ __('ui.'.$section['title']) }}</h4>
                    <p class="text-sm text-slate-500 mt-2 min-h-[42px]">{{ __(''.$section['desc']) }}</p>
                    @if($section['count'] ?? null)
                        <div class="mt-5 pt-4 border-t border-slate-100 text-sm font-bold text-slate-700">{{ __('ui.master_data_items', ['count' => $counts[$section['count'] ?? ''] ?? 0]) }}</div>
                    @else
                        <div class="mt-5 pt-4 border-t border-slate-100 text-sm font-bold text-teal-700">{{ __('ui.master_data_open') }} <span class="font-normal">→</span></div>
                    @endif
                </a>
            @endforeach
        </div>
    </section>
</div>
@endsection