@extends($activeTemplate . 'layouts.frontend')
@section('content')
    <section class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-area-content">
                <h3 class="breadcrumb-area-title">
                    @lang('Support Tickets History')
                </h3>
                <p class="breadcrumb-area-desc mt-3">
                    @lang('View your support ticket history and track the status of your inquiries. Our team is always ready to help resolve any issues you may have.')
                </p>
            </div>
        </div>
    </section>

    <section class="py-60">
        <div class="container">
            <div class="flex-wrap justify-content-end mb-3">
                <a href="{{ route('user.ticket.department') }}" class="btn btn--base btn--sm">
                    <span class="me-1">
                        @include('admin.partials.svg.ticket')
                    </span>
                    @lang('Create Ticket')
                </a>
            </div>
            <div class="user-table-wrapper">
                <table class="table ticket-table">
                    <thead>
                        <tr>
                            <th>@lang('Ticket')</th>
                            <th>@lang('Last Message')</th>
                            <th>@lang('Status')</th>
                            <th>@lang('Action')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($supportTickets as $ticket)
                            <tr>
                                <td>
                                    <div class="ticket-board">
                                        <div class="ticket-board-content">
                                            <a href="{{ route('user.ticket.view', $ticket->ticket_number) }}" class="ticket-board-title">
                                                <span class="priorityName"  data-hsl_color="{{ json_encode($ticket->priority->converted_color) }}">
                                                    <span class="animated-circle">
                                                    </span>
                                                </span>
                                                {{ __($ticket->subject) }}
                                            </a>
                                            <div class="ticket-board-list">
                                                <p class="ticket-board-type">
                                                    {{ __($ticket->department?->name) }}
                                                </p>
                                                <a href="{{ route('user.ticket.view', $ticket->ticket_number) }}" class="ticket-board-id fw-bold">
                                                    #{{ $ticket->ticket_number }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                <td>
                                    @php
                                        $lastReply = $ticket->replies->last();
                                    @endphp

                                    @if ($lastReply)
                                        {{ diffForHumans($lastReply->created_at) }}
                                    @else
                                        ----
                                    @endif
                                </td>

                                <td>
                                    <span class="badge statusName" data-ticket_number="{{ $ticket->ticket_number }}" data-hsl_color="{{ json_encode($ticket->ticketStatus->converted_color) }}">{{ __($ticket->ticketStatus->name) }}</span>
                                </td>

                                <td>
                                    <div class="flex-end gap-2">
                                        <a href="{{ route('user.ticket.view', $ticket->ticket_number) }}" class="btn btn--secondary btn--sm me-1">@lang('View')</a>
                                        @if ($ticket->ticketStatus->slug == 'closed')
                                            <button class="btn btn--success btn--sm feedbackBtn" data-ticket_number="{{ $ticket->ticket_number }}" data-customer_happiness="{{ $ticket->customer_happiness ?? 'great' }}" data-feedback="{{ $ticket->feedback }}">@lang('Feedback')</button>
                                        @else
                                            <button class="btn btn--danger btn--sm confirmationBtn" data-question="@lang('Are you sure to close the ticket?')" data-action="{{ route('user.ticket.close', $ticket->ticket_number) }}">@lang('Close')</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%">
                                    <x-empty-message message="No support ticket found" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($supportTickets->hasPages())
                <div class="pagination-wrapper border-0">
                    {{ paginateLinks($supportTickets) }}
                </div>
            @endif
        </div>
    </section>

    <div id="feedbackModal" class="modal custom--modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('How was your experience with us?')</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <form method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form--label style-two">@lang('Rating')</label>

                            <div class="rating-emoji-wrapper">
                                <label for="smile-emoji" class="rating-emoji">
                                    <input class="form-check-input d-none" name="customer_happiness" type="radio" value="great" id="smile-emoji">
                                    @include('admin.partials.svg.great')
                                    <span class="rating-emoji-check">
                                        <i class="fas fa-check"></i>
                                    </span>
                                </label>

                                <label for="okay" class="rating-emoji">
                                    <input class="form-check-input d-none" name="customer_happiness" type="radio" value="okay" id="okay">
                                    @include('admin.partials.svg.okay')
                                    <span class="rating-emoji-check">
                                        <i class="fas fa-check"></i>
                                    </span>
                                </label>

                                <label for="bad" class="rating-emoji">
                                    <input class="form-check-input d-none" name="customer_happiness" type="radio" value="bad" id="bad">
                                    @include('admin.partials.svg.bad')
                                    <span class="rating-emoji-check">
                                        <i class="fas fa-check"></i>
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form--label style-two">@lang('Feedback')</label>
                            <textarea name="feedback" class="form--control md-style"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn--md btn--base w-100">@lang('Submit')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <x-confirmation-modal />
@endsection

@push('style')
    <style>
        .user-table-wrapper {
            overflow-x: auto;
        }

        .user-table-wrapper .table {
            min-width: 700px;
            border: 1px solid hsl(var(--border-color));
            border-radius: 8px;
            overflow: hidden;
        }

        @media (min-width: 992px) {
            .user-table-wrapper .table thead th {
                font-size: 14px;
                font-weight: 500;
                color: hsl(var(--text-color));
            }

            .user-table-wrapper .table tbody td {
                font-size: 14px;
            }
        }

        .ticket-table tbody tr {
            cursor: unset;
        }
    </style>
@endpush


@push('script')
    <script>
        (function($) {
            "use strict";

            let modal = $('#feedbackModal');
            let action = `{{ route('user.ticket.feedback', '') }}`;
            $('.feedbackBtn').on('click', function() {
                let ticketNumber = $(this).data('ticket_number');
                let rating = $(this).data('customer_happiness');
                let feedback = $(this).data('feedback');
                modal.find('form')[0].reset();
                modal.find(`input[name="customer_happiness"][value="${rating}"]`).prop('checked', true);
                modal.find('textarea[name="feedback"]').val(feedback);
                modal.find('form').attr('action', action + '/' + ticketNumber)
                modal.modal('show');
            });

        })(jQuery);
    </script>
@endpush
