@extends('admin.master')

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

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

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

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

    .service-admin-subtitle {
        margin: 0;
        color: #64748b;
        font-size: 14px;
    }

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

    .service-admin-button.view {
        background: #ecfdf5;
        color: #047857;
    }

    .service-admin-button.edit {
        background: #eaf2ff;
        color: #2563eb;
    }

    .service-admin-button.delete {
        background: #fee2e2;
        color: #dc2626;
    }

    .service-admin-alert {
        margin-bottom: 18px;
        padding: 13px 15px;
        border-radius: 7px;
        background: #dcfce7;
        color: #166534;
        font-size: 14px;
    }

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

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

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

    .service-admin-count {
        color: #64748b;
        font-size: 13px;
    }

    .service-admin-table-wrap {
        width: 100%;
        overflow-x: auto;
    }

    .service-admin-table {
        width: 100%;
        min-width: 1050px;
        border-collapse: collapse;
    }

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

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

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

    .service-admin-image {
        width: 135px;
        height: 76px;
        display: block;
        border-radius: 6px;
        object-fit: cover;
    }

    .service-admin-no-image {
        width: 135px;
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: #f1f5f9;
        color: #94a3b8;
        font-size: 11px;
    }

    .service-admin-name {
        display: block;
        color: #111827;
        font-weight: 700;
    }

    .service-admin-slug {
        display: block;
        margin-top: 5px;
        color: #64748b;
        font-size: 11px;
    }

    .service-admin-status {
        display: inline-flex;
        padding: 6px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
    }

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

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

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

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

    .service-admin-empty {
        padding: 60px 20px;
        color: #64748b;
        text-align: center;
    }

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

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

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

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

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

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

<div class="service-admin-page">
    <div class="service-admin-header">
        <div>
            <h1 class="service-admin-title">
                Service Pages
            </h1>

            <p class="service-admin-subtitle">
                Manage all service pages and navigation order.
            </p>
        </div>

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

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

    <div class="service-admin-card">
        <div class="service-admin-card-header">
            <h2 class="service-admin-card-title">
                <i class="fa-solid fa-layer-group"></i>
                All Service Pages
            </h2>

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

        @if ($servicePages->count())
            <div class="service-admin-table-wrap">
                <table class="service-admin-table">
                    <thead>
                        <tr>
                            <th>Banner</th>
                            <th>Service Page</th>
                            <th>Banner Title</th>
                            <th>Order</th>
                            <th>Status</th>
                            <th>Updated</th>
                            <th>Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach (
                            $servicePages as $servicePage
                        )
                            @php
                                $previewUrl = match (
                                    $servicePage->slug
                                ) {
                                    'currency-exchange' =>
                                        route(
                                            'service.currency-exchange'
                                        ),

                                    'bank-transfer' =>
                                        route(
                                            'service.bank-transfer'
                                        ),

                                    'cash-pickup' =>
                                        route(
                                            'service.cash-pickup'
                                        ),

                                    'utility-bill' =>
                                        route(
                                            'service.utility-bill'
                                        ),

                                    'wallet-transfer' =>
                                        route(
                                            'service.wallet-transfer'
                                        ),

                                    default =>
                                        route(
                                            'services.show',
                                            $servicePage
                                        ),
                                };
                            @endphp

                            <tr>
                                <td>
                                    @if (
                                        $servicePage->banner_image
                                    )
                                        <img
                                            src="{{ asset(
                                                'storage/' .
                                                $servicePage
                                                    ->banner_image
                                            ) }}"
                                            alt="{{ $servicePage
                                                ->banner_title }}"
                                            class="service-admin-image"
                                        >
                                    @else
                                        <div class="service-admin-no-image">
                                            Default Banner
                                        </div>
                                    @endif
                                </td>

                                <td>
                                    <span class="service-admin-name">
                                        {{ $servicePage->menu_title }}
                                    </span>

                                    <span class="service-admin-slug">
                                        /{{ $servicePage->slug }}
                                    </span>
                                </td>

                                <td>
                                    {{ $servicePage->banner_title }}
                                </td>

                                <td>
                                    {{ $servicePage->sort_order }}
                                </td>

                                <td>
                                    <span class="service-admin-status
                                        {{
                                            $servicePage->is_active
                                                ? 'active'
                                                : 'inactive'
                                        }}"
                                    >
                                        {{
                                            $servicePage->is_active
                                                ? 'Active'
                                                : 'Inactive'
                                        }}
                                    </span>
                                </td>

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

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

                                <td>
                                    <div class="service-admin-actions">
                                        <a
                                            href="{{ $previewUrl }}"
                                            class="service-admin-button view"
                                            target="_blank"
                                            title="View frontend"
                                        >
                                            <i class="fa-solid fa-eye"></i>
                                        </a>

                                        <a
                                            href="{{ route(
                                                'admin.service-pages.edit',
                                                $servicePage
                                            ) }}"
                                            class="service-admin-button edit"
                                        >
                                            <i class="fa-solid fa-pen"></i>
                                            Edit
                                        </a>

                                        <form
                                            action="{{ route(
                                                'admin.service-pages.destroy',
                                                $servicePage
                                            ) }}"
                                            method="POST"
                                            onsubmit="
                                                return confirm(
                                                    'Delete this service page?'
                                                );
                                            "
                                        >
                                            @csrf
                                            @method('DELETE')

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

            @if ($servicePages->hasPages())
                <div class="service-admin-pagination">
                    {{ $servicePages->links() }}
                </div>
            @endif
        @else
            <div class="service-admin-empty">
                <i
                    class="fa-solid fa-layer-group"
                    style="font-size:44px;margin-bottom:15px;"
                ></i>

                <h3>
                    No service page found
                </h3>

                <p>
                    Create your first service page.
                </p>
            </div>
        @endif
    </div>
</div>
@endsection