@extends('admin.layouts.app')

@section('title', 'Services')

@section('content')
<style>
    .stat-box { border-radius:12px; padding:16px 20px; display:flex; align-items:center; gap:14px; border:1.5px solid transparent; }
    .stat-box .stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
    .stat-box .stat-val  { font-size:1.5rem; font-weight:700; line-height:1; }
    .stat-box .stat-lbl  { font-size:.78rem; color:#64748b; margin-top:2px; }
    .filter-bar  { background:#fff; border-radius:12px; border:1.5px solid #e9ecef; padding:14px 18px; }
    .filter-input { border:1.5px solid #e5e7eb; border-radius:9px; padding:8px 14px; font-size:.875rem; background:#f9fafb; transition:border-color .2s, background .2s; }
    .filter-input:focus { border-color:#7c3aed; background:#fff; box-shadow:0 0 0 3px rgba(124,58,237,.08); outline:none; }
    .svc-table { border-collapse:separate; border-spacing:0; width:100%; }
    .svc-table thead th { background:#f8fafc; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#64748b; padding:12px 16px; border-bottom:2px solid #e9ecef; white-space:nowrap; }
    .svc-table tbody tr { transition:background .15s; border-bottom:1px solid #f1f5f9; }
    .svc-table tbody tr:last-child { border-bottom:none; }
    .svc-table tbody tr:hover { background:#fafbff; }
    .svc-table tbody td { padding:13px 16px; vertical-align:middle; font-size:.875rem; color:#374151; }
    .cat-pill { display:inline-flex; align-items:center; gap:5px; background:#f3e8ff; color:#6b21a8; padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }
    .price-tag { font-size:.9rem; font-weight:700; color:#059669; }
    .time-tag  { font-size:.8rem; color:#64748b; display:inline-flex; align-items:center; gap:4px; }
    .badge-active   { background:#dcfce7; color:#15803d; padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }
    .badge-inactive { background:#f1f5f9; color:#64748b;  padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }
    .btn-act { width:32px; height:32px; border-radius:8px; border:none; display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; transition:all .18s; cursor:pointer; text-decoration:none; }
    .btn-act-edit   { background:#eff6ff; color:#2563eb; }
    .btn-act-edit:hover   { background:#2563eb; color:#fff; }
    .btn-act-delete { background:#fef2f2; color:#dc2626; }
    .btn-act-delete:hover { background:#dc2626; color:#fff; }
    .empty-state { padding:60px 24px; text-align:center; color:#94a3b8; }
    .empty-state i { font-size:3rem; display:block; margin-bottom:14px; }
</style>

<div class="container-fluid py-2">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <h4 class="fw-bold mb-1" style="color:#1e293b;">
                <i class="bi bi-tools me-2" style="color:#7c3aed;"></i>Services
            </h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0" style="font-size:.82rem;">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.service-categories.index') }}" class="text-decoration-none text-muted">Categories</a></li>
                    <li class="breadcrumb-item active text-muted">Services</li>
                </ol>
            </nav>
        </div>
        <a href="{{ route('admin.services.create') }}"
            class="btn text-white fw-semibold shadow-sm"
            style="background:linear-gradient(135deg,#7c3aed,#4f46e5); border:none; border-radius:10px; padding:10px 20px;">
            <i class="bi bi-plus-lg me-1"></i> Add Service
        </a>
    </div>

    {{-- Flash --}}
    @if(session('success'))
        <div class="d-flex align-items-center gap-2 mb-4 px-4 py-3"
            style="background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:12px; color:#15803d;">
            <i class="bi bi-check-circle-fill fs-5"></i>
            <span class="fw-medium">{{ session('success') }}</span>
            <button type="button" class="btn-close btn-close-sm ms-auto" data-bs-dismiss="alert" style="font-size:.7rem;"></button>
        </div>
    @endif

    {{-- Stats --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#faf5ff,#f3e8ff); border-color:#e9d5ff;">
                <div class="stat-icon" style="background:#e9d5ff;"><i class="bi bi-tools" style="color:#7c3aed;"></i></div>
                <div><div class="stat-val" style="color:#6b21a8;">{{ $stats['total'] }}</div><div class="stat-lbl">Total Services</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:#bbf7d0;">
                <div class="stat-icon" style="background:#bbf7d0;"><i class="bi bi-check-circle" style="color:#16a34a;"></i></div>
                <div><div class="stat-val" style="color:#15803d;">{{ $stats['active'] }}</div><div class="stat-lbl">Active</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#f8fafc,#f1f5f9); border-color:#e2e8f0;">
                <div class="stat-icon" style="background:#e2e8f0;"><i class="bi bi-dash-circle" style="color:#64748b;"></i></div>
                <div><div class="stat-val" style="color:#374151;">{{ $stats['inactive'] }}</div><div class="stat-lbl">Inactive</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-box" style="background:linear-gradient(135deg,#f0fdf9,#d1fae5); border-color:#a7f3d0;">
                <div class="stat-icon" style="background:#a7f3d0;"><i class="bi bi-currency-dollar" style="color:#059669;"></i></div>
                <div><div class="stat-val" style="color:#047857;">Rs {{ number_format($stats['avg_price'], 0) }}</div><div class="stat-lbl">Avg. Price</div></div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="filter-bar mb-4">
        <form method="GET" action="{{ route('admin.services.index') }}" id="filterForm">
            <div class="row g-2 align-items-center">
                <div class="col-12 col-md-4">
                    <div class="input-group" style="border-radius:9px; overflow:hidden;">
                        <span class="input-group-text" style="background:#f9fafb; border:1.5px solid #e5e7eb; border-right:none; color:#9ca3af;">
                            <i class="bi bi-search" style="font-size:.85rem;"></i>
                        </span>
                        <input type="text" name="search" value="{{ request('search') }}"
                            class="filter-input" style="border-left:none; border-radius:0 9px 9px 0; flex:1;"
                            placeholder="Search services...">
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <select name="category" class="filter-input w-100" onchange="document.getElementById('filterForm').submit()">
                        <option value="">All Categories</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->icon }} {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-2">
                    <select name="status" class="filter-input w-100" onchange="document.getElementById('filterForm').submit()">
                        <option value="">All Status</option>
                        <option value="active"   {{ request('status') === 'active'   ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-12 col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-sm fw-semibold px-3"
                        style="background:#7c3aed; color:#fff; border-radius:9px; border:none;">
                        <i class="bi bi-funnel me-1"></i>Filter
                    </button>
                    @if(request()->hasAny(['search','category','status']))
                        <a href="{{ route('admin.services.index') }}"
                            class="btn btn-sm fw-semibold px-3"
                            style="background:#f1f5f9; color:#64748b; border-radius:9px; border:1.5px solid #e9ecef;">
                            <i class="bi bi-x me-1"></i>Clear
                        </a>
                    @endif
                </div>
            </div>
        </form>
    </div>

    {{-- Table --}}
    <div class="card border-0 shadow-sm" style="border-radius:14px; overflow:hidden;">
        <div class="d-flex justify-content-between align-items-center px-4 py-3"
            style="border-bottom:1.5px solid #f1f5f9; background:#fff;">
            <span style="font-size:.875rem; color:#374151; font-weight:600;">
                All Services
                <span class="ms-2 px-2 py-1 rounded-pill" style="background:#f3e8ff; color:#7c3aed; font-size:.75rem;">
                    {{ $services->total() }} result{{ $services->total() !== 1 ? 's' : '' }}
                </span>
            </span>
            <span style="font-size:.78rem; color:#94a3b8;">
                Showing {{ $services->firstItem() ?? 0 }}–{{ $services->lastItem() ?? 0 }} of {{ $services->total() }}
            </span>
        </div>

        <div class="table-responsive">
            <table class="svc-table">
                <thead>
                    <tr>
                        <th>Service Name</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Est. Time</th>
                        <th>Status</th>
                        <th>Sort</th>
                        <th style="width:90px; text-align:center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($services as $service)
                    <tr>
                        <td>
                            <div class="fw-semibold" style="color:#1e293b;">{{ $service->name }}</div>
                            @if($service->description)
                                <div style="font-size:.78rem; color:#94a3b8; margin-top:2px;">{{ Str::limit($service->description, 55) }}</div>
                            @endif
                            @if($service->includes)
                                <div style="font-size:.75rem; color:#7c3aed; margin-top:3px;">
                                    <i class="bi bi-check2-circle me-1"></i>{{ Str::limit($service->includes, 50) }}
                                </div>
                            @endif
                        </td>
                        <td>
                            @if($service->serviceCategory)
                                <span class="cat-pill">
                                    {{ $service->serviceCategory->icon }} {{ $service->serviceCategory->name }}
                                </span>
                            @else
                                <span style="color:#94a3b8; font-size:.8rem;">—</span>
                            @endif
                        </td>
                        <td>
                            <span class="price-tag">Rs {{ number_format($service->base_price, 0) }}</span>
                        </td>
                        <td>
                            @if($service->estimated_time)
                                <span class="time-tag">
                                    <i class="bi bi-clock"></i>{{ $service->estimated_time }} min
                                </span>
                            @else
                                <span style="color:#cbd5e1; font-size:.8rem;">—</span>
                            @endif
                        </td>
                        <td>
                            @if($service->is_active)
                                <span class="badge-active"><i class="bi bi-circle-fill me-1" style="font-size:.5rem; vertical-align:middle;"></i>Active</span>
                            @else
                                <span class="badge-inactive"><i class="bi bi-circle me-1" style="font-size:.5rem; vertical-align:middle;"></i>Inactive</span>
                            @endif
                        </td>
                        <td>
                            <span style="font-size:.82rem; color:#64748b; font-weight:600;">{{ $service->sort_order }}</span>
                        </td>
                        <td>
                            <div class="d-flex justify-content-center gap-1">
                                <a href="{{ route('admin.services.edit', $service) }}" class="btn-act btn-act-edit" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form action="{{ route('admin.services.destroy', $service) }}" method="POST" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn-act btn-act-delete" title="Delete"
                                        onclick="return confirm('Delete \'{{ addslashes($service->name) }}\'?')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7">
                            <div class="empty-state">
                                <i class="bi bi-tools"></i>
                                <div class="fw-semibold mb-1" style="color:#374151; font-size:1rem;">No services found</div>
                                @if(request()->hasAny(['search','category','status']))
                                    <p class="mb-3" style="font-size:.875rem;">Try adjusting your filters.</p>
                                    <a href="{{ route('admin.services.index') }}" class="btn btn-sm" style="border-radius:9px; border:1.5px solid #e9ecef; color:#374151; background:#fff;">Clear Filters</a>
                                @else
                                    <p class="mb-3" style="font-size:.875rem;">Start by adding your first service.</p>
                                    <a href="{{ route('admin.services.create') }}" class="btn btn-sm text-white" style="border-radius:9px; background:linear-gradient(135deg,#7c3aed,#4f46e5); border:none;">
                                        <i class="bi bi-plus-lg me-1"></i> Add First Service
                                    </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($services->hasPages())
        <div class="d-flex justify-content-between align-items-center px-4 py-3"
            style="border-top:1.5px solid #f1f5f9; background:#fafbfc;">
            <span style="font-size:.8rem; color:#64748b;">
                Page {{ $services->currentPage() }} of {{ $services->lastPage() }} &nbsp;·&nbsp; {{ $services->total() }} total
            </span>
            {{ $services->links('vendor.pagination.bootstrap-5') }}
        </div>
        @endif
    </div>

</div>
@endsection