@extends('admin.master')

@section('content')
<style>
    .home-service-admin {
        width: 100%;
        padding: 24px;
    }

    .home-service-admin * {
        box-sizing: border-box;
    }

    .home-service-admin-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 22px;
    }

    .home-service-admin-title {
        margin: 0 0 6px;
        color: #111827;
        font-size: 26px;
        font-weight: 700;
    }

    .home-service-admin-subtitle {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.6;
    }

    .home-service-admin-button {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 16px;
        border: 0;
        border-radius: 7px;
        background: #ff5722;
        color: #ffffff;
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: 0.2s ease;
    }

    .home-service-admin-button:hover {
        background: #e64917;
        color: #ffffff;
    }

    .home-service-admin-button.edit {
        min-height: 35px;
        padding: 7px 11px;
        background: #eaf2ff;
        color: #2563eb;
    }

    .home-service-admin-button.edit:hover {
        background: #2563eb;
        color: #ffffff;
    }

    .home-service-admin-button.delete {
        min-height: 35px;
        padding: 7px 11px;
        background: #fee2e2;
        color: #dc2626;
    }

    .home-service-admin-button.delete:hover {
        background: #dc2626;
        color: #ffffff;
    }

    .home-service-admin-alert {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        padding: 13px 15px;
        border-radius: 7px;
        background: #dcfce7;
        color: #166534;
        font-size: 14px;
    }

    .home-service-admin-card {
        overflow: hidden;
        border-radius: 10px;
        background: #ffffff;
    }

    .home-service-admin-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 18px 20px;
        background: #f8fafc;
    }

    .home-service-admin-card-title {
        margin: 0;
        color: #111827;
        font-size: 17px;
        font-weight: 700;
    }

    .home-service-admin-count {
        color: #6b7280;
        font-size: 13px;
    }

    .home-service-table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .home-service-table {
        width: 100%;
        min-width: 920px;
        border-collapse: collapse;
    }

    .home-service-table th {
        padding: 13px 15px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
    }

    .home-service-table td {
        padding: 15px;
        color: #374151;
        font-size: 13px;
        vertical-align: middle;
    }

    .home-service-table tbody tr:nth-child(even) {
        background: #fafafa;
    }

    .home-service-section-title {
        display: block;
        max-width: 340px;
        overflow: hidden;
        color: #111827;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-service-small-text {
        display: block;
        max-width: 300px;
        margin-top: 4px;
        overflow: hidden;
        color: #6b7280;
        font-size: 11px;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-service-count-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 10px;
        border-radius: 20px;
        background: #fff0eb;
        color: #e64917;
        font-size: 12px;
        font-weight: 700;
    }

    .home-service-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 9px;
        border-radius: 30px;
        font-size: 11px;
        font-weight: 700;
    }

    .home-service-status::before {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        content: "";
    }

    .home-service-status.active {
        background: #dcfce7;
        color: #15803d;
    }

    .home-service-status.inactive {
        background: #fee2e2;
        color: #dc2626;
    }

    .home-service-actions {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .home-service-actions form {
        margin: 0;
    }

    .home-service-empty {
        padding: 70px 20px;
        color: #6b7280;
        text-align: center;
    }

    .home-service-empty i {
        display: block;
        margin-bottom: 15px;
        color: #cbd5e1;
        font-size: 48px;
    }

    .home-service-empty h3 {
        margin: 0 0 8px;
        color: #111827;
        font-size: 19px;
    }

    .home-service-empty p {
        margin: 0 0 20px;
        font-size: 13px;
    }

    .home-service-pagination {
        padding: 18px 20px;
        background: #f8fafc;
    }

    @media (max-width: 767px) {
        .home-service-admin {
            padding: 16px;
        }

        .home-service-admin-header {
            flex-direction: column;
        }

        .home-service-admin-header
        .home-service-admin-button {
            width: 100%;
        }

        .home-service-admin-title {
            font-size: 22px;
        }

        .home-service-admin-card-header {
            align-items: flex-start;
            flex-direction: column;
        }
    }
</style>

<div class="home-service-admin">
    <div class="home-service-admin-header">
        <div>
            <h1 class="home-service-admin-title">
                Home Services Management
            </h1>

            <p class="home-service-admin-subtitle">
                Manage the homepage service section and service cards.
            </p>
        </div>

        <a
            href="{{ route('admin.home-services.create') }}"
            class="home-service-admin-button"
        >
            <i class="fa-solid fa-plus"></i>
            Add Service Section
        </a>
    </div>

    @if (session('success'))
        <div class="home-service-admin-alert">
            <i class="fa-solid fa-circle-check"></i>

            <span>
                {{ session('success') }}
            </span>
        </div>
    @endif

    <div class="home-service-admin-card">
        <div class="home-service-admin-card-header">
            <h2 class="home-service-admin-card-title">
                <i class="fa-solid fa-grid-2"></i>
                Service Sections
            </h2>

            <span class="home-service-admin-count">
                Total: {{ $serviceSections->total() }}
            </span>
        </div>

        @if ($serviceSections->count())
            <div class="home-service-table-wrapper">
                <table class="home-service-table">
                    <thead>
                        <tr>
                            <th>Section Content</th>
                            <th>Cards</th>
                            <th>Center Logo</th>
                            <th>Status</th>
                            <th>Updated</th>
                            <th>Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($serviceSections as $serviceSection)
                            <tr>
                                <td>
                                    <span class="home-service-section-title">
                                        {{ $serviceSection->title }}
                                    </span>

                                    <span class="home-service-small-text">
                                        {{ $serviceSection->label
                                            ?: 'No section label' }}
                                    </span>
                                </td>

                                <td>
                                    <span class="home-service-count-badge">
                                        <i class="fa-solid fa-layer-group"></i>

                                        {{ $serviceSection->services_count }}
                                        Services
                                    </span>
                                </td>

                                <td>
                                    {{ $serviceSection->center_logo ?: 'We' }}
                                </td>

                                <td>
                                    @if ($serviceSection->is_active)
                                        <span class="home-service-status active">
                                            Active
                                        </span>
                                    @else
                                        <span class="home-service-status inactive">
                                            Inactive
                                        </span>
                                    @endif
                                </td>

                                <td>
                                    {{ $serviceSection->updated_at->format(
                                        'd M Y'
                                    ) }}

                                    <span class="home-service-small-text">
                                        {{ $serviceSection->updated_at->format(
                                            'h:i A'
                                        ) }}
                                    </span>
                                </td>

                                <td>
                                    <div class="home-service-actions">
                                        <a
                                            href="{{ route(
                                                'admin.home-services.edit',
                                                $serviceSection
                                            ) }}"
                                            class="home-service-admin-button edit"
                                        >
                                            <i class="fa-solid fa-pen-to-square"></i>
                                            Edit
                                        </a>

                                        <form
                                            action="{{ route(
                                                'admin.home-services.destroy',
                                                $serviceSection
                                            ) }}"
                                            method="POST"
                                            onsubmit="
                                                return confirm(
                                                    'Delete this service section and all its cards?'
                                                );
                                            "
                                        >
                                            @csrf
                                            @method('DELETE')

                                            <button
                                                type="submit"
                                                class="home-service-admin-button delete"
                                            >
                                                <i class="fa-solid fa-trash"></i>
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if ($serviceSections->hasPages())
                <div class="home-service-pagination">
                    {{ $serviceSections->links() }}
                </div>
            @endif
        @else
            <div class="home-service-empty">
                <i class="fa-solid fa-briefcase"></i>

                <h3>No Service Section Found</h3>

                <p>
                    Add the homepage service section and cards.
                </p>

                <a
                    href="{{ route('admin.home-services.create') }}"
                    class="home-service-admin-button"
                >
                    <i class="fa-solid fa-plus"></i>
                    Create Service Section
                </a>
            </div>
        @endif
    </div>
</div>
@endsection