@extends('admin.layout.index')

@section('title', 'Support Tickets')

@push('head-scripts')
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <style>
        .avatar-border {
            border: 1px solid #405189;
        }
    </style>
@endpush

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <h4 class="mb-0">Support Tickets</h4>
            <p class="text-muted mb-0">User-submitted issues and queries with status control.</p>
        </div>
    </div>

    <!-- Stats -->
    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Tickets</p>
                        </div>
                        {{-- <div class="flex-shrink-0">
                            <h5 class="text-primary fs-14 mb-0">
                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +3.1%
                            </h5>
                        </div> --}}
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="totalTickets"
                                    data-target="0">0</span></h4>
                            {{-- <a href="#" class="text-decoration-underline">View all</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-primary-subtle rounded fs-3">
                                <i class="ri-customer-service-2-line text-primary"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Open</p>
                        </div>
                        {{-- <div class="flex-shrink-0">
                            <h5 class="text-danger fs-14 mb-0">
                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +1.4%
                            </h5>
                        </div> --}}
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="openTickets"
                                    data-target="0">0</span></h4>
                            {{-- <a href="#" class="text-decoration-underline">View open</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-danger-subtle rounded fs-3">
                                <i class="ri-error-warning-line text-danger"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">In Progress</p>
                        </div>
                        {{-- <div class="flex-shrink-0">
                            <h5 class="text-warning fs-14 mb-0">
                                <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -0.8%
                            </h5>
                        </div> --}}
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value"
                                    id="inProgressTickets" data-target="0">0</span></h4>
                            {{-- <a href="#" class="text-decoration-underline">View in-progress</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-warning-subtle rounded fs-3">
                                <i class="ri-time-line text-warning"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Resolved</p>
                        </div>
                        {{-- <div class="flex-shrink-0">
                            <h5 class="text-success fs-14 mb-0">
                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +4.5%
                            </h5>
                        </div> --}}
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="resolvedTickets"
                                    data-target="0">0</span></h4>
                            {{-- <a href="#" class="text-decoration-underline">View resolved</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-success-subtle rounded fs-3">
                                <i class="ri-checkbox-circle-line text-success"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tickets Table -->
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="mb-0">Tickets</h5>
            <div class="d-flex gap-2">
                <select class="form-select form-select-sm" id="statusFilter" style="width:150px;">
                    <option>All Status</option>
                    <option>Open</option>
                    <option>In Progress</option>
                    <option>Resolved</option>
                    <option>Closed</option>
                </select>
                <input type="date" class="form-control form-control-sm" id="dateFilter" style="width:160px;">
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table align-middle nowrap" id="supportTicketsTable">
                    <thead class="table-light">
                        <tr>
                            <th>Ticket ID</th>
                            <th>User</th>
                            <th>Subject</th>
                            <th>Category</th>
                            <th>Priority</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Updated</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Ticket Detail Modal -->
    <div class="modal fade" id="ticketDetailModal" tabindex="-1" aria-labelledby="ticketDetailModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ticketModalTitle">Ticket Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="modal_ticket_id">

                    <!-- Ticket Information Table -->
                    <div class="table-responsive mb-4">
                        <table class="table table-bordered mb-0">
                            <tbody>
                                <tr>
                                    <td class="fw-semibold" style="width: 200px;">User</td>
                                    <td id="modal_user"></td>
                                </tr>
                                <tr>
                                    <td class="fw-semibold">Subject</td>
                                    <td id="modal_subject"></td>
                                </tr>
                                <tr>
                                    <td class="fw-semibold">Category</td>
                                    <td id="modal_category"></td>
                                </tr>
                                <tr>
                                    <td class="fw-semibold">Priority</td>
                                    <td id="modal_priority"></td>
                                </tr>
                                <tr>
                                    <td class="fw-semibold">Status</td>
                                    <td>
                                        <select class="form-select form-select-sm" id="modal_status"
                                            style="width:200px;">
                                            <option value="open">Open</option>
                                            <option value="in_progress">In Progress</option>
                                            <option value="resolved">Resolved</option>
                                            <option value="closed">Closed</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-semibold">Created Date</td>
                                    <td id="modal_created"></td>
                                </tr>
                                <tr>
                                    <td class="fw-semibold">Last Updated</td>
                                    <td id="modal_updated"></td>
                                </tr>
                                <tr>
                                    <td class="fw-semibold">Device Information</td>
                                    <td id="modal_device"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Description -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold mb-2">Description</label>
                        <p class="mb-0 text-muted" id="modal_description"></p>
                    </div>

                    <!-- Attachments -->
                    <div class="mt-4" id="attachments_section" style="display: none;">
                        <h6 class="mb-3">Attachments</h6>
                        <div class="d-flex flex-wrap gap-3" id="modal_attachments">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="updateStatusBtn">
                        <span class="btn-text">Update Status</span>
                        <span class="btn-spinner d-none">
                            <i class="ri-loader-2-line spin"></i> Updating...
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom-script')
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            const csrfToken = '{{ csrf_token() }}';

            // Load stats
            loadStats();

            // Initialize DataTable
            const table = $('#supportTicketsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.support-tickets.data') }}',
                    type: 'GET',
                    data: function(d) {
                        d.status = $('#statusFilter').val();
                        d.date = $('#dateFilter').val();
                    }
                },
                columns: [{
                        data: 'ticket_id',
                        name: 'id'
                    },
                    {
                        data: 'user',
                        name: 'users.name'
                    },
                    {
                        data: 'subject',
                        name: 'subject'
                    },
                    {
                        data: 'category',
                        name: 'category'
                    },
                    {
                        data: 'priority',
                        name: 'priority'
                    },
                    {
                        data: 'status_select',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created',
                        name: 'created_at'
                    },
                    {
                        data: 'updated',
                        name: 'updated_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ],
                pageLength: 10,
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                language: {
                    processing: '<i class="ri-loader-2-line spin fs-2"></i>',
                    emptyTable: 'No support tickets found'
                }
            });

            // Filter change handlers
            $('#statusFilter, #dateFilter').on('change', function() {
                table.ajax.reload();
            });

            // Load stats
            function loadStats() {
                $.ajax({
                    url: '{{ route('admin.support-tickets.stats') }}',
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            $('#totalTickets').attr('data-target', response.data.total_tickets).text(
                                response.data.total_tickets);
                            $('#openTickets').attr('data-target', response.data.open_tickets).text(
                                response.data.open_tickets);
                            $('#inProgressTickets').attr('data-target', response.data
                                .in_progress_tickets).text(response.data.in_progress_tickets);
                            $('#resolvedTickets').attr('data-target', response.data.resolved_tickets)
                                .text(response.data.resolved_tickets);
                        }
                    }
                });
            }

            // Status change in table
            $(document).on('change', '.status-select', async function() {
                const ticketId = $(this).data('id');
                const newStatus = $(this).val();

                try {
                    const response = await fetch('{{ route('admin.support-tickets.update-status') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            id: ticketId,
                            status: newStatus
                        })
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: data.message,
                            timer: 1500,
                            showConfirmButton: false
                        });
                        table.ajax.reload(null, false);
                        loadStats();
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: data.message || 'An error occurred'
                        });
                    }
                } catch (error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'An unexpected error occurred'
                    });
                }
            });

            // View ticket details
            $(document).on('click', '.btn-view', async function() {
                const ticketId = $(this).data('id');

                try {
                    const response = await fetch(
                        `{{ url('admin/support-tickets/show') }}/${ticketId}`, {
                            method: 'GET',
                            headers: {
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': csrfToken
                            }
                        });

                    const result = await response.json();

                    if (response.ok && result.success) {
                        const data = result.data;

                        // Set modal data
                        $('#modal_ticket_id').val(data.id);
                        $('#ticketModalTitle').text(`Ticket Details - ${data.ticket_number}`);

                        // User info
                        const initials = data.user_name.split(' ').map(n => n[0]).join('')
                            .toUpperCase();
                        $('#modal_user').html(`
                        <div class="d-flex align-items-center gap-2">
                            <div class="avatar-xs bg-soft-primary text-primary icket Details rounded-circle d-flex align-items-center justify-content-center fw-semibold">${initials}</div>
                            <div>
                                <div class="fw-semibold">${data.user_name}</div>
                                <small class="text-muted">USR-${String(data.user_id).padStart(4, '0')}</small>
                            </div>
                        </div>
                    `);

                        $('#modal_subject').text(data.subject);
                        $('#modal_category').html(
                            `<span class="badge bg-warning">${data.category}</span>`);

                        // Priority badge
                        const priorityBadges = {
                            'low': 'bg-info',
                            'medium': 'bg-warning',
                            'high': 'bg-danger',
                            'critical': 'bg-dark'
                        };
                        $('#modal_priority').html(
                            `<span class="badge ${priorityBadges[data.priority]}">${data.priority.charAt(0).toUpperCase() + data.priority.slice(1)}</span>`
                        );

                        $('#modal_status').val(data.status);
                        $('#modal_created').text(data.created_at);
                        $('#modal_updated').text(data.updated_at);
                        $('#modal_device').text(data.device_info);
                        $('#modal_description').text(data.description);

                        // Attachments
                        if (data.attachments && data.attachments.length > 0) {
                            $('#attachments_section').show();
                            let attachmentsHtml = '';
                            data.attachments.forEach(file => {
                                const icon = file.type === 'image' ?
                                    'ri-file-image-line text-primary' :
                                    'ri-file-video-line text-danger';
                                attachmentsHtml += `
                                <div class="border rounded p-3">
                                    <div class="d-flex align-items-center gap-2">
                                        <i class="${icon} fs-4"></i>
                                        <div>
                                            <div class="fw-semibold">${file.name}</div>
                                            <small class="text-muted">${file.size}</small>
                                        </div>
                                        <a href="${file.url}" class="btn btn-sm btn-soft-primary ms-auto" download>
                                            <i class="ri-download-line"></i>
                                        </a>
                                    </div>
                                </div>
                            `;
                            });
                            $('#modal_attachments').html(attachmentsHtml);
                        } else {
                            $('#attachments_section').hide();
                        }

                        $('#ticketDetailModal').modal('show');
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: result.message || 'Failed to load ticket details'
                        });
                    }
                } catch (error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'An unexpected error occurred'
                    });
                }
            });

            // Update status from modal
            $('#updateStatusBtn').on('click', async function() {
                const submitBtn = $(this);
                const btnText = submitBtn.find('.btn-text');
                const btnSpinner = submitBtn.find('.btn-spinner');

                submitBtn.prop('disabled', true);
                btnText.addClass('d-none');
                btnSpinner.removeClass('d-none');

                try {
                    const response = await fetch('{{ route('admin.support-tickets.update-status') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            id: $('#modal_ticket_id').val(),
                            status: $('#modal_status').val()
                        })
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        $('#ticketDetailModal').modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: data.message,
                            timer: 1500,
                            showConfirmButton: false
                        });
                        table.ajax.reload(null, false);
                        loadStats();
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: data.message || 'An error occurred'
                        });
                    }
                } catch (error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'An unexpected error occurred'
                    });
                } finally {
                    submitBtn.prop('disabled', false);
                    btnText.removeClass('d-none');
                    btnSpinner.addClass('d-none');
                }
            });

            // Delete ticket
            $(document).on('click', '.btn-delete', function() {
                const ticketId = $(this).data('id');
                const ticketNumber = $(this).data('ticket');

                Swal.fire({
                    title: 'Are you sure?',
                    text: `You are about to delete ticket ${ticketNumber}. This action cannot be undone!`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then(async (result) => {
                    if (result.isConfirmed) {
                        try {
                            const response = await fetch(
                                '{{ route('admin.support-tickets.destroy') }}', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'Accept': 'application/json',
                                        'X-CSRF-TOKEN': csrfToken
                                    },
                                    body: JSON.stringify({
                                        id: ticketId
                                    })
                                });

                            const data = await response.json();

                            if (response.ok && data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Deleted!',
                                    text: data.message,
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                                table.ajax.reload();
                                loadStats();
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: data.message || 'An error occurred'
                                });
                            }
                        } catch (error) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'An unexpected error occurred'
                            });
                        }
                    }
                });
            });
        });
    </script>
    <style>
        .spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
@endpush