@extends('layouts.app')
@section('title','Our Services — Rukay\'s Hairdo & Beauty')
@section('content')
<style>
.services-hero { background:linear-gradient(135deg,#2C1810,#8B3252); color:#fff; padding:4rem 0; text-align:center; }
.services-hero h1 { font-size:2.8rem; margin-bottom:.75rem; }
.services-hero p { font-size:1.05rem; opacity:.85; }
.cat-filter { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin:2.5rem 0; }
.cat-btn { padding:.5rem 1.25rem; border-radius:9999px; border:1.5px solid #E8D5C4; background:#fff; color:#7A6058; font-size:.875rem; cursor:pointer; transition:all .2s; }
.cat-btn:hover, .cat-btn.active { background:#8B3252; color:#fff; border-color:#8B3252; }
.service-full-card { display:grid; grid-template-columns:280px 1fr; gap:0; background:#fff; border-radius:.75rem; border:1px solid #E8D5C4; overflow:hidden; margin-bottom:1.5rem; transition:box-shadow .2s; }
.service-full-card:hover { box-shadow:0 8px 24px rgba(139,50,82,.1); }
.service-full-card img { width:280px; height:220px; object-fit:cover; }
.service-img-placeholder { width:280px; height:220px; background:linear-gradient(135deg,#8B3252,#C9956C); display:flex; align-items:center; justify-content:center; color:#fff; font-size:3rem; }
.service-full-body { padding:1.75rem; }
.service-full-body h3 { font-size:1.4rem; margin-bottom:.35rem; }
.meta-row { display:flex; gap:1.5rem; margin:1rem 0; flex-wrap:wrap; }
.meta-item { font-size:.85rem; color:#7A6058; }
.meta-item strong { color:#2C1810; }
</style>
<div class="services-hero"><div class="container"><h1>Our Services</h1><p>Indulge in our curated selection of premium beauty treatments.</p></div></div>
<div class="container" style="padding-top:1rem;padding-bottom:4rem;">
    <div class="cat-filter">
        <button class="cat-btn active" data-cat="all">All</button>
        @foreach($categories as $cat)<button class="cat-btn" data-cat="{{ $cat }}">{{ $cat }}</button>@endforeach
    </div>
    <div id="services-list">
        @foreach($services as $service)
        <div class="service-full-card" data-cat="{{ $service->category }}">
            @if($service->image_url)<img src="{{ $service->image_url }}" alt="{{ $service->name }}">
            @else<div class="service-img-placeholder">✂</div>@endif
            <div class="service-full-body">
                <div style="font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#8B3252;font-weight:600;margin-bottom:.35rem;">{{ $service->category }}</div>
                <h3>{{ $service->name }}</h3>
                <p style="color:#7A6058;line-height:1.7;margin:.75rem 0;">{{ $service->description }}</p>
                <div class="meta-row">
                    <div class="meta-item"><strong>₵{{ number_format($service->price,2) }}</strong> price</div>
                    <div class="meta-item"><strong>{{ $service->duration_minutes }} min</strong> duration</div>
                    @if($service->requires_deposit)<div class="meta-item"><strong>{{ $service->deposit_percent }}%</strong> deposit required</div>@endif
                </div>
                <a href="{{ route('booking.index') }}?service={{ $service->id }}" class="btn btn-primary">Book This Service</a>
            </div>
        </div>
        @endforeach
    </div>
</div>
@push('scripts')
<script>
document.querySelectorAll('.cat-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.cat-btn').forEach(b=>b.classList.remove('active'));
        btn.classList.add('active');
        const cat = btn.dataset.cat;
        document.querySelectorAll('.service-full-card').forEach(card => {
            card.style.display = (cat==='all'||card.dataset.cat===cat) ? '' : 'none';
        });
    });
});
</script>
@endpush
@endsection