@extends('layouts.admin')
@section('title', 'Pengaturan Sistem - SI Apotek')

@section('content')
<div class="mb-6">
    <h2 class="text-2xl font-bold text-gray-800">Pengaturan Sistem</h2>
    <p class="text-sm text-gray-500 mt-1">Ubah nama aplikasi dan logo sesuai dengan identitas apotek Anda.</p>
</div>

@if(session('success'))
<div class="mb-6 bg-emerald-50 border-l-4 border-emerald-500 p-4 rounded-r-lg">
    <div class="flex items-center">
        <svg class="w-5 h-5 text-emerald-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <p class="text-emerald-700 font-medium">{{ session('success') }}</p>
    </div>
</div>
@endif

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden w-full max-w-2xl">
    <div class="px-6 py-5 border-b border-gray-100 bg-gray-50/50">
        <h3 class="font-bold text-gray-800">Profil Apotek</h3>
    </div>
    <div class="p-6">
        <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="mb-5">
                <label class="block text-sm font-medium text-gray-700 mb-2">Nama Apotek (Aplikasi)</label>
                <input type="text" name="app_name" value="{{ old('app_name', $setting->app_name) }}" class="w-full px-4 py-2 border rounded-lg focus:ring-emerald-500 focus:border-emerald-500 text-gray-800 @error('app_name') border-red-500 @enderror" required>
                @error('app_name')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Logo Apotek</label>
                @if($setting->logo_path)
                    <div class="mb-3">
                        <img src="{{ asset($setting->logo_path) }}" alt="Logo Saat Ini" class="h-20 object-contain bg-gray-100 p-2 rounded-lg border">
                    </div>
                @endif
                <input type="file" name="logo" accept="image/*" class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                <p class="text-xs text-gray-500 mt-2">Biarkan kosong jika tidak ingin mengubah logo. Format yang didukung: JPG, PNG, SVG (Maks. 2MB).</p>
                @error('logo')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex justify-end pt-4 border-t border-gray-100">
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-2 rounded-lg font-medium shadow-sm transition">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection