@extends('admin.layouts.master')

@section('title', __('admin.follow_ups'))
@section('page_title', __('admin.follow_ups'))

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">{{ __('admin.follow_ups') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-clipboard-list"></i> {{ __('admin.follow_ups') }}</h3>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-3"><label class="small mb-1">{{ __('admin.status') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_status">
                    <option value="">—</option>
                    <option value="pending" selected>معلقة</option>
                    <option value="completed">منجزة</option>
                    <option value="cancelled">ملغاة</option>
                </select></div>
            <div class="col-md-3"><label class="small mb-1">النوع</label>
                <select class="form-control form-control-sm filter-input" id="filter_type">
                    <option value="">—</option>
                    @foreach(['call','visit','email','whatsapp','sms','meeting','other'] as $t)
                        <option value="{{ $t }}">{{ $t }}</option>
                    @endforeach
                </select></div>
            <div class="col-md-3 d-flex align-items-end">
                <div class="icheck-primary mr-3">
                    <input type="checkbox" id="filter_due_today">
                    <label for="filter_due_today">مستحقة اليوم</label>
                </div>
                <div class="icheck-danger">
                    <input type="checkbox" id="filter_overdue">
                    <label for="filter_overdue">متأخرة</label>
                </div>
            </div>
        </div>

        <table id="followupsTable" class="table table-bordered table-striped table-hover" style="width:100%">
            <thead><tr>
                <th>#</th><th>الوقت</th><th>النوع</th><th>الموضوع</th>
                <th>العميل/المورد</th><th>المسؤول</th>
                <th>المتابعة التالية</th><th>{{ __('admin.status') }}</th><th>{{ __('admin.actions') }}</th>
            </tr></thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    const t = $('#followupsTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.followups.data') }}',
            data: d => {
                d.status    = $('#filter_status').val();
                d.type      = $('#filter_type').val();
                d.due_today = $('#filter_due_today').is(':checked') ? 1 : 0;
                d.overdue   = $('#filter_overdue').is(':checked') ? 1 : 0;
            }
        },
        language: { url: OFP.dtLanguage },
        columns: [
            { data: 'id', name: 'id', width: '50px' },
            { data: 'followup_date', name: 'followup_date' },
            { data: 'type', name: 'type' },
            { data: 'subject', name: 'subject' },
            { data: 'followable_name', name: 'followable_id', orderable: false },
            { data: 'assignee_name', name: 'assignee.name', orderable: false },
            { data: 'next_followup_date', name: 'next_followup_date' },
            { data: 'status', name: 'status' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ]
    });
    $('.filter-input, #filter_due_today, #filter_overdue').on('change', () => t.ajax.reload());
});
</script>
@endpush