@extends('backend.dashboard.layout.master')
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->

            <!--end::Toolbar-->
            <!--begin::Content-->
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-fluid">
                    <!--begin::Row-->
                    <div class="row g-5 gx-xl-10 mb-5 mb-xl-10">
                        <!--begin::Col-->
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-5">
                            <!--begin::Card widget 20-->
                            <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-100 mb-5"
                                style="background-color:#17c654d2; background-image: url('');">
                                <!--begin::Header-->
                                <div class="card-header pt-5">
                                    <!--begin::Title-->
                                    <div class="card-title d-flex flex-column">
                                        <!--begin::Amount-->
                                        <div class="m-0"><i class="ki-duotone ki-compass fs-2hx text-gray-100"><span
                                                    class="path1"></span><span class="path2"></span></i></div>
                                        <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">${{ $fixed }}</span>
                                        <!--end::Amount-->
                                        <!--begin::Subtitle-->
                                        <span class="text-white opacity-75 pt-1 fw-semibold fs-6">{{ __('messages.Fixed_Expenses') }}
                                        </span>
                                        <!--end::Subtitle-->
                                    </div>
                                    <!--end::Title-->
                                </div>
                                <!--end::Header-->
                                <!--begin::Card body-->
                                <div class="card-body d-flex align-items-end pt-0">
                                    <!--begin::Progress-->
                                    <div class="d-flex align-items-center flex-column mt-3 w-100">
                                        <div
                                            class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">
                                            <span>{{ $fixed }}%</span>
                                        </div>
                                        @php
                                            //fix percentage
                                            $fixPercentage = 0;
                                            if ($revenuesTotal > 0) {
                                                ($fixed / $revenuesTotal) * 100;
                                            }
                                        @endphp
                                        @php
                                            $revenuePercentage = 0; // revenue percentage

                                            if ($fixed > 0) {
                                                $revenuePercentage = ($revenuesTotal / $fixed) * 100;
                                            }
                                        @endphp
                                        <div class="h-8px mx-3 w-100 bg-white rounded">
                                            <div class="bg-success rounded h-8px" role="progressbar"
                                                style="width: {{ $fixed }}%;" aria-valuenow="0" aria-valuemin="0"
                                                aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <!--end::Progress-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card widget 20-->
                        </div>
                        <!--end::Col-->


                        <!--end::Row-->
                        <!--camera_Modal-->
                       <!-- Hidden input to store the photo -->
<input type="hidden" id="photo-data" name="photo_data">
<input type="hidden" id="photo-filename" name="photo_filename" value="attendance_1777808724.png">

