<!DOCTYPE html>
<html lang="ar" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <link rel="stylesheet" href="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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>


</head>
<style>
     .map-container {
        background: #fff;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        width: 80%;
        max-width: 900px;
    }

    #map {
        height: 600px;
        border-radius: 8px;
        margin-top: 10px;
    }

    #total-projects {
        background-color: #2e8b57;
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
    }
</style>
<body>
   
   <div class="dashboard-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="logo" style="text-align: center;">
                
                
                <img src="<?php echo e(asset('build/assets/logo-fmoh2.png')); ?>" alt="شعار الوزارة" 
               style="border-radius: 70px;
            transition: all 0.3s ease;
            filter: drop-shadow(0 0 10px #00aaff);"
     class="me-2"
     onmouseover="this.style.filter='drop-shadow(0 0 20px #00ffcc)'"
     onmouseout="this.style.filter='drop-shadow(0 0 30px #00aaff)'" class="me-2" >
                <div style="margin-top: 45px;">
                    Federal Ministry of Health  International Health Cooperation Platform
                </div>
             

          

                </div>
            <hr style="margin-top: 20px;">
              <?php echo $__env->make('layouts.navigationAdmin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
               
             <form method="POST" action="<?php echo e(route('logout')); ?>">
                            <?php echo csrf_field(); ?>

                            <?php if (isset($component)) { $__componentOriginal68cb1971a2b92c9735f83359058f7108 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal68cb1971a2b92c9735f83359058f7108 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.dropdown-link','data' => ['href' => route('logout'),'onclick' => 'event.preventDefault();
                                                this.closest(\'form\').submit();','style' => 'color: red;']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('dropdown-link'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['href' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute(route('logout')),'onclick' => 'event.preventDefault();
                                                this.closest(\'form\').submit();','style' => 'color: red;']); ?>
                                <?php echo e(__('Log Out')); ?>

                             <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal68cb1971a2b92c9735f83359058f7108)): ?>
<?php $attributes = $__attributesOriginal68cb1971a2b92c9735f83359058f7108; ?>
<?php unset($__attributesOriginal68cb1971a2b92c9735f83359058f7108); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal68cb1971a2b92c9735f83359058f7108)): ?>
<?php $component = $__componentOriginal68cb1971a2b92c9735f83359058f7108; ?>
<?php unset($__componentOriginal68cb1971a2b92c9735f83359058f7108); ?>
<?php endif; ?>
                        </form>
        </aside>

        <!-- Main Content -->
      <?php echo $__env->make('layouts.readingAdmin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

            <!-- Charts Row -->
<section class="charts-grid" style="margin-top: 40px;">
<div class="card mb-4 shadow-sm" style="padding: 23px;">
    <h5 class="mb-4 text-success" >📊 Projects by sector</h5>

            
            <form method="GET" action="<?php echo e(route('dashboard')); ?>" class="mb-4">
                <div class="">
                    <div class="">
                        <label>From date</label>
                        <input type="date" name="start_date" class="form-control" value="<?php echo e($start_date ?? ''); ?>">
                    </div>
                    <div class="">
                       <label>To date</label>
                        <input type="date" name="end_date" class="form-control" value="<?php echo e($end_date ?? ''); ?>">
                    </div>
                    <div class=" d-flex align-items-end">
                        <button type="submit" class="btn btn-success w-100">Filtering application</button>
                    </div>
                </div>
            </form>
    </div>
                    
    <!-- عدد المشاريع -->
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">📈Number of projects per sector</h5>
            <canvas id="sectorCountChart"></canvas>
        </div>
    </div>

    <!-- إجمالي التكلفة -->
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">💰Total cost per sector</h5>
            <canvas id="sectorCostChart"></canvas>
        </div>
    </div>

   

   

</section>


            
            <section class="charts-grid" style="margin-top: 40px;">

                <div class="chart-container" style="width: 686px;" > Latest Donations and grants
                    <button class="btn" data-bs-toggle="modal" data-bs-target="#GrantModal" > View all </button>
                    <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th> Donations Name  </th>
                                    <th> type </th>
                                    
                                    <th> Data </th>
                                    <th>Cost</th>
                                    <th>Currency</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__currentLoopData = $lastGrants; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $grant): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr>
                                    <td><?php echo e($grant->grant_itle); ?></td>
                                    <td><?php echo e($grant->sectorName ?? '-'); ?></td>
                                
                                    <td><?php echo e($grant->grant_date); ?></td>
                                    <td><?php echo e(number_format($grant->grant_amount, 2)); ?></td>
                                    <td><?php echo e($grant->currency); ?></td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>

                </div>
                <div class="chart-container" style="width: 530px;"> Geographical distribution of projects
                        <strong>
                        <button class="btn" data-bs-toggle="modal" data-bs-target="#mapModal" >View on map </button>
                 </strong>
                        <canvas id="stateChart"></canvas>
                </div>
            </section>
           <section class="charts-grid" style="margin-top: 40px;">
              
                <div class="chart-container" style="width: 1245px"> 
                 <div style="direction: rtl;">
                    <?php if(Auth::user()->referencesUser == "admin"): ?>
                        
                    <?php else: ?>
                         <button style="direction: ltr;" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#ProjectModal" > 
                              New Project <li class="fa fa-plus"></li> 
                          </button>
                       
                    <?php endif; ?>
                    
                    </div>
                                 <h3 class="mb-4"  >  List of projects:    </h3>
         <table id="projects-table" class="display" style="width: 1180px;">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th> Project Title  </th>
                                <th> Project Description </th>
                                <th> Start date  </th>
                                <th> End date  </th>
                                <th> Total cost </th>
                                 <th> Currency </th>
                                 <!--th> Donor </th-->
                                  <th> Document </th>
                                <th> Status </th>
                                <th> --</th>
                                <th> show </th>
                              
                                
                            </tr>
                        </thead>
                     </table>
                </div>
               
            </section>
        </main>
     
    </div>
      
