@extends('admin.master')

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

    .about-admin-page * {
        box-sizing: border-box;
    }

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

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

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

    .about-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;
    }

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

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

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

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

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

    .about-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;
    }

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

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

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

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

    .about-admin-table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .about-admin-table {
        width: 100%;
        min-width: 980px;
        border-collapse: collapse;
    }

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

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

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

    .about-admin-image {
        width: 135px;
        height: 90px;
        display: block;
        border-radius: 7px;
        object-fit: cover;
    }

    .about-admin-content-title {
        display: block;
        max-width: 270px;
        margin-bottom: 5px;
        overflow: hidden;
        color: #111827;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .about-admin-small-text {
        display: block;
        max-width: 270px;
        overflow: hidden;
        color: #6b7280;
        font-size: 11px;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

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

    .about-admin-status.active {
        background: #dcfce7;
        color: #15803d;
    }

    .about-admin-status.inactive {
        background: #fee2e2;
        color: #dc2626;
    }

    .about-admin-actions {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .about-admin-actions form {
        margin: 0;
    }

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

    .about-admin-empty i {
        margin-bottom: 15px;
        color: #cbd5e1;
        font-size: 48px;
    }

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

    .about-admin-empty p {
        margin: 0 0 20px;
        font-size: 13px;
    }

    .about-admin-pagination {
        padding: 18px 20px;
        background: #f8fafc;
    }

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

        .about-admin-header {
            flex-direction: column;
        }

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

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

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

<div class="about-admin-page">
    <div class="about-admin-header">
        <div>
            <h1 class="about-admin-title">
                About Home Management
            </h1>

            <p class="about-admin-subtitle">
                Manage the homepage About Wasel Exchange section.
            </p>
        </div>

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

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

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

    <div class="about-admin-card">
        <div class="about-admin-card-header">
            <h2 class="about-admin-card-title">
                <i class="fa-solid fa-address-card"></i>
                About Sections
            </h2>

            <span class="about-admin-count">
                Total: {{ $aboutSections->total() }}
            </span>
        </div>

        @if ($aboutSections->count())
            <div class="about-admin-table-wrapper">
                <table class="about-admin-table">
                    <thead>
                        <tr>
                            <th>Image</th>
                            <th>Section Content</th>
                            <th>Experience</th>
                            <th>Button</th>
                            <th>Status</th>
                            <th>Updated</th>
                            <th>Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($aboutSections as $aboutSection)
                            <tr>
                                <td>
                                    <img
                                        src="{{ asset(
                                            'storage/' .
                                            $aboutSection->image
                                        ) }}"
                                        alt="{{ $aboutSection->image_alt
                                            ?: $aboutSection->title }}"
                                        class="about-admin-image"
                                    >
                                </td>

                                <td>
                                    <span class="about-admin-content-title">
                                        {{ $aboutSection->title }}
                                    </span>

                                    <span class="about-admin-small-text">
                                        {{ $aboutSection->label
                                            ?: 'No label' }}
                                    </span>
                                </td>

                                <td>
                                    <strong>
                                        {{ $aboutSection->experience_number }}
                                        {{ $aboutSection->experience_suffix }}
                                    </strong>

                                    <span class="about-admin-small-text">
                                        {{ $aboutSection->experience_text }}
                                    </span>
                                </td>

                                <td>
                                    @if ($aboutSection->button_text)
                                        <strong>
                                            {{ $aboutSection->button_text }}
                                        </strong>

                                        <span class="about-admin-small-text">
                                            {{ $aboutSection->button_url
                                                ?: 'No URL' }}
                                        </span>
                                    @else
                                        <span class="about-admin-small-text">
                                            No button
                                        </span>
                                    @endif
                                </td>

                                <td>
                                    @if ($aboutSection->is_active)
                                        <span class="about-admin-status active">
                                            Active
                                        </span>
                                    @else
                                        <span class="about-admin-status inactive">
                                            Inactive
                                        </span>
                                    @endif
                                </td>

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

                                    <span class="about-admin-small-text">
                                        {{ $aboutSection->updated_at->format(
                                            'h:i A'
                                        ) }}
                                    </span>
                                </td>

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

                                        <form
                                            action="{{ route(
                                                'admin.about-home.destroy',
                                                $aboutSection
                                            ) }}"
                                            method="POST"
                                            onsubmit="
                                                return confirm(
                                                    'Are you sure you want to delete this section?'
                                                );
                                            "
                                        >
                                            @csrf
                                            @method('DELETE')

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

            @if ($aboutSections->hasPages())
                <div class="about-admin-pagination">
                    {{ $aboutSections->links() }}
                </div>
            @endif
        @else
            <div class="about-admin-empty">
                <i class="fa-regular fa-address-card"></i>

                <h3>No About Section Found</h3>

                <p>
                    Add your first homepage About section.
                </p>

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