220 lines
16 KiB
PHP
220 lines
16 KiB
PHP
<x-app-layout>
|
|
<div class="max-w-5xl mx-auto space-y-8 pb-12">
|
|
{{-- Header --}}
|
|
<div class="px-2 flex justify-between items-end">
|
|
<div>
|
|
<h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1">Pengaturan Identitas</h2>
|
|
<p class="text-sm text-slate-500 font-medium italic">Personalisasi branding & konfigurasi sistem.</p>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<span class="px-4 py-2 bg-white border border-slate-100 rounded-2xl text-[10px] font-black text-slate-400 uppercase tracking-widest shadow-sm">
|
|
Server Time: {{ now()->format('H:i') }} WIB
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
|
@csrf
|
|
|
|
{{-- Card 1: Visual Branding --}}
|
|
<div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm p-8 md:p-10">
|
|
<div class="flex items-center gap-4 mb-10">
|
|
<div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center shadow-sm">
|
|
<i class="fas fa-paint-brush text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-black text-slate-800 uppercase tracking-wider">Visual Branding</h3>
|
|
<p class="text-[10px] text-slate-400 font-bold italic">Logo utama dan ikon browser (Favicon).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
{{-- Logo --}}
|
|
<div class="space-y-4" x-data="{ photoName: null, photoPreview: null }">
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ms-4">Logo Utama (512x512)</label>
|
|
<div class="flex items-center gap-6 bg-slate-50 p-4 rounded-[2rem] border border-slate-100 transition-all hover:border-indigo-100">
|
|
<div class="w-20 h-20 bg-white rounded-2xl shadow-sm flex items-center justify-center overflow-hidden shrink-0 border border-slate-100">
|
|
<template x-if="!photoPreview">
|
|
@if(isset($settings['app_logo']))
|
|
<img src="{{ Storage::url($settings['app_logo']) }}" class="w-full h-full object-cover">
|
|
@else
|
|
<i class="fas fa-image text-slate-200 text-2xl"></i>
|
|
@endif
|
|
</template>
|
|
<template x-if="photoPreview">
|
|
<img :src="photoPreview" class="w-full h-full object-cover">
|
|
</template>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<input type="file" name="app_logo" class="hidden" x-ref="logoInput"
|
|
@change="
|
|
photoName = $refs.logoInput.files[0].name;
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => { photoPreview = e.target.result; };
|
|
reader.readAsDataURL($refs.logoInput.files[0]);
|
|
">
|
|
<button type="button" @click="$refs.logoInput.click()" class="text-[10px] font-black bg-white border border-slate-200 text-slate-600 px-4 py-2 rounded-full hover:bg-slate-100 transition-all">
|
|
GANTI LOGO
|
|
</button>
|
|
@error('app_logo') <p class="text-[9px] text-rose-500 mt-2 font-bold uppercase tracking-tighter">{{ $message }}</p> @enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Favicon --}}
|
|
<div class="space-y-4" x-data="{ favName: null, favPreview: null }">
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ms-4">Favicon (128x128)</label>
|
|
<div class="flex items-center gap-6 bg-slate-50 p-4 rounded-[2rem] border border-slate-100 transition-all hover:border-indigo-100">
|
|
<div class="w-20 h-20 bg-white rounded-2xl shadow-sm flex items-center justify-center overflow-hidden shrink-0 border border-slate-100">
|
|
<template x-if="!favPreview">
|
|
@if(isset($settings['app_favicon']))
|
|
<img src="{{ Storage::url($settings['app_favicon']) }}" class="w-full h-full object-cover">
|
|
@else
|
|
<i class="fas fa-cat text-slate-200 text-2xl"></i>
|
|
@endif
|
|
</template>
|
|
<template x-if="favPreview">
|
|
<img :src="favPreview" class="w-full h-full object-cover">
|
|
</template>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<input type="file" name="app_favicon" class="hidden" x-ref="favInput"
|
|
@change="
|
|
favName = $refs.favInput.files[0].name;
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => { favPreview = e.target.result; };
|
|
reader.readAsDataURL($refs.favInput.files[0]);
|
|
">
|
|
<button type="button" @click="$refs.favInput.click()" class="text-[10px] font-black bg-white border border-slate-200 text-slate-600 px-4 py-2 rounded-full hover:bg-slate-100 transition-all">
|
|
GANTI FAVICON
|
|
</button>
|
|
@error('app_favicon') <p class="text-[9px] text-rose-500 mt-2 font-bold uppercase tracking-tighter">{{ $message }}</p> @enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 2: Informasi Aplikasi --}}
|
|
<div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm p-8 md:p-10">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="md:col-span-1">
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ms-4">Nama Brand</label>
|
|
<input type="text" name="app_name" value="{{ $settings['app_name'] ?? 'Ily Cattery' }}"
|
|
class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-inner">
|
|
@error('app_name') <p class="text-[9px] text-rose-500 mt-1 ms-4 font-bold uppercase">{{ $message }}</p> @enderror
|
|
</div>
|
|
<div class="md:col-span-1">
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ms-4">Versi Sistem</label>
|
|
<input type="text" name="app_version" value="{{ $settings['app_version'] ?? '1.0.0' }}"
|
|
class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-inner">
|
|
@error('app_version') <p class="text-[9px] text-rose-500 mt-1 ms-4 font-bold uppercase">{{ $message }}</p> @enderror
|
|
</div>
|
|
<div class="md:col-span-1">
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ms-4">Slogan</label>
|
|
<input type="text" name="app_slogan" value="{{ $settings['app_slogan'] ?? '' }}"
|
|
class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-inner" placeholder="E.g: Manajemen cattery terpercaya">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Notifikasi WhatsApp Operasional --}}
|
|
<div class="rounded-[2rem] border border-slate-200 bg-white p-6 md:p-8">
|
|
<div class="mb-6 flex items-start gap-4">
|
|
<div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600"><i class="fab fa-whatsapp text-xl"></i></div>
|
|
<div><h3 class="font-bold text-slate-900">Notifikasi WhatsApp operasional</h3><p class="mt-1 text-sm text-slate-500">Pilih jenis pengingat dan role penerima. Pengiriman dilakukan oleh scheduler server.</p></div>
|
|
</div>
|
|
<label class="mb-5 flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4">
|
|
<input type="checkbox" name="notif_wa_status" value="1" {{ ($settings['notif_wa_status'] ?? 'active')==='active' ? 'checked' : '' }} class="rounded border-slate-300 text-emerald-600">
|
|
<span><span class="block text-sm font-bold text-slate-800">Aktifkan notifikasi WhatsApp</span><span class="text-xs text-slate-500">Master switch untuk semua pengingat di bawah.</span></span>
|
|
</label>
|
|
<div class="grid gap-4 lg:grid-cols-3">
|
|
@foreach([
|
|
['notif_hpl_wa','notif_hpl_role_id','HPL kucing','H-7 sampai tanggal HPL, dikirim setiap hari.'],
|
|
['notif_inventory_expiry_wa','notif_inventory_role_id','Kedaluwarsa inventori','Obat, makanan, dan perlengkapan mulai H-14.'],
|
|
['notif_weight_stale_wa','notif_weight_role_id','Berat belum diperbarui','Kucing aktif yang tidak ditimbang lebih dari 7 hari.'],
|
|
] as [$switchKey,$roleKey,$title,$desc])
|
|
<div class="rounded-2xl border border-slate-200 p-4">
|
|
<label class="flex items-start gap-3"><input type="checkbox" name="{{ $switchKey }}" value="1" {{ ($settings[$switchKey] ?? 'active')==='active' ? 'checked' : '' }} class="mt-1 rounded border-slate-300 text-indigo-600"><span><span class="block text-sm font-bold text-slate-800">{{ $title }}</span><span class="mt-1 block text-xs leading-relaxed text-slate-500">{{ $desc }}</span></span></label>
|
|
<div class="mt-4"><label class="field-label">Role penerima</label><select name="{{ $roleKey }}" class="field-input rounded-xl"><option value="">Admin (default)</option>@foreach($roles as $role)<option value="{{ $role->id }}" @selected((string)($settings[$roleKey] ?? '') === (string)$role->id)>{{ $role->name }}</option>@endforeach</select></div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 3: Status Layanan --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{{-- WA Status --}}
|
|
<div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm p-6 flex items-center justify-between group hover:border-emerald-100 transition-all">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 {{ $waStatus['active'] ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600' }} rounded-2xl flex items-center justify-center transition-transform group-hover:scale-110">
|
|
<i class="fab fa-whatsapp text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">WhatsApp Gateway</h4>
|
|
<p class="text-xs font-black {{ $waStatus['active'] ? 'text-emerald-700' : 'text-rose-700' }}">
|
|
{{ $waStatus['message'] ?? ($waStatus['active'] ? 'Terkonfigurasi' : 'Belum dikonfigurasi') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@if(!$waStatus['active']) <i class="fas fa-exclamation-circle text-rose-300 animate-pulse"></i> @endif
|
|
</div>
|
|
|
|
{{-- Email Status --}}
|
|
<div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm p-6 flex items-center justify-between group hover:border-indigo-100 transition-all">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 {{ $emailStatus['active'] ? 'bg-indigo-50 text-indigo-600' : 'bg-rose-50 text-rose-600' }} rounded-2xl flex items-center justify-center transition-transform group-hover:scale-110">
|
|
<i class="fas fa-envelope text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">SMTP Email</h4>
|
|
<p class="text-xs font-black {{ $emailStatus['active'] ? 'text-indigo-700' : 'text-rose-700' }}">
|
|
{{ $emailStatus['active'] ? 'Layanan Aktif' : 'Konfigurasi Salah' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-4">
|
|
<button type="submit" class="bg-slate-900 hover:bg-indigo-600 text-white font-black py-5 px-14 rounded-full text-[11px] uppercase tracking-[0.3em] shadow-xl shadow-slate-200 transition-all active:scale-95 flex items-center gap-3">
|
|
<i class="fas fa-save text-sm"></i>
|
|
Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{{-- Log Aktivitas --}}
|
|
<div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
|
|
<div class="px-10 py-6 border-b border-slate-50 bg-slate-50/50 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<i class="fas fa-history text-indigo-400 text-xs"></i>
|
|
<h3 class="text-[10px] font-black text-slate-600 uppercase tracking-widest">Jejak Perubahan</h3>
|
|
</div>
|
|
<span class="text-[9px] font-bold text-slate-400 uppercase">Limit: 5 History</span>
|
|
</div>
|
|
<div class="divide-y divide-slate-50 px-6">
|
|
@forelse($logs as $log)
|
|
<div class="py-5 px-4 flex items-center justify-between hover:bg-slate-50/50 transition-all rounded-2xl">
|
|
<div class="flex items-center gap-5">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-indigo-400 shadow-[0_0_8px_rgba(129,140,248,0.8)]"></div>
|
|
<div>
|
|
<p class="text-[11px] font-bold text-slate-600">
|
|
<span class="text-slate-900 uppercase tracking-tight">{{ $log->user->name }}</span>
|
|
<span class="mx-1 text-slate-400">—</span>
|
|
<span class="italic text-slate-500 font-medium">{{ $log->description }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-[9px] font-black text-slate-300 uppercase tracking-tighter">{{ $log->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
@empty
|
|
<div class="py-16 text-center">
|
|
<i class="fas fa-clipboard-list text-slate-100 text-4xl mb-4"></i>
|
|
<p class="text-[10px] font-black text-slate-300 uppercase tracking-widest">Belum ada catatan aktivitas</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-app-layout> |