@extends('layouts.admin')
@section('title', isset($service) ? 'Edit Service' : 'Add Service')
@section('page-title', isset($service) ? 'Edit Service' : 'Add Service')
@section('content')
<div class="page-header">
    <h1>{{ isset($service) ? 'Edit Service' : 'Add New Service' }}</h1>
    <a href="{{ route('admin.services.index') }}" class="btn btn-outline btn-sm">← Back</a>
</div>
<div class="card" style="max-width:640px;">
    <div class="card-body">
        <form method="POST" enctype="multipart/form-data"
              action="{{ isset($service) ? route('admin.services.update',$service) : route('admin.services.store') }}">
            @csrf @if(isset($service)) @method('PUT') @endif
            @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif
            <div class="grid-2" style="gap:1.25rem;">
                <div class="form-group"><label>Service Name <span style="color:#dc2626">*</span></label><input type="text" name="name" required value="{{ old('name',$service->name??'') }}" placeholder="e.g. Hair Braiding"></div>
                <div class="form-group"><label>Category <span style="color:#dc2626">*</span></label>
                    <select name="category" required>
                        @foreach(['Hair','Nails','Skin','Makeup','Spa','Waxing','Other'] as $c)
                        <option value="{{ $c }}" {{ old('category',($service->category??''))===$c ? 'selected':'' }}>{{ $c }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group"><label>Price (₵) <span style="color:#dc2626">*</span></label><input type="number" name="price" required step="0.01" min="0" value="{{ old('price',$service->price??'') }}"></div>
                <div class="form-group"><label>Duration (minutes) <span style="color:#dc2626">*</span></label><input type="number" name="duration_minutes" required min="1" value="{{ old('duration_minutes',$service->duration_minutes??'') }}"></div>
                <div class="form-group"><label>Deposit %</label><input type="number" name="deposit_percent" min="0" max="100" value="{{ old('deposit_percent',$service->deposit_percent??30) }}"></div>
            </div>

            {{-- Image Upload --}}
            <div class="form-group" style="margin-top:.75rem;">
                <label>Service Image</label>
                <img id="img-preview"
                     src="{{ $service->image_url ?? '' }}"
                     alt="Current image"
                     style="height:110px;width:110px;object-fit:cover;border-radius:.5rem;border:2px solid #E8D5C4;margin-bottom:.5rem;{{ empty($service->image_url) ? 'display:none;' : '' }}"
                     onerror="this.style.display='none';document.getElementById('img-none').style.display='block';">
                <div id="img-none" style="{{ empty($service->image_url) ? '' : 'display:none;' }}background:#f0e8e0;height:110px;width:110px;border-radius:.5rem;border:2px dashed #E8D5C4;display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:.5rem;">🖼</div>
                <div style="font-size:.75rem;color:#7A6058;margin-bottom:.4rem;">{{ !empty($service->image_url) ? 'Current image — upload a new one to replace it.' : 'No image yet.' }}</div>
                <input type="file" name="image" id="image-input" accept="image/*"
                       style="display:block;padding:.45rem 0;font-size:.88rem;"
                       onchange="previewImg(this)">
                <div style="font-size:.75rem;color:#7A6058;margin-top:.3rem;">JPG, PNG, WebP — max 4 MB</div>
            </div>

            <div class="form-group"><label>Description <span style="color:#dc2626">*</span></label><textarea name="description" rows="4" required>{{ old('description',$service->description??'') }}</textarea></div>
            <div style="display:flex;gap:1.5rem;margin-bottom:1.25rem;">
                <label style="display:flex;gap:.5rem;align-items:center;font-size:.9rem;cursor:pointer;"><input type="checkbox" name="is_active" value="1" {{ old('is_active',($service->is_active??true)) ? 'checked':'' }}> Active</label>
                <label style="display:flex;gap:.5rem;align-items:center;font-size:.9rem;cursor:pointer;"><input type="checkbox" name="requires_deposit" value="1" {{ old('requires_deposit',($service->requires_deposit??false)) ? 'checked':'' }}> Requires Deposit</label>
            </div>
            <button type="submit" class="btn btn-primary">{{ isset($service) ? 'Update Service' : 'Create Service' }}</button>
        </form>
    </div>
</div>
@push('scripts')
<script>
function previewImg(input) {
    const preview = document.getElementById('img-preview');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => { preview.src = e.target.result; preview.style.display = 'block'; };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush
@endsection