@extends("front/layout.master")
@php
    $user = Auth::user();
    $sellerac = App\Store::where('user_id','=', $user->id)->first();
    $tickets = App\HelpDesk::where('user_id','=', $user->id)->latest()->paginate(10);
    $statusBadge = [
        'open'    => ['bg-amber-100','text-amber-700','bullhorn'],
        'pending' => ['bg-brand-50','text-brand-600','clock-o'],
        'closed'  => ['bg-slate-200','text-slate-700','ban'],
        'solved'  => ['bg-emerald-100','text-emerald-700','check'],
    ];
@endphp
@section('title', __('staticwords.MyTickets') . ' | ')

@section("body")

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('staticwords.MyTickets') }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 grid lg:grid-cols-[300px_1fr] gap-5 pb-12">
    <aside class="lg:sticky lg:top-28 lg:self-start">
        @include('user.sidebar')
    </aside>

    <div class="space-y-5">
        <div class="bg-white rounded-2xl shadow-card p-6 lg:p-8">
            <div class="flex items-center justify-between flex-wrap gap-3 mb-5">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-brand-50 rounded-xl grid place-items-center text-brand-600">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/><path d="M7 7h.01"/></svg>
                    </div>
                    <div>
                        <h1 class="font-display font-extrabold text-2xl">{{ __('staticwords.MyTickets') }}</h1>
                        <p class="text-[13px] text-slate-500">{{ auth()->user()->ticket->count() }} {{ __('total tickets') }}</p>
                    </div>
                </div>
                <a href="{{ route('hdesk') }}" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2 rounded-lg flex items-center gap-2 text-[13px]">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
                    {{ __('Create Ticket') }}
                </a>
            </div>

            @if(count($tickets) > 0)
                <div class="overflow-x-auto -mx-2 lg:mx-0">
                    <table class="w-full text-[13px]">
                        <thead>
                            <tr class="border-b border-slate-200 text-left text-[11px] uppercase tracking-wider text-slate-500">
                                <th class="py-3 px-2">{{ __('Ticket No') }}</th>
                                <th class="py-3 px-2">{{ __('Issue') }}</th>
                                <th class="py-3 px-2">{{ __('Status') }}</th>
                                <th class="py-3 px-2 text-right">{{ __('View') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($tickets as $ticket)
                                @php $sb = $statusBadge[$ticket->status] ?? ['bg-slate-100','text-slate-600','question']; @endphp
                                <tr class="border-b border-slate-100 hover:bg-slate-50">
                                    <td class="py-3 px-2 font-semibold tabular">#{{ $ticket->ticket_no }}</td>
                                    <td class="py-3 px-2">{{ $ticket->issue_title }}</td>
                                    <td class="py-3 px-2">
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold {{ $sb[0] }} {{ $sb[1] }}">
                                            <i class="fa fa-{{ $sb[2] }}"></i> {{ ucfirst($ticket->status) }}
                                        </span>
                                    </td>
                                    <td class="py-3 px-2 text-right">
                                        <button type="button" data-sh-modal-open="ticket{{ $ticket->id }}" class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100 text-brand-600" aria-label="View">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-5 flex justify-center">{{ $tickets->links() }}</div>
            @else
                <div class="text-center py-10">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/></svg>
                    <h3 class="font-display font-bold text-lg mt-4">{{ __('No tickets yet') }}</h3>
                    <p class="text-[13px] text-slate-500 mt-1">{{ __('Create a support ticket and our team will help.') }}</p>
                    <a href="{{ route('hdesk') }}" class="inline-block mt-4 bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2.5 rounded-full text-[13px]">{{ __('Create Ticket') }}</a>
                </div>
            @endif
        </div>
    </div>
</section>

{{-- Ticket modals --}}
@foreach($tickets as $ticket)
    @php $sb = $statusBadge[$ticket->status] ?? ['bg-slate-100','text-slate-600','question']; @endphp
    <div id="ticket{{ $ticket->id }}" class="sh-modal" role="dialog" aria-modal="true">
        <div class="sh-modal__backdrop" data-sh-close></div>
        <div class="sh-modal__panel max-w-2xl">
            <div class="flex items-center justify-between p-5 border-b border-slate-100">
                <div>
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold {{ $sb[0] }} {{ $sb[1] }} mb-1.5">
                        <i class="fa fa-{{ $sb[2] }}"></i> {{ ucfirst($ticket->status) }}
                    </span>
                    <div class="font-display font-extrabold text-lg leading-tight">#{{ $ticket->ticket_no }} · {{ $ticket->issue_title }}</div>
                </div>
                <button type="button" data-sh-close class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100" aria-label="Close">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg>
                </button>
            </div>
            <div class="p-5 prose prose-slate max-w-none text-[14px]">
                {!! $ticket->issue !!}
            </div>
            <div class="border-t border-slate-100 p-4 flex justify-end">
                <button type="button" data-sh-close class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2 rounded-lg">{{ __('Close') }}</button>
            </div>
        </div>
    </div>
@endforeach

@include('front.partials.change-password-modal')
@endsection

@section('script')
<script src="{{ url('js/profile.js') }}"></script>
@endsection