@extends('layouts.master')

@section('title', 'Our Locations | Trew India Pvt Ltd')

@section('content')
<main class="main">

    <!-- Breadcrumb -->
    <div class="site-breadcrumb" style="background: url(assets/img/breadcrumb/01.jpg)">
        <div class="container">
            <h2 class="breadcrumb-title">Our Locations</h2>
            <ul class="breadcrumb-menu">
                <li><a href="{{ route('index') }}">Home</a></li>
                <li class="active">Our Locations</li>
            </ul>
        </div>
    </div>

    <!-- Locations Section -->
    <section class="location-area py-5 text-center bg-light">
        <div class="container">
            <h5 class="text-orange wow fadeInDown" data-wow-delay=".2s">Our Expertise</h5>
            <h3 class="fw-bold text-black mb-3 wow fadeInUp" data-wow-delay=".4s">
                Know About Our Locations
            </h3>
            <p class="mb-5 wow fadeInUp" data-wow-delay=".6s">
                At Myraluxa, we offer advanced skincare treatments across multiple locations for your comfort and convenience.
                Discover our modern clinics and expert professionals who bring aesthetic excellence closer to you.
            </p>

            <div class="row justify-content-center g-4">
                @forelse($locations as $loc)
                    <div class="col-md-6 col-lg-3 wow zoomIn" data-wow-delay=".2s">
                        <div class="location-card border rounded-4 shadow-sm bg-white p-4 hover-up">
                            <div class="location-icon mb-3">
                                <i class="far fa-map-marker-alt fa-2x text-primary"></i>
                            </div>
                            <h4 class="fw-bold text-primary">{{ $loc->city_name }}</h4>
                            <p class="text-muted">{{ Str::limit($loc->short_description, 100) }}</p>
                            <a href="{{ url($loc->slug) }}" class="btn btn-outline-primary mt-3">
                                View Details <i class="far fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                @empty
                    <p class="text-center">No locations found.</p>
                @endforelse
            </div>
        </div>
    </section>

</main>
@endsection

<style>
    .hover-up {
        transition: all 0.3s ease-in-out;
    }
    .hover-up:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    .text-orange {
        color: #ff7b00;
    }
    .location-card i {
        transition: color 0.3s ease;
    }
    .location-card:hover i {
        color: #ff7b00;
    }
</style>