@extends('layouts.app')
@section('title', 'المتابعات')
@section('page_title', 'المتابعات والمعاودة')
@section('page_subtitle', 'كل وعد للعميل يتحول إلى مهمة بموعد ومسؤول — ولا متابعة بلا نتيجة')

@section('page_actions')
    @if (auth()->user()->hasPermission('followups.manage'))
        <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="filterDue">
                    <option value="">كل المواعيد</option>
                    <option value="today">مستحقة اليوم</option>
                    <option value="overdue">متأخرة</option>
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterStatus">
                    <option value="">كل الحالات</option>
                    @foreach (\App\Models\FollowUp::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\FollowUp::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="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="fuTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>العميل</th>
                    <th>العنوان</th>
                    <th>الموعد</th>
                    <th>المسؤول</th>
                    <th>الأولوية</th>
                    <th>الحالة</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@include('followups.partials.modals')
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const table = MR.table('#fuTable', '{{ route('followups.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'customer_label', orderable: false },
        { data: 'title', orderable: false },
        { data: 'due_label', name: 'due_at' },
        { data: 'agent_label', orderable: false },
        { data: 'priority_label', name: 'priority' },
        { data: 'status_badge', name: 'status' },
        { data: 'actions', orderable: false, searchable: false }
    ], {
        order: [[3, 'asc']],
        filters: function () {
            return {
                due: $('#filterDue').val(),
                status: $('#filterStatus').val(),
                priority: $('#filterPriority').val(),
                assigned_to: $('#filterAgent').val()
            };
        }
    });

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

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

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

    $('#fuTable').on('click', '[data-action=complete]', function () {
        $('#completeForm')[0].reset();
        $('#completeForm').data('url', '{{ url('followups') }}/' + $(this).data('id') + '/complete');
        $('#completeModal').modal('show');
    });

    $('#fuTable').on('click', '[data-action=postpone]', function () {
        $('#postponeForm')[0].reset();
        $('#postponeForm').data('url', '{{ url('followups') }}/' + $(this).data('id') + '/postpone');
        $('#postponeModal').modal('show');
    });

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

    $('#fuForm, #completeForm, #postponeForm').on('submit', function (e) {
        e.preventDefault();
        const $modal = $(this).closest('.modal');
        MR.submit(this, { done: function () { $modal.modal('hide'); table.ajax.reload(null, false); } });
    });
});
</script>
@endpush