@extends('admin.layouts.admin')

@section('content')
    <div class="main-side">
        <div class="d-flex align-items-center flex-column flex-xl-row justify-content-between gap-3 mb-3">
            <div class="main-title mb-0">
                <div class="small">
                    الرئيسية
                </div>
                <div class="large">
                    التذكيرات
                </div>
            </div>
            <button class="main-btn" data-bs-toggle="modal" data-bs-target="#addAlert">
                <i class="fas fa-plus"></i>
                اضافة تذكير
            </button>
        </div>
        <div class="content_view">
            <div class="row g-2 mb-2">
                <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                    <select name="" id="" class="form-select">
                        <option value="">اختر العميل</option>
                    </select>
                </div>
                <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                    <select name="" id="" class="form-select">
                        <option value="">اختر الموظف</option>
                    </select>
                </div>
                <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                    <div class="input-group">
                        <span class="input-group-text fs-13px" id="">التاريخ</span>
                        <input type="date" class="form-control">
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="main-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>العميل</th>
                            <th>العنوان</th>
                            <th>تاريخ الاضافه</th>
                            <th>تاريخ التذكير</th>
                            <th>التذكير القادم</th>
                            <th>الاجراء المتخذ</th>
                            <th>العمليات</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>على العايدي</td>
                            <td>تذكير بالتجديد</td>
                            <td>6-21-2024</td>
                            <td>30/6/2025</td>
                            <td>31/7/2025</td>
                            <td>التجديد</td>
                            <td>
                                <div class="d-flex align-items-center gap-1">
                                    <button class="btn btn-sm btn-info"><i class="fas fa-pen-to-square"></i></button>
                                    <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>على العايدي</td>
                            <td>تذكير بالتجديد</td>
                            <td>6-21-2024</td>
                            <td>30/6/2025</td>
                            <td>31/7/2025</td>
                            <td>التجديد</td>
                            <td>
                                <div class="d-flex align-items-center gap-1">
                                    <button class="btn btn-sm btn-info"><i class="fas fa-pen-to-square"></i></button>
                                    <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>على العايدي</td>
                            <td>تذكير بالتجديد</td>
                            <td>6-21-2024</td>
                            <td>30/6/2025</td>
                            <td>31/7/2025</td>
                            <td>التجديد</td>
                            <td>
                                <div class="d-flex align-items-center gap-1">
                                    <button class="btn btn-sm btn-info"><i class="fas fa-pen-to-square"></i></button>
                                    <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="addAlert" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="addAlertLabel">أضافة تذكير</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="inp-holder">
                                    <label for="" class="form-label">العنوان</label>
                                    <input type="text" name="" id="" class="form-control">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="inp-holder">
                                    <label for="" class="form-label">تاريخ التذكير</label>
                                    <input type="date" name="" id="" class="form-control">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="inp-holder">
                                    <label for="" class="form-label">التذكير القادم</label>
                                    <input type="date" name="" id="" class="form-control">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="inp-holder">
                                    <label for="" class="form-label">الاجراء المتخذ</label>
                                    <textarea name="" id="" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">الغاء</button>
                        <button type="button" class="btn btn-success btn-sm px-3">حفظ</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection