@extends('layouts.app')
@section('title', $service->title ?? 'Service Detail')

@section('content')

<div class="page-hero">
    <div class="container">
        <h1>{{ $service->title }}</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb justify-content-center mb-0">
            <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-warning">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('services') }}" class="text-warning">Services</a></li>
            <li class="breadcrumb-item active text-white">{{ $service->title }}</li>
        </ol></nav>
    </div>
</div>

<section class="py-5">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-8">
                @if($service->image)
                <img src="{{ asset('storage/'.$service->image) }}" class="img-fluid rounded-3 mb-4 w-100"
                     style="max-height:420px;object-fit:cover" alt="{{ $service->title }}">
                @endif
                <div class="prose">
                    {!! nl2br(e($service->description)) !!}
                </div>
            </div>
            <div class="col-lg-4">
                <!-- Booking Sidebar -->
                <div class="card border-0 shadow p-4 sticky-top" style="top:80px;border-radius:14px">
                    <h5 style="color:var(--purple-dark)" class="mb-4">Book This Service</h5>
                    @if(session('success'))
                    <div class="alert alert-success small">{{ session('success') }}</div>
                    @endif
                    <form action="{{ route('contact.submit') }}" method="POST">
                        @csrf
                        <input type="hidden" name="service" value="{{ $service->title }}">
                        <div class="mb-3">
                            <input type="text" name="name" class="form-control" placeholder="Your Name" required>
                        </div>
                        <div class="mb-3">
                            <input type="email" name="email" class="form-control" placeholder="Email" required>
                        </div>
                        <div class="mb-3">
                            <input type="tel" name="phone" class="form-control" placeholder="Phone" required>
                        </div>
                        <div class="mb-3">
                            <textarea name="message" class="form-control" rows="3" placeholder="Any questions or specific concerns..."></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Send Enquiry</button>
                    </form>
                    <hr>
                    <div class="text-center">
                        <a href="https://wa.me/919810897192?text=Hi Auromon Chakrabarti, I'm interested in {{ urlencode($service->title) }}"
                           class="btn btn-outline-success w-100">
                            <i class="fab fa-whatsapp me-2"></i>WhatsApp Now
                        </a>
                    </div>
                </div>
            </div>
        </div>

        @if($related->count())
        <hr class="my-5">
        <h3 class="section-title mb-5 text-center">Other Services</h3>
        <div class="row g-4 mt-2">
            @foreach($related as $s)
            <div class="col-md-4">
                <div class="card service-card h-100">
                    <div class="d-flex align-items-center justify-content-center"
                         style="height:160px;background:linear-gradient(135deg,#f0e8f7,#e8d4f5)">
                        <i class="{{ $s->icon ?? 'fas fa-spa' }} fa-2x" style="color:var(--purple-dark);opacity:0.65"></i>
                    </div>
                    <div class="card-body text-center p-3">
                        <h6 class="card-title">{{ $s->title }}</h6>
                        <a href="{{ route('service.detail', $s->slug) }}" class="btn btn-outline-primary btn-sm">Learn More</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</section>
@endsection