@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')
@php
    $expiringSoon = \App\Models\Warranty::expiring(30)->count();
    $totalActive  = \App\Models\Warranty::where('status', 'active')->count();
    $expired      = \App\Models\Warranty::where('status', 'expired')->count();
@endphp
<div class="row">
    <div class="col-md-4">
        <div class="small-box bg-success">
            <div class="inner"><h3>{{ number_format($totalActive) }}</h3><p>ضمانات نشطة</p></div>
            <div class="icon"><i class="fas fa-shield-alt"></i></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="small-box bg-warning">
            <div class="inner"><h3>{{ number_format($expiringSoon) }}</h3><p>تنتهي خلال 30 يوم</p></div>
            <div class="icon"><i class="fas fa-clock"></i></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="small-box bg-secondary">
            <div class="inner"><h3>{{ number_format($expired) }}</h3><p>ضمانات منتهية</p></div>
            <div class="icon"><i class="fas fa-history"></i></div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-shield-alt"></i> الضمانات</h3>
        <div class="card-tools">
            @can('warranties.edit')
                <form action="{{ route('admin.warranties.expire-overdue') }}" method="POST" class="d-inline">@csrf
                    <button class="btn btn-warning btn-sm" onclick="return confirm('تحديث جميع الضمانات المنتهية؟')">
                        <i class="fas fa-sync"></i> تحديث المنتهية
                    </button>
                </form>
            @endcan
        </div>
    </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="active">نشطة</option>
                    <option value="expired">منتهية</option>
                    <option value="voided">ملغاة</option>
                </select>
            </div>
            <div class="col-md-3 pt-3">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input filter-input" id="filter_expiring" value="1">
                    <label class="custom-control-label" for="filter_expiring">تنتهي خلال 30 يوماً فقط</label>
                </div>
            </div>
        </div>
        <table id="warrantiesTable" 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>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    const table = $('#warrantiesTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.warranties.data') }}',
            data: d => {
                d.status   = $('#filter_status').val();
                d.expiring = $('#filter_expiring').is(':checked') ? 1 : 0;
            }
        },
        language: { url: OFP.dtLanguage },
        columns: [
            { data: 'id', name: 'id', width: '60px' },
            { data: 'customer_name', name: 'customer.name_ar' },
            { data: 'product_name',  name: 'product.name_ar' },
            { data: 'invoice_number', name: 'invoice.number' },
            { data: 'quantity', name: 'quantity' },
            { data: 'start_date', name: 'start_date' },
            { data: 'end_date', name: 'end_date' },
            { data: 'days_remaining', name: 'days_remaining', orderable: false, searchable: false },
            { data: 'status', name: 'status' },
        ]
    });

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