</body>


<div class="modal fade" id="GrantModal" tabindex="-1" aria-labelledby="GrantModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered"> <!-- هنا نضيف modal-dialog-centered -->
    <div class="modal-content" style="width: 722px;">
      <div class="modal-header">
        <h5 class="modal-title" id="GrantModalLabel"> المنح   </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>
      <div class="modal-body">
       <table id="grant-table" class="display" style="">
                        <thead>
                            <tr>
                                <th>الرقم</th>
                                <th>إسم المنحة</th>
                                <th> الغرض من المنحة </th>
                                <th> المنظمة </th>
                                 <th> القطاع </th>
                                <th>تاريخ المنحة</th>
                                <th> التكلفة</t <button type="button" class="btn btn-success">حفظ</button>h>
                                <th> الحالة</th>
                              
                                
                            </tr>
                        </thead>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
        
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="donationsModal" tabindex="-1" aria-labelledby="donationsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered"> <!-- هنا نضيف modal-dialog-centered -->
    <div class="modal-content" style="width: 722px;">
      <div class="modal-header">
        <h5 class="modal-title" id="donationsModalLabel">  الهبات  </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>
      <div class="modal-body">
        <table id="donations-table" class="display" style="width: 1180px;text-align: end;">
                        <thead>
                            <tr>
                                <th>الرقم</th>
                                <th>إسم الهبة</th>
                                <th>تاريخ الهبة</th>
                                <th> القطاع </th>
                                <th>  العدد </th>
                                <th> التكلفة</th>
                                 <th> العملة</th>
                                <th> الحالة</th>
                              
                                
                            </tr>
                        </thead>
                     </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
      
      </div>
    </div>
  </div>
</div>


