@extends('layouts.app')

@section('content')
<style>
    #tickets-table td:last-child,
    #tickets-table th:last-child {
        white-space: nowrap;
    }

    #tickets-table .order-actions {
        white-space: nowrap;
    }

    #tickets-table .ticket-message-col {
        min-width: 260px;
    }
</style>

<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Ticket Chat</li>
                    </ol>
                </nav>
            </div>
        </div>

        <hr />

        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                    <div>
                        <h6 class="mb-1">Ticket List</h6>
                        <p class="text-muted mb-0">
                            {{ $canViewFullTicketList ? 'Yahan full ticket list dikh rahi hai. Unassigned tickets yahan se assign karo, aur chat button sirf assigned admin ko dikhega.' : 'Yahan sirf aapko assigned tickets dikh rahi hain. Chat button bhi sirf aapke assigned tickets par dikhega.' }}
                        </p>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="tickets-table" class="table table-striped table-bordered align-middle" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Ticket</th>
                                <th>User</th>
                                <th>Latest Message</th>
                                <th>Assigned Admin</th>
                                <th>Status</th>
                                <th>Last Activity</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@if ($canAssignTickets)
    <div class="modal fade" id="ticketAssignModal" tabindex="-1" aria-labelledby="ticketAssignModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="ticket-assign-form" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="ticketAssignModalLabel">Assign Ticket</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted mb-3">
                            <span class="fw-semibold">Ticket:</span>
                            <span id="ticket-assign-ticket-no">-</span>
                        </p>

                        <div>
                            <label for="ticket-assign-assigned-to" class="form-label">Assign Admin</label>
                            <select
                                id="ticket-assign-assigned-to"
                                name="assigned_to"
                                class="form-select @error('assigned_to') is-invalid @enderror"
                            >
                                <option value="">Select admin</option>
                                @foreach ($admins as $admin)
                                    <option value="{{ $admin->id }}">
                                        {{ $admin->name }}{{ $admin->account_type === 'super_admin' ? ' (Super Admin)' : '' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('assigned_to')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="bx bx-user-check me-1"></i> Assign Ticket
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endif

<script>
    $(function () {
        const ticketsTable = $('#tickets-table').DataTable({
            processing: true,
            serverSide: true,
            order: [[6, 'desc']],
            ajax: "{{ route('ticketChats.index') }}",
            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'ticket_no_label',
                    name: 'ticket_no',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'user_label',
                    name: 'user_label',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'latest_message',
                    name: 'latest_message',
                    className: 'ticket-message-col',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'assigned_admin',
                    name: 'assignedUser.name',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'status_badge',
                    name: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'updated_at',
                    name: 'updated_at'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false
                }
            ],
            language: {
                emptyTable: 'No tickets found.'
            }
        });

        setInterval(function () {
            ticketsTable.ajax.reload(null, false);
        }, 10000);

        @if ($canAssignTickets)
            const assignRouteTemplate = @json(route('ticketChats.assign', ['ticket' => '__ticket__']));

            $(document).on('click', '.ticket-assign-btn', function () {
                const ticketId = String($(this).data('ticket-id') || '');
                const ticketNo = $(this).data('ticket-no') || '-';
                const assignedTo = String($(this).data('assigned-to') || '');

                $('#ticket-assign-form').attr('action', assignRouteTemplate.replace('__ticket__', ticketId));
                $('#ticket-assign-ticket-no').text(ticketNo);
                $('#ticket-assign-assigned-to').val(assignedTo);
            });

            $('#ticketAssignModal').on('hidden.bs.modal', function () {
                $('#ticket-assign-form').attr('action', '');
                $('#ticket-assign-ticket-no').text('-');
                $('#ticket-assign-assigned-to').val('');
            });
        @endif
    });
</script>
@endsection