@extends('admin.layouts.master')

@section('title', 'تذاكر الصيانة')
@section('page_title', 'تذاكر الصيانة وما بعد البيع')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">الصيانة</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-life-ring"></i> تذاكر الصيانة</h3>
        <div class="card-tools">
            @can('maintenance.create')
                <a href="{{ route('admin.maintenance.create') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus"></i> {{ __('admin.add') }}
                </a>
            @endcan
        </div>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-2">
                <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="open">مفتوحة</option>
                    <option value="assigned">مسندة</option>
                    <option value="in_progress">قيد التنفيذ</option>
                    <option value="resolved">تم الحل</option>
                    <option value="closed">مغلقة</option>
                    <option value="cancelled">ملغية</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="small mb-1">النوع</label>
                <select class="form-control form-control-sm filter-input" id="filter_type">
                    <option value="">—</option>
                    <option value="warranty">ضمان</option>
                    <option value="paid_service">خدمة مدفوعة</option>
                    <option value="replacement">استبدال</option>
                    <option value="return">إرجاع</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="small mb-1">الأولوية</label>
                <select class="form-control form-control-sm filter-input" id="filter_priority">
                    <option value="">—</option>
                    <option value="low">منخفضة</option>
                    <option value="medium">متوسطة</option>
                    <option value="high">عالية</option>
                    <option value="urgent">عاجلة</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_customer">
                    <option value="">—</option>
                    @foreach($customers as $c)<option value="{{ $c->id }}">{{ $c->name_ar }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="small mb-1">المسؤول</label>
                <select class="form-control form-control-sm filter-input" id="filter_assignee">
                    <option value="">—</option>
                    @foreach($users as $u)<option value="{{ $u->id }}">{{ $u->name }}</option>@endforeach
                </select>
            </div>
        </div>
        <table id="ticketsTable" 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>الأولوية</th>
                    <th>{{ __('admin.status') }}</th>
                    <th>المسؤول</th>
                    <th>الزيارة</th>
                    <th>التكلفة</th>
                    <th>{{ __('admin.actions') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    $('#filter_customer, #filter_assignee').select2({ width: '100%', allowClear: true, placeholder: '—' });

    const table = $('#ticketsTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.maintenance.data') }}',
            data: d => {
                d.status      = $('#filter_status').val();
                d.type        = $('#filter_type').val();
                d.priority    = $('#filter_priority').val();
                d.customer_id = $('#filter_customer').val();
                d.assigned_to = $('#filter_assignee').val();
            }
        },
        language: { url: OFP.dtLanguage },
        columns: [
            { data: 'id', name: 'id', width: '60px' },
            { data: 'number', name: 'number' },
            { data: 'reported_at', name: 'reported_at' },
            { data: 'customer_name', name: 'customer.name_ar' },
            { data: 'product_name',  name: 'product.name_ar' },
            { data: 'type', name: 'type' },
            { data: 'subject', name: 'subject' },
            { data: 'priority', name: 'priority' },
            { data: 'status', name: 'status' },
            { data: 'assignee_name', name: 'assignee.name' },
            { data: 'visit_at', name: 'visit_at' },
            { data: 'cost', name: 'cost' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false },
        ]
    });

    $('.filter-input').on('change', () => table.ajax.reload());
});
</script>
@endpush