<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() {
            $('#projects-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '<?php echo e(route('projects.data')); ?>',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'projects_title', name: 'projects_title' },
                    { data: 'description', name: 'description' },
                    { data: 'start_date', name: 'start_date' },
                    { data: 'end_date', name: 'end_date' },
                    { data: 'total_cost', name: 'total_cost' },
                    { data: 'currency', name: 'currency' },
                  //  { data: 'sponsors_name', name: 'sponsors_name' },
                   { data: 'Project_Document', name: 'Project_Document', orderable: false, searchable: false }, 
                      { data: 'action', name: 'action', orderable: false, searchable: false },
                    { data: 'action2', name: 'action2', orderable: false, searchable: false },
                     { data: 'view', name: 'view', orderable: false, searchable: false },
                   
                ]
            });
        });
    </script>
      <script>
        $(function() {
            $('#grant-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '<?php echo e(route('grant.data')); ?>',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'grant_itle', name: 'grant_itle' },
                    { data: 'purpose', name: 'purpose' },
                    { data: 'sectorName', name: 'sectorName' },
                    { data: 'grant_date', name: 'grant_date' },
                    { data: 'grant_amount', name: 'grant_amount' },
                    { data: 'currency', name: 'currency' },
                    { data: 'action2', name: 'action2', orderable: false, searchable: false },
                   
                ]
            });
        });
    </script>
      <script>
        $(function() {
            $('#donations-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '<?php echo e(route('donations.data')); ?>',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'donation_title', name: 'donation_title' },
                    { data: 'donation_date', name: 'donation_date' },
                    { data: 'sectorName', name: 'sectorName' },
                    { data: 'quantity', name: 'quantity' },
                    { data: 'donation_amount', name: 'donation_amount' },
                    { data: 'currency', name: 'currency' },
                    { data: 'action2', name: 'action2', orderable: false, searchable: false },
                   
                ]
            });
        });
    </script>


<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered"> <!-- هنا نضيف modal-dialog-centered -->
    <div class="modal-content" style="width: 722px;">
     
      <div class="map-container" style="width: 1000px;">
    <h3 id="total-projects"></h3>
    <div id="map"></div>
</div>
    </div>
  </div>
</div>

 

<?php $__env->startSection('scripts'); ?>

