@extends('admin.master_layout')
@section('title')
    <title>{{ __('translate.Support Tickets') }}</title>
@endsection

@push('style_section')
    <style>
        #supportTicketsTable tbody tr.support-ticket-row--unread td {
            font-weight: 700;
        }

        #supportTicketsTable tbody tr.support-ticket-row--read td {
            font-weight: 400;
        }

        #supportTicketsTable .admin-support-ticket-pill {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
            white-space: nowrap;
        }

        #supportTicketsTable tr.support-ticket-row--read .admin-support-ticket-pill {
            font-weight: 600;
        }

        #supportTicketsTable .admin-support-ticket-pill--priority-high {
            background: #fee2e2;
            color: #b91c1c;
        }

        #supportTicketsTable .admin-support-ticket-pill--priority-medium {
            background: #fef3c7;
            color: #b45309;
        }

        #supportTicketsTable .admin-support-ticket-pill--priority-low {
            background: #dbeafe;
            color: #1d4ed8;
        }

        #supportTicketsTable .admin-support-ticket-pill--priority-none {
            background: #f3f4f6;
            color: #6b7280;
        }

        #supportTicketsTable .admin-support-ticket-pill--awaiting {
            background: #fef3c7;
            color: #b45309;
        }

        #supportTicketsTable .admin-support-ticket-pill--replied {
            background: #dcfce7;
            color: #15803d;
        }

        #supportTicketsTable .admin-support-ticket-pill--closed {
            background: #e5e7eb;
            color: #4b5563;
        }

        #supportTicketsTable .support-ticket-subject-unread {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        #supportTicketsTable .support-ticket-unread-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ef4444;
            flex-shrink: 0;
        }
    </style>
@endpush

@section('body-header')
    <h3 class="crancy-header__title m-0">{{ __('translate.Support Tickets') }}</h3>
    <p class="crancy-header__text">{{ __('translate.Manage Support') }} >> {{ __('translate.Support Ticket') }}</p>
@endsection

@section('body-content')
    <section class="crancy-adashboard crancy-show">
        <div class="container container__bscreen">
            <div class="row">
                <div class="col-12">
                    <div class="crancy-body">
                        <div class="crancy-dsinner">

                            <div class="crancy-table crancy-table--v3 mg-top-30">

                                <div class="crancy-customer-filter">
                                    <div
                                        class="crancy-customer-filter__single crancy-customer-filter__single--csearch d-flex items-center justify-between create_new_btn_box">
                                        <div
                                            class="crancy-header__form crancy-header__form--customer create_new_btn_inline_box">
                                            <h4 class="crancy-product-card__title">{{ __('translate.Support Ticket') }}</h4>
                                        </div>
                                    </div>
                                </div>

                                <div id="crancy-table__main_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">

                                    <table class="crancy-table__main crancy-table__main-v3 no-footer"
                                           id="supportTicketsTable">
                                        <thead class="crancy-table__head">
                                        <tr>
                                            <th class="crancy-table__column-2 crancy-table__h2">
                                                {{ __('Ticket ID') }}
                                            </th>
                                            <th class="crancy-table__column-2 crancy-table__h2">
                                                {{ __('translate.Subject') }}
                                            </th>
                                            <th class="crancy-table__column-2 crancy-table__h2">
                                                {{ __('translate.Priority') }}
                                            </th>
                                            <th class="crancy-table__column-2 crancy-table__h2">
                                                {{ __('User Info') }}
                                            </th>
                                            <th class="crancy-table__column-2 crancy-table__h2">
                                                {{ __('translate.Status') }}
                                            </th>
                                            <th class="crancy-table__column-3 crancy-table__h3">
                                                {{ __('translate.Action') }}
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody class="crancy-table__body">
                                        @foreach ($support_tickets as $ticket)
                                            @php
                                                $isUnread = $ticket->isUnreadForAdmin();
                                            @endphp
                                            <tr @class([
                                                'support-ticket-row--unread' => $isUnread,
                                                'support-ticket-row--read' => ! $isUnread,
                                            ])>
                                                <td class="crancy-table__column-2 crancy-table__data-2">
                                                    <span class="crancy-table__product-title d-block">{{ $ticket->ticket_id }}</span>
                                                </td>
                                                <td class="crancy-table__column-2 crancy-table__data-2">
                                                    <span class="support-ticket-subject-unread">
                                                        @if ($ticket->unseen_by_admin_count > 0)
                                                            <span class="support-ticket-unread-dot" title="{{ __('translate.Unread messages') }}"></span>
                                                        @endif
                                                        <span>{{ Str::limit($ticket->subject, 40) }}</span>
                                                    </span>
                                                </td>
                                                <td class="crancy-table__column-2 crancy-table__data-2" data-order="{{ $ticket->prioritySortOrder() }}">
                                                    @include('supportticket::admin.partials.priority-badge', ['ticket' => $ticket])
                                                </td>
                                                <td class="crancy-table__column-2 crancy-table__data-2">
                                                    <span class="d-block">{{ __('Name') }}: {{ $ticket?->user?->name }}</span>
                                                    <span class="d-block">{{ __('Email') }}: {{ $ticket?->user?->email }}</span>
                                                    <span class="d-block">{{ __('Phone') }}: {{ $ticket?->user?->phone }}</span>
                                                </td>
                                                <td class="crancy-table__column-2 crancy-table__data-2">
                                                    @include('supportticket::admin.partials.status-badge', ['ticket' => $ticket])
                                                </td>
                                                <td class="crancy-table__column-2 crancy-table__data-2">
                                                    <a href="{{ route('admin.support-tickets.show', $ticket->ticket_id) }}"
                                                       class="crancy-btn"><i class="fas fa-eye"></i> {{ __('View') }}
                                                    </a>
                                                    @if ($ticket->status != 'closed')
                                                        <a onclick="itemDeleteConfirmation({{ $ticket->id }})"
                                                           href="javascript:"
                                                           data-bs-toggle="modal"
                                                           data-bs-target="#exampleModal"
                                                           class="crancy-btn delete_danger_btn"><i
                                                                class="fas fa-eye-slash"></i> {{ __('translate.Close') }}
                                                        </a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                    @if ($support_tickets->hasPages())
                        <div class="col-lg-12">
                            {{ $support_tickets->links('pagination_box') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('translate.Close Confirmation') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('translate.Are you sure to closed this support?') }}</p>
                </div>
                <div class="modal-footer">
                    <form action="" id="item_delect_confirmation" class="delet_modal_form" method="POST">
                        @csrf
                        @method('PUT')
                        <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{ __('translate.Close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('translate.Yes, Close') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js_section')
    <script>
        "use strict";

        function itemDeleteConfirmation(id) {
            document.getElementById("item_delect_confirmation").action = `{{ route('admin.ticket-closed', '') }}/${id}`;
        }

        $(document).ready(function () {
            if ($('#supportTicketsTable').length && !$.fn.DataTable.isDataTable('#supportTicketsTable')) {
                $('#supportTicketsTable').DataTable({
                    order: [[2, 'asc']],
                    paging: false,
                    searching: true,
                    info: false,
                    lengthChange: false,
                    columnDefs: [
                        { orderable: false, targets: [5] },
                    ],
                });
            }
        });
    </script>
@endpush