@extends('layouts.support')

@section('content')

<div class="max-w-7xl mx-auto">

    <!-- Top Navigation -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 my-8">
        <div class=""></div>

        <a href="{{ route('support.create') }}"
           class="h-14 px-7 rounded-2xl bg-green-600 hover:bg-green-700 text-white font-semibold transition flex items-center justify-center gap-2 shadow-lg shadow-green-100">

            <span class="material-symbols-outlined text-[20px]">
                add
            </span>

            Create Ticket
        </a>

    </div>

    <!-- Company Card -->
    <div class="bg-white border border-[#D9DFEF] rounded-3xl p-6 mb-8 shadow-sm"
         data-company-card>

        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">

            <!-- Left -->
            <div class="flex items-start gap-5">

                <div class="w-20 h-20 rounded-2xl bg-[#EEF4FF] border border-[#DCE6FA] flex items-center justify-center overflow-hidden">

                    <img id="company-logo"
                         data-company-logo
                         src=""
                         alt="Company Logo"
                         style="display:none; width:100%; height:100%; object-fit:contain;" />

                    <span class="material-symbols-outlined text-[#16A34A] text-[38px]"
                          id="company-icon">
                        business
                    </span>

                </div>

                <div>
                    <h2 class="text-2xl font-bold text-[#111827]"
                        data-company-name>
                        Loading...
                    </h2>

                    <div class="space-y-2 mt-3 text-sm text-gray-600">

                        <p class="break-all"
                           data-company-email>
                            Loading...
                        </p>

                        <p data-company-phone>
                            Loading...
                        </p>

                        <p data-company-address>
                            Loading...
                        </p>

                    </div>
                </div>

            </div>

            <!-- Right -->
            <div class="grid grid-cols-2 gap-4">

                <div class="rounded-2xl border border-[#E3E8F4] bg-[#F8FAFF] px-6 py-5 min-w-[150px]">

                    <p class="text-xs text-gray-500 font-semibold uppercase mb-2">
                        Plan
                    </p>

                    <p class="text-2xl font-bold capitalize text-[#111827]"
                       data-company-plan>
                        N/A
                    </p>

                </div>

                <div class="rounded-2xl border border-[#E3E8F4] bg-[#F8FAFF] px-6 py-5 min-w-[150px]">

                    <p class="text-xs text-gray-500 font-semibold uppercase mb-2">
                        Expiry
                    </p>

                    <p class="text-xl font-bold text-[#111827]"
                       data-company-expiry>
                        N/A
                    </p>

                </div>

            </div>

        </div>

    </div>

    @if(session('success'))
        <div class="mb-6 rounded-2xl border border-green-200 bg-green-50 px-5 py-4 text-green-700">
            {{ session('success') }}
        </div>
    @endif

    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">

        <!-- Open -->
        <div class="bg-white border border-[#DCE7F5] rounded-3xl p-6 shadow-sm">

            <div class="flex items-center justify-between mb-5">

                <div>
                    <p class="text-gray-500 text-sm font-medium mb-2">
                        Open Tickets
                    </p>

                    <h3 class="text-4xl font-bold text-[#111827]">
                        {{ $openCount }}
                    </h3>
                </div>

                <div class="w-16 h-16 rounded-2xl bg-green-50 flex items-center justify-center">
                    <span class="material-symbols-outlined text-green-600 text-[30px]">
                        mark_email_unread
                    </span>
                </div>

            </div>

            <div class="h-2 rounded-full bg-green-100 overflow-hidden">
                <div class="h-full bg-green-600 rounded-full w-[70%]"></div>
            </div>

        </div>

        <!-- Closed -->
        <div class="bg-white border border-[#DCE7F5] rounded-3xl p-6 shadow-sm">

            <div class="flex items-center justify-between mb-5">

                <div>
                    <p class="text-gray-500 text-sm font-medium mb-2">
                        Closed Tickets
                    </p>

                    <h3 class="text-4xl font-bold text-[#111827]">
                        {{ $closedCount }}
                    </h3>
                </div>

                <div class="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-gray-600 text-[30px]">
                        task_alt
                    </span>
                </div>

            </div>

            <div class="h-2 rounded-full bg-gray-200 overflow-hidden">
                <div class="h-full bg-gray-500 rounded-full w-[55%]"></div>
            </div>

        </div>

        <!-- Total -->
        <div class="bg-gradient-to-br from-green-600 to-green-700 rounded-3xl p-6 shadow-lg shadow-green-100 text-white">

            <div class="flex items-center justify-between mb-5">

                <div>
                    <p class="text-green-100 text-sm font-medium mb-2">
                        Total Tickets
                    </p>

                    <h3 class="text-4xl font-bold">
                        {{ $openCount + $closedCount }}
                    </h3>
                </div>

                <div class="w-16 h-16 rounded-2xl bg-white/10 flex items-center justify-center">
                    <span class="material-symbols-outlined text-white text-[30px]">
                        confirmation_number
                    </span>
                </div>

            </div>

            <div class="text-sm text-green-100">
                Track all support requests
            </div>

        </div>

    </div>

    <!-- Tabs -->
    <div class="flex items-center gap-3 mb-8 overflow-x-auto">

        <a href="{{ route('support.index', ['status' => 'open']) }}"
           class="h-12 px-6 rounded-2xl font-semibold whitespace-nowrap transition flex items-center gap-2
           {{ $status === 'open'
                ? 'bg-green-600 text-white shadow-lg shadow-green-100'
                : 'bg-white border border-[#DCE7F5] text-gray-600 hover:bg-gray-50' }}">

            <span class="material-symbols-outlined text-[20px]">
                mark_email_unread
            </span>

            Open Tickets

        </a>

        <a href="{{ route('support.index', ['status' => 'closed']) }}"
           class="h-12 px-6 rounded-2xl font-semibold whitespace-nowrap transition flex items-center gap-2
           {{ $status === 'closed'
                ? 'bg-green-600 text-white shadow-lg shadow-green-100'
                : 'bg-white border border-[#DCE7F5] text-gray-600 hover:bg-gray-50' }}">

            <span class="material-symbols-outlined text-[20px]">
                task_alt
            </span>

            Closed Tickets

        </a>

    </div>

    <!-- Tickets -->
    <div class="space-y-5">

        @if($tickets->count())

            @foreach($tickets as $ticket)

                <a href="{{ route('support.show', $ticket->id) }}"
                   class="group block bg-white border border-[#D9DFEF] rounded-3xl p-6 shadow-sm hover:shadow-lg hover:border-green-200 transition-all duration-300">

                    <div class="flex flex-col xl:flex-row xl:items-start xl:justify-between gap-5">

                        <!-- Left -->
                        <div class="flex-1 min-w-0">

                            <!-- Top -->
                            <div class="flex flex-wrap items-center gap-3 mb-3">

                                <h3 class="text-2xl font-bold text-[#111827] group-hover:text-green-600 transition">
                                    {{ $ticket->subject }}
                                </h3>

                                <span class="px-4 py-1 rounded-full text-sm font-semibold
                                    {{ $ticket->status === 'open'
                                        ? 'bg-green-100 text-green-700'
                                        : 'bg-gray-100 text-gray-700' }}">

                                    {{ strtoupper($ticket->status) }}

                                </span>

                            </div>

                            <!-- Description -->
                            <p class="text-gray-600 leading-7 mb-5">
                                {{ Str::limit($ticket->description, 140) }}
                            </p>

                            <!-- Meta -->
                            <div class="flex flex-wrap items-center gap-3">

                                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-[#F5F7FD] text-sm font-semibold text-[#111827]">

                                    <span class="material-symbols-outlined text-[18px] text-green-600">
                                        tag
                                    </span>

                                    #{{ $ticket->id }}

                                </div>

                                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-[#F5F7FD] text-sm font-semibold text-[#111827]">

                                    <span class="material-symbols-outlined text-[18px] text-green-600">
                                        business
                                    </span>

                                    {{ $ticket->company_name ?? 'Company' }}

                                </div>

                                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-[#F5F7FD] text-sm font-semibold text-[#111827]">

                                    <span class="material-symbols-outlined text-[18px] text-green-600">
                                        calendar_month
                                    </span>

                                    {{ $ticket->created_at->format('M d, Y') }}

                                </div>

                                @if($ticket->replies_count > 0)

                                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-[#F5F7FD] text-sm font-semibold text-[#111827]">

                                        <span class="material-symbols-outlined text-[18px] text-green-600">
                                            forum
                                        </span>

                                        {{ $ticket->replies_count }}
                                        {{ Str::plural('reply', $ticket->replies_count) }}

                                    </div>

                                @endif

                            </div>

                            <!-- Modules -->
                            @if($ticket->module)

                                @php
                                    $modules = is_string($ticket->module)
                                        ? json_decode($ticket->module, true)
                                        : (is_array($ticket->module) ? $ticket->module : []);
                                @endphp

                                <div class="flex flex-wrap gap-2 mt-5">

                                    @foreach($modules as $mod)

                                        <span class="px-4 py-2 rounded-xl bg-green-50 text-green-700 text-sm font-semibold border border-green-100">
                                            {{ $mod }}
                                        </span>

                                    @endforeach

                                </div>

                            @endif

                        </div>

                        <!-- Arrow -->
                        <div class="flex items-center justify-end">

                            <div class="w-14 h-14 rounded-2xl bg-[#F5F7FD] group-hover:bg-green-600 transition flex items-center justify-center">

                                <span class="material-symbols-outlined text-gray-500 group-hover:text-white transition text-[24px] rtl:rotate-180">
                                    arrow_forward
                                </span>

                            </div>

                        </div>

                    </div>

                </a>

            @endforeach

        @else

            <div class="bg-white border border-[#D9DFEF] rounded-3xl p-16 text-center shadow-sm">

                <div class="w-24 h-24 rounded-3xl bg-[#F5F7FD] mx-auto mb-6 flex items-center justify-center">

                    <span class="material-symbols-outlined text-gray-400 text-[46px]">
                        inbox
                    </span>

                </div>

                <h3 class="text-3xl font-bold text-[#111827] mb-3">
                    No {{ $status }} tickets found
                </h3>

                <p class="text-lg text-gray-500 mb-8">
                    You don’t have any {{ $status }} support tickets yet.
                </p>

                <a href="{{ route('support.create') }}"
                   class="inline-flex items-center gap-2 h-12 px-7 rounded-2xl bg-green-600 hover:bg-green-700 text-white font-semibold transition">

                    <span class="material-symbols-outlined text-[20px]">
                        add
                    </span>

                    Create Ticket

                </a>

            </div>

        @endif

    </div>

</div>

@endsection