<script>
    // 📈 Number of projects per sector
    new Chart(document.getElementById('sectorCountChart'), {
        type: 'bar',
        data: {
            labels: <?php echo json_encode($data->pluck('sector_name')); ?>,
            datasets: [{
                label: 'Number of projects',
                data: <?php echo json_encode($data->pluck('project_count')); ?>,
                backgroundColor: '#36A2EB'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: { display: true, text: 'Number of projects by sector' }
            }
        }
    });

    // 💰otal cost per sector
    new Chart(document.getElementById('sectorCostChart'), {
        type: 'pie',
        data: {
            labels: <?php echo json_encode($data->pluck('sector_name')); ?>,
            datasets: [{
                label: 'Total cost',
                data: <?php echo json_encode($data->pluck('total_cost')); ?>,
                backgroundColor: ['#FF6384','#36A2EB','#FFCE56','#4CAF50','#8E44AD']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: { display: true, text: 'Total cost by sector' }
            }
        }
    });
</script>
<script>
    // إنشاء الخريطة
    var map = L.map('map2').setView([15.5007, 32.5599], 6); //Sudan Center, for example

    // إضافة طبقة أساسية
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // إنشاء مجموعة التجميع
    var markers = L.markerClusterGroup();

    // بيانات المشاريع من Laravel
    var projects = <?php echo json_encode($projects); ?>;

    // إضافة العلامات لكل مشروع
    projects.forEach(function(project) {
        if(project.latitude && project.longitude) {
            var marker = L.marker([project.latitude, project.longitude])
                .bindPopup(
                    "<b>" + project.title + "</b><br>" +
                    "القطاع: " + project.sector_name + "<br>" +
                    "التكلفة: " + project.TotalCost + " " + project.currency
                );
            markers.addLayer(marker);
        }
    });

    // إضافة التجميع للخريطة
    map.addLayer(markers);
</script>


<script>
    new Chart(document.getElementById('stateChart'), {
        type: 'bar',
        data: {
            labels: <?php echo json_encode($data2->pluck('state_name')); ?>,
            datasets: [{
                label:'Number of projects',
                data: <?php echo json_encode($data2->pluck('project_count')); ?>,
                backgroundColor: '#36A2EB'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: { display: true, text: 'Number of projects by state' }
            }
        }
    });
</script>

<script>
    var map = L.map('map').setView([15.5, 32.5], 6);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    
    var statesData = <?php echo json_encode($data2); ?>;

// حساب إجمالي المشاريع
var totalProjects = statesData.reduce((sum, s) => sum + s.project_count, 0);

// عرض العدد في العنوان
document.getElementById('total-projects').innerText = " Total projects in Sudan : " + totalProjects;


   
    var stateMapping = {
        "Khartoum": "الخرطوم",
        "Gezira": "ولاية الجزيرة",
        "Red Sea": "البحر الاحمر",
        "River Nile": "ولاية نهر النيل",
        "Northern": "ولاية الشمالية",
        "North Kordofan": "ولاية شمال كردفان",
        "South Kordofan": "ولاية جنوب كردفان",
        "Blue Nile": "النيل الازرق",
        "White Nile": "ولاية النيل الأبيض",
        "Sennar": "ولاية سنار",
        "Kassala": "ولاية كسلا",
        "Gedaref": "ولاية القضارف",
        "West Darfur": "ولاية غرب دارفور",
        "Central Darfur": "ولاية وسط دارفور",
        "South Darfur": "ولاية جنوب دارفور",
        "East Darfur": "ولاية شرق دارفور",
        "North Darfur": "ولاية شمال دارفور"
    };

   fetch('geojson/geoBoundaries-SDN-ADM1.geojson')
    .then(res => res.json())
    .then(geojson => {
        L.geoJSON(geojson, {
            style: function(feature) {
                let geoName = feature.properties.shapeName; // في ملفات GeoBoundaries الاسم غالبًا هنا
                let dbName  = stateMapping[geoName];
                let stateInfo = statesData.find(s => s.state_name === dbName);
                let count = stateInfo ? stateInfo.project_count : 0;

                let color = count > 20 ? '#006400' : count > 10 ? '#32CD32' : '#90EE90';

                return {
                    fillColor: color,
                    weight: 1,
                    color: '#333',
                    fillOpacity: 0.7
                };
            },
            onEachFeature: function(feature, layer) {
                let geoName = feature.properties.shapeName;
                let dbName  = stateMapping[geoName];
                let stateInfo = statesData.find(s => s.state_name === dbName);
                let count = stateInfo ? stateInfo.project_count : 0;

                layer.bindPopup("<b>" + dbName + "</b><br>Number of projects: " + count);
            }
        }).addTo(map);

        // Legend
        var legend = L.control({position: 'bottomright'});
        legend.onAdd = function(map) {
            var div = L.DomUtil.create('div', 'info legend');
            div.innerHTML += '<i style="background:#006400"></i> أكثر من 20 مشروع<br>';
            div.innerHTML += '<i style="background:#32CD32"></i> 10 - 20 مشروع<br>';
            div.innerHTML += '<i style="background:#90EE90"></i> أقل من 10 مشروع<br>';
            return div;
        };
        legend.addTo(map);
    });

</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    var ctx = document.getElementById('orgSectorChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: <?php echo json_encode($data3->pluck('organization_name')); ?>,
            datasets: [{
                label: 'Number of sectors per organization',
                data: <?php echo json_encode($data3->pluck('sector_count')); ?>,
                backgroundColor: '#2e8b57'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false },
                title: { display: true, text: 'Report on the number of sectors per organization' }
            }
        }
    });
</script>

 <?php echo $__env->make('layouts.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

<?php echo $__env->make('layouts.app2', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/moh-portal/resources/views/IndexPage.blade.php ENDPATH**/ ?>