<div id="presence-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Take a Photo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <video id="camera" class="rounded border w-100" autoplay></video>
                <canvas id="canvas" class="d-none"></canvas>
                <img id="photo-preview" class="d-none rounded border mt-3 w-100" />

                <div class="mt-3">
                    <button id="capture-btn" class="btn btn-primary">{{ translate('capture') }}</button>
                    <button id="retake-btn" class="btn btn-warning d-none">{{ translate('capture') }}</button>
                    <button id="save-btn" class="btn btn-success d-none">{{ translate('save') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>
                        <!--Camera_End-->
                        <!--begin::Col-->
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-5">
                            <!--begin::Card widget 20-->
                            <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-100 mb-5"
                                style="background-color: #268ae8ef; background-image: url('assets/media/patterns/vector-1.png');">
                                <!--begin::Header-->
                                <div class="card-header pt-5">
                                    <!--begin::Title-->
                                    <div class="card-title d-flex flex-column">
                                        <!--begin::Amount-->
                                        <i class="ki-duotone ki-chart-simple fs-2hx text-gray-100"><span
                                                class="path1"></span><span class="path2"></span><span
                                                class="path3"></span><span class="path4"></span></i>
                                        <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">${{ $revenuesTotal }}</span>
                                        <!--end::Amount-->
                                        <!--begin::Subtitle-->
                                        <span class="text-white opacity-75 pt-1 fw-semibold fs-6">{{ translate('revenues') }}
                                        </span>
                                        <!--end::Subtitle-->
                                    </div>
                                    <!--end::Title-->
                                </div>
                                <!--end::Header-->
                                <!--begin::Card body-->
                                <div class="card-body d-flex align-items-end pt-0">
                                    <!--begin::Progress-->
                                    <div class="d-flex align-items-center flex-column mt-3 w-100">
                                        <div
                                            class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">

                                            <span>{{ $revenuePercentage }}%</span>
                                        </div>
                                        <div class="h-8px mx-3 w-100 bg-light rounded">
                                            <div class="bg-danger rounded h-8px" role="progressbar"
                                                style="width: {{ $revenuePercentage }}%;" aria-valuenow="72"
                                                aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <!--end::Progress-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card widget 20-->
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-5">
                            <!--begin::Card widget 20-->
                            <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-100 mb-5"
                                style="background-color: #FF69B4; background-image: url('assets/media/patterns/vector-1.png');">
                                <!--begin::Header-->
                                <div class="card-header pt-5">
                                    <!--begin::Title-->
                                    <div class="card-title d-flex flex-column">
                                        <!--begin::Amount-->
                                        <i class="ki-duotone ki-abstract-39 fs-2hx text-gray-100"><span
                                                class="path1"></span><span class="path2"></span></i>
                                        <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">${{ $expensesTotal }}</span>
                                        <!--end::Amount-->
                                        <!--begin::Subtitle-->
                                        @php
                                            $revenuePercentage = 0; // Default value

                                            if ($expensesTotal > 0) {
                                                $revenuePercentage = ($revenuesTotal / $expensesTotal) * 100;
                                            }
                                        @endphp
                                        <span class="text-white opacity-75 pt-1 fw-semibold fs-6">{{ translate('expenses') }}</span>
                                        <!--end::Subtitle-->
                                    </div>
                                    <!--end::Title-->
                                </div>
                                <!--end::Header-->
                                <!--begin::Card body-->
                                <div class="card-body d-flex align-items-end pt-0">
                                    <!--begin::Progress-->
                                    <div class="d-flex align-items-center flex-column mt-3 w-100">
                                        <div
                                            class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">
                                            <span>{{ $expensesTotal }}%</span>
                                        </div>
                                        <div class="h-8px mx-3 w-100 bg-light rounded">
                                            <div class="bg-danger rounded h-8px" role="progressbar" style="width: {{ $revenuePercentage }}%;"
                                                aria-valuenow="{{ $revenuePercentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <!--end::Progress-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card widget 20-->
                        </div>
                        <!--end::Col-->


                        <!--begin::Col-->
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-5">
                            <!--begin::Card widget 20-->
                            <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-100 mb-5"
                                style="background-color: #808080; background-image: url('assets/media/patterns/vector-1.png');">
                                <!--begin::Header-->
                                <div class="card-header pt-5">
                                    <!--begin::Title-->
                                    <div class="card-title d-flex flex-column">
                                        <!--begin::Amount-->
                                        <i class="ki-duotone ki-map fs-2hx text-gray-100"><span class="path1"></span><span
                                                class="path2"></span><span class="path3"></span></i>
                                        <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">${{ $revenuesTotal }}</span>
                                        <!--end::Amount-->
                                        <!--begin::Subtitle-->
                                        <span class="text-white opacity-75 pt-1 fw-semibold fs-6">{{ translate('finance') }}</span>
                                        <!--end::Subtitle-->
                                    </div>
                                    <!--end::Title-->
                                </div>
                                <!--end::Header-->
                                <!--begin::Card body-->
                                <div class="card-body d-flex align-items-end pt-0">
                                    <!--begin::Progress-->
                                    <div class="d-flex align-items-center flex-column mt-3 w-100">
                                        <div
                                            class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">
                                            <span>{{ $revenuePercentage }}%</span>
                                        </div>
                                        <div class="h-8px mx-3 w-100 bg-light rounded">
                                            <div class="bg-white rounded h-8px" role="progressbar" style="width: {{ $revenuePercentage }}%;"
                                                aria-valuenow="{{ $revenuePercentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <!--end::Progress-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card widget 20-->
                        </div>
                        <!--end::Col-->


                    </div>



                    <!--begin::Row-->
                    <div class="row g-5 g-xl-10 mb-5 mb-xl-10">

                        <!--begin::Col-->
                        <div class="col-xl-6">
                            <!--begin::Chart widget 36-->
                            <div class="card card-flush overflow-hidden h-lg-100">
                                <!--begin::Header-->
                                <div class="card-header pt-5">
                                    <!--begin::Title-->
                                    <h3 class="card-title align-items-start flex-column">
                                        <span class="card-label fw-bold text-gray-900">{{ translate('performance') }}</span>
                                        <span class="text-gray-500 mt-1 fw-semibold fs-6">{{ translate('1,046 Inbound Calls today') }}</span>
                                    </h3>
                                    <!--end::Title-->
                                    <!--begin::Toolbar-->
                                    <div class="card-toolbar">
                                        <!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
                                        <div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left"
                                            data-kt-daterangepicker-range="today"
                                            class="btn btn-sm btn-light d-flex align-items-center px-4">
                                            <!--begin::Display range-->
                                            <div class="text-gray-600 fw-bold">{{ translate('Loading date range...') }}</div>
                                            <!--end::Display range-->
                                            <i class="ki-duotone ki-calendar-8 text-gray-500 lh-0 fs-2 ms-2 me-0">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                                <span class="path3"></span>
                                                <span class="path4"></span>
                                                <span class="path5"></span>
                                                <span class="path6"></span>
                                            </i>
                                        </div>
                                        <!--end::Daterangepicker-->
                                    </div>
                                    <!--end::Toolbar-->
                                </div>
                                <!--end::Header-->
                                <!--begin::Card body-->
                                <div class="card-body d-flex align-items-end p-0">
                                    <!--begin::Chart-->
                                    <div id="kt_charts_widget_36" class="min-h-auto w-100 ps-4 pe-6"
                                        style="height: 300px">
                                    </div>
                                    <!--end::Chart-->
                                </div>
                                <!--end::Card body-->
                                  <script>
                                    //load this block first before to laod the css, html and, js
                                    document.addEventListener("DOMContentLoaded", function() {
                                      // Complete cleanup of any existing charts
                                      function cleanupCharts() {
                                        // 1. Try destroying any ApexCharts instances
                                        if (window.myChartWidget36) {
                                          try {
                                            window.myChartWidget36.destroy();
                                          } catch (e) {
                                            console.log("Error destroying chart:", e);
                                          }
                                          window.myChartWidget36 = null;
                                        }

                                        // 2. Try cleaning up Metronic-specific instances
                                        if (window.KTChartsWidget36) {
                                          try {
                                            if (typeof window.KTChartsWidget36.destroy === 'function') {
                                              window.KTChartsWidget36.destroy();
                                            }
                                          } catch (e) {
                                            console.log("Error destroying Metronic chart:", e);
                                          }
                                          window.KTChartsWidget36 = null;
                                        }

                                        // 3. Get the element and completely reset it
                                        var element = document.getElementById('kt_charts_widget_36');
                                        if (element) {
                                          // Remove all content and recreate the element
                                          var parent = element.parentNode;
                                          var newElement = document.createElement('div');
                                          newElement.id = 'kt_charts_widget_36';
                                          newElement.className = element.className;
                                          newElement.style.cssText = element.style.cssText;
                                          newElement.style.height = '300px';
                                          parent.replaceChild(newElement, element);
                                        }
                                      }

                                      // Initialize a completely fresh chart
                                      function initChart() {
                                        // Get the fresh element
                                        var element = document.getElementById('kt_charts_widget_36');
                                        if (!element) {
                                          console.error("Chart container not found!");
                                          return;
                                        }

                                        if (typeof ApexCharts !== 'undefined') {
                                          // Create new chart with your data

                                          var options = {
                                            series: [
                                              {
                                                name: 'New Series 1',
                                                data: {{ $revenueArr }}
                                              },
                                              {
                                                name: 'New Series 2',
                                                data: {{ $expenseArr }}
                                              }
                                            ],
                                            chart: {
                                              height: 300,
                                              type: 'area',
                                              toolbar: {
                                                show: false
                                              },
                                              animations: {
                                                enabled: true
                                              },
                                              redrawOnWindowResize: true
                                            },
                                            colors: ['#3E97FF', '#50CD89'],
                                            dataLabels: {
                                              enabled: false
                                            },
                                            stroke: {
                                              curve: 'smooth',
                                              width: 2
                                            },
                                            xaxis: {
                                              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
                                            },
                                            yaxis: {
                                              min: 0, // Force y-axis to start from 0
                                              forceNiceScale: true // Make y-axis scales "nice" numbers
                                            },
                                            tooltip: {
                                              y: {
                                                formatter: function(val) {
                                                  return val
                                                }
                                              }
                                            }
                                          };

                                          var chart = new ApexCharts(element, options);
                                          chart.render();

                                          // Store for future reference
                                          window.myChartWidget36 = chart;

                                          console.log("New chart created successfully");
                                        } else {
                                          console.error("ApexCharts library not found");
                                        }
                                      }

                                      // Call cleanup first
                                      cleanupCharts();

                                      // Then initialize fresh chart
                                      initChart();

                                      // Custom resize handler
                                      var resizeTimer;
                                      window.addEventListener('resize', function() {
                                        clearTimeout(resizeTimer);
                                        resizeTimer = setTimeout(function() {
                                          if (window.myChartWidget36) {
                                            window.myChartWidget36.updateOptions({
                                              chart: {
                                                height: document.getElementById('kt_charts_widget_36').offsetHeight
                                              }
                                            }, false, true);
                                          }
                                        }, 250);
                                      });
                                    });
                                  </script>
                            </div>
                            <!--end::Chart widget 36-->
                        </div>
                        <!--end::Col-->
                          <!--begin::Col-->
                          <div class="col-xl-6">
                            <!--begin::Table widget 14-->
                            <div class="card card-flush h-md-100">
                                <!--begin::Header-->
                                <div class="card-header pt-7">
                                    <!--begin::Title-->
                                    <h3 class="card-title align-items-start flex-column">
                                        <span class="card-label fw-bold text-gray-800">{{ translate('projects stats') }}</span>
                                        <span class="text-gray-500 mt-1 fw-semibold fs-6">{{ translate('Updated 37 minutes ago') }}</span>
                                    </h3>
                                    <!--end::Title-->
                                    <!--begin::Toolbar-->
                                    <div class="card-toolbar">
                                        <a href="apps/ecommerce/catalog/add-product.html"
                                            class="btn btn-sm btn-light">{{ translate('history') }}</a>
                                    </div>
                                    <!--end::Toolbar-->
                                </div>
                                <!--end::Header-->
                                <!--begin::Body-->
                                <div class="card-body pt-6">
                                    <!--begin::Table container-->
                                    <div class="table-responsive">
                                        <!--begin::Table-->
                                        <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
                                            <!--begin::Table head-->
                                            <thead>
                                                <tr class="fs-7 fw-bold text-gray-500 border-bottom-0">
                                                    <th class="p-0 pb-3 min-w-175px text-start">{{ translate('ITEM') }}</th>
                                                    <th class="p-0 pb-3 min-w-100px text-end">{{ translate('BUDGET') }}</th>
                                                    <th class="p-0 pb-3 min-w-100px text-end">{{ translate('PROGRESS') }}</th>
                                                    <th class="p-0 pb-3 min-w-175px text-end pe-12">{{ translate('Status') }}</th>
                                                    <th class="p-0 pb-3 w-125px text-end pe-7">{{ translate('CHART') }}</th>
                                                    <th class="p-0 pb-3 w-50px text-end">{{ translate('VIEW') }}</th>
                                                </tr>
                                            </thead>
                                            <!--end::Table head-->
                                            <!--begin::Table body-->
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="symbol symbol-50px me-3">
                                                                <img src="{{ asset('assets/media/stock/600x600/img-49.jpg') }}"
                                                                    class="" alt="" />
                                                            </div>
                                                            <div class="d-flex justify-content-start flex-column">
                                                                <a href="#"
                                                                    class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{ translate('Mivy') }}
                                                                    {{ translate('App') }}</a>
                                                                <span class="text-gray-500 fw-semibold d-block fs-7">{{ translate('Jane') }}
                                                                    {{ translate('Cooper') }}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <span class="text-gray-600 fw-bold fs-6">$32,400</span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1">
                                                                <span class="path1"></span>
                                                                <span class="path2"></span>
                                                            </i>9.2%</span>
                                                        <!--end::Label-->
                                                    </td>
                                                    <td class="text-end pe-12">
                                                        <span class="badge py-3 px-4 fs-7 badge-light-primary">
                                                            {{ translate('In Process') }}
                                                            </span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <div id="kt_table_widget_14_chart_1" class="h-50px mt-n8 pe-7"
                                                            data-kt-chart-color="success"></div>
                                                    </td>
                                                    <td class="text-end">
                                                        <a href="#"
                                                            class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px">
                                                            <i class="ki-duotone ki-black-right fs-2 text-gray-500"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="symbol symbol-50px me-3">
                                                                <img src="{{ asset('assets/media/stock/600x600/img-40.jpg') }}"
                                                                    class="" alt="" />
                                                            </div>
                                                            <div class="d-flex justify-content-start flex-column">
                                                                <a href="#"
                                                                    class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{ translate('Avionica') }}</a>
                                                                <span class="text-gray-500 fw-semibold d-block fs-7">{{ translate('Esther') }}
                                                                    {{ translate('Howard') }}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <span class="text-gray-600 fw-bold fs-6">$256,910</span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-danger fs-base">
                                                            <i class="ki-duotone ki-arrow-down fs-5 text-danger ms-n1">
                                                                <span class="path1"></span>
                                                                <span class="path2"></span>
                                                            </i>0.4%</span>
                                                        <!--end::Label-->
                                                    </td>
                                                    <td class="text-end pe-12">
                                                        <span class="badge py-3 px-4 fs-7 badge-light-warning"> {{ translate('On Hold') }}</span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <div id="kt_table_widget_14_chart_2" class="h-50px mt-n8 pe-7"
                                                            data-kt-chart-color="danger"></div>
                                                    </td>
                                                    <td class="text-end">
                                                        <a href="#"
                                                            class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px">
                                                            <i class="ki-duotone ki-black-right fs-2 text-gray-500"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="symbol symbol-50px me-3">
                                                                <img src="{{ asset('assets/media/stock/600x600/img-39.jpg') }}"
                                                                    class="" alt="" />
                                                            </div>
                                                            <div class="d-flex justify-content-start flex-column">
                                                                <a href="#"
                                                                    class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Charto
                                                                    CRM</a>
                                                                <span class="text-gray-500 fw-semibold d-block fs-7">Jenny
                                                                    Wilson</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <span class="text-gray-600 fw-bold fs-6">$8,220</span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1">
                                                                <span class="path1"></span>
                                                                <span class="path2"></span>
                                                            </i>9.2%</span>
                                                        <!--end::Label-->
                                                    </td>
                                                    <td class="text-end pe-12">
                                                        <span class="badge py-3 px-4 fs-7 badge-light-primary">{{ translate('In Process') }}</span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <div id="kt_table_widget_14_chart_3" class="h-50px mt-n8 pe-7"
                                                            data-kt-chart-color="success"></div>
                                                    </td>
                                                    <td class="text-end">
                                                        <a href="#"
                                                            class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px">
                                                            <i class="ki-duotone ki-black-right fs-2 text-gray-500"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="symbol symbol-50px me-3">
                                                                <img src="{{ asset('assets/media/stock/600x600/img-47.jpg') }}"
                                                                    class="" alt="" />
                                                            </div>
                                                            <div class="d-flex justify-content-start flex-column">
                                                                <a href="#"
                                                                    class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Tower
                                                                    Hill</a>
                                                                <span class="text-gray-500 fw-semibold d-block fs-7">Cody
                                                                    Fisher</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <span class="text-gray-600 fw-bold fs-6">$74,000</span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1">
                                                                <span class="path1"></span>
                                                                <span class="path2"></span>
                                                            </i>9.2%</span>
                                                        <!--end::Label-->
                                                    </td>
                                                    <td class="text-end pe-12">
                                                        <span
                                                            class="badge py-3 px-4 fs-7 badge-light-success">{{ translate('Complated') }}</span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <div id="kt_table_widget_14_chart_4" class="h-50px mt-n8 pe-7"
                                                            data-kt-chart-color="success"></div>
                                                    </td>
                                                    <td class="text-end">
                                                        <a href="#"
                                                            class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px">
                                                            <i class="ki-duotone ki-black-right fs-2 text-gray-500"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="symbol symbol-50px me-3">
                                                                <img src="{{ asset('assets/media/stock/600x600/img-48.jpg') }}"
                                                                    class="" alt="" />
                                                            </div>
                                                            <div class="d-flex justify-content-start flex-column">
                                                                <a href="#"
                                                                    class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">9
                                                                    Degree</a>
                                                                <span
                                                                    class="text-gray-500 fw-semibold d-block fs-7">Savannah
                                                                    Nguyen</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <span class="text-gray-600 fw-bold fs-6">$183,300</span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-danger fs-base">
                                                            <i class="ki-duotone ki-arrow-down fs-5 text-danger ms-n1">
                                                                <span class="path1"></span>
                                                                <span class="path2"></span>
                                                            </i>0.4%</span>
                                                        <!--end::Label-->
                                                    </td>
                                                    <td class="text-end pe-12">
                                                        <span class="badge py-3 px-4 fs-7 badge-light-primary"> {{  translate('In Process') }}</span>
                                                    </td>
                                                    <td class="text-end pe-0">
                                                        <div id="kt_table_widget_14_chart_5" class="h-50px mt-n8 pe-7"
                                                            data-kt-chart-color="danger"></div>
                                                    </td>
                                                    <td class="text-end">
                                                        <a href="#"
                                                            class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px">
                                                            <i class="ki-duotone ki-black-right fs-2 text-gray-500"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <!--end::Table body-->
                                        </table>
                                    </div>
                                    <!--end::Table-->
                                </div>
                                <!--end: Card Body-->
                            </div>
                            <!--end::Table widget 14-->
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Row-->


                </div>
                <!--end::Content container-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::Content wrapper-->
        <!--begin::Footer-->
        <!--end::Footer-->
    </div>
    <div class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
        <!--begin::Copyright-->

        <!--end::Copyright-->
        <!--begin::Menu-->

        <!--end::Menu-->
    </div>
@endsection