@extends('admin.master')

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .partner-admin-table {
        width: 100%;
        min-width: 720px;
        border-collapse: collapse;
    }

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

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

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

    .partner-admin-image-box {
        width: 190px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        border-radius: 7px;
        background: #f8fafc;
    }

    .partner-admin-image {
        max-width: 100%;
        max-height: 66px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

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

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

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

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

    .partner-admin-date {
        display: block;
        color: #111827;
        font-weight: 600;
    }

    .partner-admin-time {
        display: block;
        margin-top: 4px;
        color: #6b7280;
        font-size: 11px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

<div class="partner-admin-page">
    <div class="partner-admin-header">
        <div>
            <h1 class="partner-admin-title">
                Trusted Partners
            </h1>

            <p class="partner-admin-subtitle">
                Manage the trusted partner logos displayed on the homepage.
            </p>
        </div>

        <a
            href="{{ route('admin.home-partners.create') }}"
            class="partner-admin-button"
        >
            <i class="fa-solid fa-plus"></i>
            Add Partner Logo
        </a>
    </div>

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

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

    <div class="partner-admin-card">
        <div class="partner-admin-card-header">
            <h2 class="partner-admin-card-title">
                <i class="fa-solid fa-handshake"></i>
                Partner Logos
            </h2>

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

        @if ($partners->count())
            <div class="partner-admin-table-wrapper">
                <table class="partner-admin-table">
                    <thead>
                        <tr>
                            <th>Image</th>
                            <th>Status</th>
                            <th>Updated</th>
                            <th>Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($partners as $partner)
                            <tr>
                                <td>
                                    <div class="partner-admin-image-box">
                                        <img
                                            src="{{ asset(
                                                'storage/' .
                                                $partner->image
                                            ) }}"
                                            alt="Partner Logo"
                                            class="partner-admin-image"
                                        >
                                    </div>
                                </td>

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

                                <td>
                                    <span class="partner-admin-date">
                                        {{ $partner->updated_at->format(
                                            'd M Y'
                                        ) }}
                                    </span>

                                    <span class="partner-admin-time">
                                        {{ $partner->updated_at->format(
                                            'h:i A'
                                        ) }}
                                    </span>
                                </td>

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

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

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

            @if ($partners->hasPages())
                <div class="partner-admin-pagination">
                    {{ $partners->links() }}
                </div>
            @endif
        @else
            <div class="partner-admin-empty">
                <i class="fa-regular fa-images"></i>

                <h3>No Partner Logo Found</h3>

                <p>
                    Add the first trusted partner logo.
                </p>

                <a
                    href="{{ route('admin.home-partners.create') }}"
                    class="partner-admin-button"
                >
                    <i class="fa-solid fa-plus"></i>
                    Add Partner Logo
                </a>
            </div>
        @endif
    </div>
</div>
@endsection