@extends('layouts.app2')

<!DOCTYPE html>
<html lang="ar" >
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <link rel="stylesheet" href="{{ asset('style.css') }}">
    <!--script src="https://jsdelivr.net"></script-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

   
<script>
    $(document).ready(function(){
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });
    });

</script>
</head>
<body>
   
    <div class="dashboard-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="logo">
                
                <span>
                    وزارة الصحة الإتحادية
                </span>
                <img src="{{ asset('build/assets/logo-fmoh2.png') }}" alt="شعار الوزارة" 
                style="height:70px;border-radius: 40px;margin-top: -40px;" class="me-2" align="left">
                <div style="margin-top: 45px;">
                     منصة التعاون الدولي الصحي
                </div>
             

          

                </div>
            <hr style="margin-top: 20px;">
       @include('layouts.navigationUser')
               
             <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-dropdown-link :href="route('logout')"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();" style="color: red;">
                                {{ __('Log Out') }}
                            </x-dropdown-link>
                        </form>
        </aside>

        <!-- Main Content -->
      @include('layouts.readingUser')
            
                    @if (session()->has('success'))
                        <div class="alert alert-success">
                            <span class="text-green font-bold">{{ session('success') }}</span>
                        </div>
                    @endif
          
            <section class="charts-grid" style="margin-top: 40px;width: 1261px;">
           
                <div class="form-container" style=""> 
        <h3 class="mb-4"  >  قائمة المشاريع :     </h3>
        <table id="activity-table" class="display" style="width: 1180px;">
                        <thead>
                            <tr>
                                <th>الرقم</th>
                                <th>إسم المشروع</th>
                                <th>وصف المشروع</th>
                                <th>تاريخ البداية</th>
                                <th>تاريخ النهاية</th>
                                <th> التكلفة</th>
                                <th> الحالة</th>
                                <th> # </th>
                                
                            </tr>
                        </thead>
                     </table>
</div>

                </div>
               
            </section>
        </main>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
            $('#activity-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('activity.projectData') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'title', name: 'title' },
                    { data: 'description', name: 'description' },
                    { data: 'start_date', name: 'start_date' },
                    { data: 'end_date', name: 'end_date' },
                    { data: 'TotalCost', name: 'TotalCost' },
                    { data: 'action2', name: 'action2', orderable: false, searchable: false },
                     { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        });
    </script>
</html>
