@extends('front.layouts.master-auth')
@section('content')
    <!-- Start Page Content -->
    <section class="page-content">
        <div class="container">
            <div class="addOffer-page-title">
                <h2 class="addOffer-name">
                    {{ $title }}
                </h2>
                <div class="addOffer-actions">
                    <a href="{{ route('support.create') }}" class="btn btn-success">
                        <i class="fas fa-plus"></i>
                        @lang('Open New Ticket')
                    </a>
                </div>
            </div>

            <div class="support-tickets-container">
                @if(count($supports) > 0)
                    <div class="tickets-list">
                        @foreach($supports as $support)
                            <div class="ticket-item">
                                <div class="ticket-header">
                                    <div class="ticket-info">
                                        <h3 class="ticket-title">
                                            <a href="{{ route('support.show', $support->id) }}">
                                                {{ $support->title ?: 'Support Ticket #' . $support->id }}
                                            </a>
                                        </h3>
{{--                                        <div class="ticket-meta">--}}
{{--                                            <span class="ticket-type">--}}
{{--                                                @if($support->type)--}}
{{--                                                    {{ getTrans($support->type->display_name, lang()) }}--}}
{{--                                                @else--}}
{{--                                                    @lang('General')--}}
{{--                                                @endif--}}
{{--                                            </span>--}}
{{--                                            <span class="ticket-date">--}}
{{--                                                {{ localized_friendly_time($support->created_at) }}--}}
{{--                                            </span>--}}
{{--                                        </div>--}}
                                    </div>
                                    <div class="ticket-status">
                                        @if($support->status == 'pending')
                                            <span class="status-badge status-pending">
                                                @lang('Waiting')
                                            </span>
                                        @elseif($support->status == 'open')
                                            <span class="status-badge status-open">
                                                @lang('Open')
                                            </span>
                                        @else
                                            <span class="status-badge status-closed">
                                                @lang('Closed')
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="ticket-body">
                                    <p class="ticket-description">
                                        {{ Str::limit($support->body, 150) }}
                                    </p>

                                    @if($support->image)
                                        <div class="ticket-image">
                                            <img src="{{ $support->image }}" alt="Support Image" class="img-thumbnail" style="max-width: 100px;" loading="lazy" decoding="async">
                                        </div>
                                    @endif
                                </div>

                                <div class="ticket-footer">
                                    <div class="ticket-priority">
                                        @if($support->type)
                                            {{ getTrans($support->type->display_name, lang()) }}
                                        @else
                                            @lang('General')
                                        @endif
                                        <span class="priority-label">
                                            {{ localized_friendly_time($support->created_at) }}
                                        </span>
                                    </div>

                                    <div class="ticket-replies">
                                        <span class="replies-count">
                                            {{ count($support->threads) }} @lang('replies')
                                        </span>
                                    </div>

                                    <div class="ticket-actions">
                                        <a href="{{ route('support.show', $support->id) }}" class="btn btn-sm btn-outline-success">
                                            @lang('View Details')
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="pagination-container">
                        {{ $supports->links('front.pagination') }}
                    </div>
                @else
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h3>@lang('No Support Tickets')</h3>
                        <p>@lang('لم تقم بإنشاء أي تذاكر دعم فني بعد.')</p>
                        <a href="{{ route('support.create') }}" style="background-color: #14965A; border: 0;border-radius: 0;" class="btn btn-primary">
                            @lang('Create Your First Ticket')
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <style>
        .support-tickets-container {
            margin-top: 2rem;
        }

        .tickets-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .ticket-item {
            background: #fff;
            /* border: 1px solid #e0e0e0; */
            /* border-radius: 8px; */
            padding: 15px;
            /* box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: box-shadow 0.3s ease; */
        }

        /* .ticket-item:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        } */

        .ticket-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .ticket-title {
            margin: 0 0 0.5rem 0;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .ticket-title a {
            color: #333;
            text-decoration: none;
        }

        /* .ticket-title a:hover {
            color: #007bff;
        } */

        .ticket-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.9rem;
            color: #666;
        }

        .ticket-type {
            background: #f8f9fa;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }

        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .status-pending {
            background: #fff3cd;
            color: #856404;
        }

        .status-open {
            background: #d1ecf1;
            color: #0c5460;
        }

        .status-closed {
            background: #d4edda;
            color: #155724;
        }

        .ticket-body {
            margin-bottom: 1rem;
        }

        .ticket-description {
            color: #666;
            margin-bottom: 0.5rem;
        }

        .ticket-image {
            margin-top: 0.5rem;
        }

        .ticket-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid #e0e0e0;
        }

        .ticket-priority {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .priority-label {
            font-size: 0.9rem;
            color: #666;
        }

        .priority-low {
            color: #28a745;
            font-weight: 500;
        }

        .priority-medium {
            color: #ffc107;
            font-weight: 500;
        }

        .priority-high {
            color: #dc3545;
            font-weight: 500;
        }

        .replies-count {
            font-size: 0.9rem;
            color: #666;
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
        }

        .empty-icon {
            font-size: 4rem;
            color: #ccc;
            margin-bottom: 1rem;
        }

        .empty-state h3 {
            margin-bottom: 0.5rem;
            color: #666;
        }

        .empty-state p {
            color: #999;
            margin-bottom: 2rem;
        }

        .addOffer-actions {
            margin-top: 1rem;
        }

        .btn-success{
            background-color: #14965A;
            border-color: unset;
            border-radius: 0;
        }

        .pagination-container {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }

        @media (max-width: 768px) {
            .ticket-header {
                flex-direction: column;
                gap: 1rem;
            }

            .ticket-footer {
                flex-direction: column;
                gap: 1rem;
                align-items: flex-start;
            }

            .ticket-meta {
                flex-direction: column;
                gap: 0.5rem;
            }
        }
    </style>
@endsection