@extends('layouts.app')
@section('title', 'التذاكر')
@section('page_title', 'التذاكر والشكاوى')
@section('page_subtitle', 'قناة منظمة لاستقبال الشكاوى والطلبات مع SLA وتصعيد تلقائي')

@section('page_actions')
    @if (auth()->user()->hasPermission('tickets.create'))
        <button class="btn btn-primary" id="btnAdd"><i class="bi bi-plus-lg"></i> تذكرة جديدة</button>
    @endif
@endsection

@section('content')
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterStatus">
                    <option value="">كل الحالات</option>
                    @foreach (\App\Models\Ticket::STATUSES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterPriority">
                    <option value="">كل الأولويات</option>
                    @foreach (\App\Models\Ticket::PRIORITIES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterType">
                    <option value="">كل الأنواع</option>
                    @foreach (\App\Models\Ticket::TYPES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterAgent">
                    <option value="">كل المسؤولين</option>
                    @foreach ($agents as $agent)
                        <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body table-responsive">
        <table class="table table-hover w-100" id="ticketsTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>المرجع</th>
                    <th>الموضوع</th>
                    <th>العميل</th>
                    <th>النوع</th>
                    <th>الأولوية</th>
                    <th>المسؤول</th>
                    <th>موعد SLA</th>
                    <th>الحالة</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@include('tickets.partials.modal')
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const table = MR.table('#ticketsTable', '{{ route('tickets.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'reference', name: 'reference' },
        { data: 'subject', orderable: false },
        { data: 'customer_label', orderable: false },
        { data: 'type_label', name: 'type' },
        { data: 'priority_badge', name: 'priority' },
        { data: 'agent_label', orderable: false },
        { data: 'sla_label', name: 'due_at' },
        { data: 'status_badge', name: 'status' },
        { data: 'actions', orderable: false, searchable: false }
    ], {
        filters: function () {
            return {
                status: $('#filterStatus').val(),
                priority: $('#filterPriority').val(),
                type: $('#filterType').val(),
                assigned_to: $('#filterAgent').val()
            };
        }
    });

    $('#filterStatus, #filterPriority, #filterType, #filterAgent').on('change', function () { table.ajax.reload(); });

    $('#btnAdd').on('click', function () { $('#ticketForm')[0].reset(); $('#ticketModal').modal('show'); });

    let searchTimer = null;
    $('#tkCustomerSearch').on('keyup', function () {
        clearTimeout(searchTimer);
        const term = $(this).val();
        searchTimer = setTimeout(function () {
            $.getJSON('{{ route('customers.search') }}', { q: term }, function (res) {
                const $sel = $('#tkCustomer').html('<option value="">— بدون عميل —</option>');
                res.results.forEach(function (c) {
                    $sel.append('<option value="' + c.id + '">' + c.name + ' — ' + c.phone + '</option>');
                });
            });
        }, 400);
    });

    $('#ticketsTable').on('click', '[data-action=delete]', function () {
        MR.remove($(this).data('url'), function () { table.ajax.reload(null, false); });
    });

    $('#ticketForm').on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function (res) { window.location = res.url; } });
    });
});
</script>
@endpush