@extends('layouts.admin')
@section('title', $client ? 'Edit Klien' : 'Tambah Klien')
@push('breadcrumb')
<div class="breadcrumb-sep">/</div><div class="breadcrumb-item"><a href="{{ route('admin.clients.index') }}">Klien</a></div><div class="breadcrumb-sep">/</div><div class="breadcrumb-item">{{ $client ? 'Edit' : 'Tambah' }}</div>
@endpush
@section('content')
<form method="POST" action="{{ $client ? route('admin.clients.update', $client) : route('admin.clients.store') }}" enctype="multipart/form-data" class="max-w-2xl">
    @csrf @if($client) @method('PUT') @endif
    <div class="admin-form-card">
        <div class="admin-form-header"><div class="admin-form-section">{{ $client ? 'Edit Klien' : 'Klien Baru' }}</div></div>
        <div class="admin-form-body">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Nama <span class="req">*</span></label>
                    <input type="text" name="name" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);" value="{{ old('name', $client->name ?? '') }}" required>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Upload Logo</label>
                    <input type="file" name="logo_file" accept="image/jpeg,image/png,image/webp" class="form-input" style="font-size:12px;padding:8px;">
                    <input type="hidden" name="logo" value="{{ old('logo', $client->logo ?? '') }}">
                    <div style="font-size:10px;color:var(--grey-400);margin-top:2px;">Format: JPG/PNG/WebP, maks 5MB</div>
                    @if($client && $client->logo)
                    <div style="width:100px;margin-top:8px;border:1px solid var(--grey-200);border-radius:var(--radius-md);overflow:hidden;">
                        <img src="{{ $client->logo_url }}" alt="" style="width:100%;height:auto;object-fit:contain;display:block;">
                    </div>
                    @endif
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Website</label>
                    <input type="url" name="website_url" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);" value="{{ old('website_url', $client->website_url ?? '') }}">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="form-label" style="color:var(--grey-500)">Sort Order</label>
                    <input type="number" name="sort_order" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);" value="{{ old('sort_order', $client->sort_order ?? 0) }}" min="0">
                </div>
            </div>
            <div class="flex flex-wrap gap-6 mt-5">
                <label class="toggle-wrap">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $client->is_active ?? true) ? 'checked' : '' }}>
                    <div class="toggle-track"><div class="toggle-thumb"></div></div>
                    <span style="font-size:12px;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:0.05em;">Aktif</span>
                </label>
            </div>
        </div>
        <div class="admin-form-footer">
            <a href="{{ route('admin.clients.index') }}" class="btn btn--ghost">Batal</a>
            <button type="submit" class="btn btn--primary">{{ $client ? 'Simpan' : 'Tambah' }}</button>
        </div>
    </div>
</form>
@endsection