@extends('layouts.app')

@php
    // ✅ Spatie se role check hoga (no role column)
    $user = auth()->user();
@endphp


<!--\\\\\\\\\\\\\\\\\\\\\\\   start style //////////////////////////////--> 
@push('style')

    @if($user->hasAnyRole(['awqaf admin', 'super admin']))
        <!-------------------- start awqaf admin ----------------------------->
            <style>
      :root {
        --bg: #eef2f7;
        --ink: #0f172a;
        --muted: #64748b;
        --dark: #0b1220;

        --shadow: 0 18px 44px rgba(2, 6, 23, 0.18);
        --shadow2: 0 10px 24px rgba(2, 6, 23, 0.1);

        --radius: 18px;
        --radius2: 14px;

        --primary: #2563eb;
        --success: #16a34a;
        --warning: #f59e0b;
        --danger: #ef4444;

        --topbar: #0f213d;
        --topbar2: #1a335b;
      }

      body {
        background:
          radial-gradient(1200px 650px at 10% 10%, #e7f0ff 0%, transparent 55%),
          radial-gradient(1200px 650px at 85% 25%, #eafcf0 0%, transparent 55%),
          radial-gradient(900px 550px at 40% 90%, #fff2e7 0%, transparent 55%),
          var(--bg);
        color: var(--ink);
        font-family:
          system-ui,
          -apple-system,
          Segoe UI,
          Roboto,
          Arial,
          sans-serif;
      }

      .wrap {
        max-width: 1400px;
        margin: 18px auto;
        padding: 14px;
      }
      .page-title {
        font-weight: 900;
        font-size: 44px;
        letter-spacing: 0.2px;
        margin: 10px 0 18px;
      }
      .page-title span {
        font-weight: 500;
        color: #64748b;
      }

      /* ===== Dashboard Card (Left) ===== */
      .dash {
        border-radius: 22px;
        overflow: hidden;
        box-shadow: var(--shadow);
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
      }

      .dash-topbar {
        background: linear-gradient(180deg, var(--topbar), #0c1a33);
        color: rgba(255, 255, 255, 0.9);
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .dash-tabs {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
      }
      .tabpill {
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        font-weight: 800;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        user-select: none;
        white-space: nowrap;
      }
      .tabpill.active {
        background: rgba(59, 130, 246, 0.22);
        border-color: rgba(59, 130, 246, 0.35);
      }

      .dash-metrics {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 12px 14px 14px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.06),
          rgba(255, 255, 255, 0)
        );
      }
      .metric {
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 10px 12px;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
      }
      .metric b {
        font-size: 26px;
      }
      .metric span {
        color: rgba(255, 255, 255, 0.75);
        font-weight: 800;
        font-size: 12px;
      }

      .dash-body {
        padding: 14px;
        background: rgba(255, 255, 255, 0.72);
      }

      .panel {
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(15, 23, 42, 0.1);
        box-shadow: var(--shadow2);
        overflow: hidden;
      }

      .panel-head {
        padding: 12px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: rgba(248, 250, 252, 0.9);
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        flex-wrap: wrap;
      }
      .panel-head .h {
        font-weight: 900;
        font-size: 22px;
      }

      .controls {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .mini-select {
        border-radius: 12px;
        font-weight: 800;
        font-size: 12px;
      }

      table thead th {
        background: rgba(148, 163, 184, 0.12);
        font-size: 12px;
        font-weight: 900;
        color: #334155;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
        white-space: nowrap;
      }
      table tbody td {
        font-size: 12px;
        font-weight: 700;
        color: #0f172a;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        vertical-align: middle;
      }

      .avatar {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(37, 99, 235, 0.1);
        border: 1px solid rgba(37, 99, 235, 0.18);
        color: #1e40af;
        font-weight: 900;
        flex: 0 0 auto;
      }

      .row-name {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 220px;
      }
      .row-name .title {
        font-weight: 900;
        line-height: 1.1;
      }
      .row-name small {
        color: var(--muted);
        font-weight: 800;
        display: block;
        margin-top: 2px;
      }

      .badge-soft {
        padding: 7px 10px;
        border-radius: 999px;
        font-weight: 900;
        font-size: 11px;
        border: 1px solid rgba(15, 23, 42, 0.1);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .b-ok {
        background: rgba(22, 163, 74, 0.12);
        color: #0f6a2c;
        border-color: rgba(22, 163, 74, 0.22);
      }
      .b-w {
        background: rgba(245, 158, 11, 0.12);
        color: #8a5a00;
        border-color: rgba(245, 158, 11, 0.25);
      }
      .b-b {
        background: rgba(239, 68, 68, 0.1);
        color: #9b1c1c;
        border-color: rgba(239, 68, 68, 0.22);
      }

      .btn-mini {
        border-radius: 12px;
        font-weight: 900;
        font-size: 12px;
        padding: 6px 10px;
      }

      /* ===== Phones (Right) ===== */
      .phone-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .phone {
        border-radius: 34px;
        background: #0b1220;
        box-shadow: var(--shadow);
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .phone-inner {
        border-radius: 28px;
        background: #e9ecef;
        overflow: hidden;
        min-height: 640px;
        position: relative;
      }

      .wa-top {
        background: linear-gradient(180deg, #0b5a4a, #094f41);
        color: rgba(255, 255, 255, 0.92);
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .wa-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }
      .wa-avatar {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        flex: 0 0 auto;
      }
      .wa-name {
        font-weight: 900;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .wa-sub {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.72);
        font-weight: 700;
      }

      .wa-actions {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .wa-actions i {
        font-size: 18px;
        opacity: 0.95;
      }

      .wa-body {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .msg-card {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(15, 23, 42, 0.1);
        border-radius: 16px;
        box-shadow: 0 10px 20px rgba(2, 6, 23, 0.08);
        overflow: hidden;
      }
      .msg-head {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }
      .msg-head .left {
        min-width: 0;
      }
      .msg-head .tag {
        font-size: 11px;
        font-weight: 900;
        color: #0f6a2c;
        background: rgba(22, 163, 74, 0.12);
        border: 1px solid rgba(22, 163, 74, 0.22);
        padding: 4px 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
      }
      .msg-title {
        font-weight: 900;
        font-size: 18px;
        line-height: 1.15;
      }
      .msg-text {
        color: #334155;
        font-weight: 700;
        font-size: 12px;
        margin-top: 6px;
      }
      .msg-img {
        height: 210px;
        background: linear-gradient(
          145deg,
          rgba(148, 163, 184, 0.25),
          rgba(148, 163, 184, 0.05)
        );
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      .msg-img::after {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 12px;
        background:
          radial-gradient(
            400px 220px at 20% 20%,
            rgba(59, 130, 246, 0.18),
            transparent 55%
          ),
          radial-gradient(
            350px 220px at 80% 70%,
            rgba(34, 197, 94, 0.14),
            transparent 55%
          ),
          linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.75),
            rgba(255, 255, 255, 0.35)
          );
        border: 1px solid rgba(15, 23, 42, 0.1);
      }
      .img-badge {
        position: absolute;
        right: 18px;
        bottom: 18px;
        padding: 4px 8px;
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.82);
        color: rgba(255, 255, 255, 0.92);
        font-weight: 900;
        font-size: 11px;
        z-index: 2;
      }

      .msg-foot {
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .msg-foot .note {
        color: var(--muted);
        font-weight: 800;
        font-size: 12px;
      }

      .action-green {
        background: linear-gradient(180deg, #22c55e, #16a34a);
        border: none;
        box-shadow: 0 14px 26px rgba(22, 163, 74, 0.22);
        font-weight: 900;
        border-radius: 14px;
        padding: 10px 12px;
        width: 100%;
      }
      .action-red {
        background: linear-gradient(180deg, #f87171, #ef4444);
        border: none;
        box-shadow: 0 14px 26px rgba(239, 68, 68, 0.18);
        font-weight: 900;
        border-radius: 14px;
        padding: 10px 12px;
        width: 100%;
      }

      .wa-inputbar {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(15, 23, 42, 0.1);
        border-radius: 18px;
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 10px 22px rgba(2, 6, 23, 0.1);
      }
      .wa-inputbar .circle {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(148, 163, 184, 0.18);
        border: 1px solid rgba(15, 23, 42, 0.1);
        color: #334155;
        font-weight: 900;
        flex: 0 0 auto;
      }
      .wa-inputbar input {
        border: none;
        outline: none;
        width: 100%;
        background: transparent;
        font-weight: 800;
        color: #0f172a;
      }
      .plus-btn {
        width: 42px;
        height: 42px;
        border-radius: 999px;
        background: linear-gradient(180deg, #22c55e, #16a34a);
        border: none;
        color: #fff;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 14px 26px rgba(22, 163, 74, 0.2);
        flex: 0 0 auto;
      }

      @media (max-width: 1200px) {
        .phone-grid {
          grid-template-columns: 1fr;
        }
        .phone-inner {
          min-height: 560px;
        }
      }
      @media (max-width: 992px) {
        .dash-metrics {
          grid-template-columns: repeat(2, 1fr);
        }
        .page-title {
          font-size: 34px;
        }
      }
    </style>
        <!-------------------- end awqaf admin ------------------------------->

    @elseif($user->hasAnyRole('moulvi','cleaner'))
        <!-------------------- start moulvi ----------------------------->
       <style>
        * {
            box-sizing: border-box;
        }
        :root {
            --primary-color: #0f2027;
            --secondary-color: #0f2027;
            --accent-color: #e74c3c;
            --light-gray: #f8f9fa;
            --medium-gray: #e9ecef;
            --dark-gray: #6c757d;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }
        
        .dashboard {
            margin: 0 auto;
            background-image:url('assets/img/bf.jpg');
              background-size:100% 100%;
              background-position:center;
              background-repeat:no-repeat;"
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            overflow: hidden;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        .top-bar {
            color: white;
            padding: 15px 25px;
            font-weight: 600;
            border-bottom: 1px solid #a3a3a3;
            margin-bottom: 20px;
        }
        
        .top-bar .time-display {
            font-size: 1.3rem;
            letter-spacing: 1px;
        }
        
        .top-bar .location {
            font-size: 1.2rem;
        }
        
        .left-panel, .right-panel-wrapper {
            padding: 25px 20px;
            height: 100%;
        }

        .panel-title {
            color: #fff;
            padding-bottom: 10px;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .alarm-btn {
            background-color: #0f2027;
            color: white;
            font-weight: 600;
            border: 1px solid #fff;
            border-radius: 8px;
            padding: 15px 20px;
            width: 100%;
            font-size: 1.1rem;
            transition: all 0.3s;
            margin-top: 33px;
        }
        
        .left-panel p { color: #fff !important; }
        .left-panel { text-align: center; }
        .img1 img { width: 69%; }
        .img2 img { width: 81%; background-color: #fff; margin-top: 19px; }

        @media(max-width:767px){
            .main-content, .right-panel { border-radius: 0px !important; }
            .row.flex-nowrap { flex-wrap: wrap !important; }
        }
        
        .chart-img img {
    width: 100%;
    height: 255px;
    object-fit: cover;
}
    </style>
    <style>
        .navbar-custom { background-color: #0f2027; color: white; padding: 10px 20px; border-radius: 10px 10px 0 0; }
        .card { border-radius: 15px; border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .checklist-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; }
        .map-placeholder { background: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/World_map_blank_without_borders.svg') no-repeat center; background-size: cover; height: 300px; border-radius: 15px; position: relative; }
        
        #google_translate_element { overflow: hidden !important; }
        .goog-logo-link { display:none !important; }
        .goog-te-gadget { color: transparent !important; height: 30px !important; }
        body > .skiptranslate { display: none; }
    </style>
        <!-------------------- end moulvi ------------------------------->

    @endif

<style>
    .layout-page{
          background-image:url('assets/img/mainbg.jpeg') !important;
          background-size:cover;
          background-position:center;
          background-repeat:no-repeat;"
    }
    
    
        /* Main wrapper like screenshot */
    .dash-wrap{
      max-width: 980px;
      margin: 18px auto;
      padding: 16px;
      background: #f2f4ef;
      border: 1px solid rgba(0,0,0,.04);
      border-radius: 22px;
      box-shadow: var(--shadow);
    }

    .section-title{
 font-weight: 700;
    font-size: 22px;
    color: #3c3d38;
    margin: 0 0 10px;
    }

    .card-soft{
      background: var(--card);
      border: 1px solid rgba(0,0,0,.05);
      border-radius: var(--radius);
      box-shadow: 0 10px 20px rgba(0,0,0,.06);
    }

    .chip{
    background: #eff2eb;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 19px;
    color: var(--muted);
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #369a9c;
    }

    /* KPI small cards */
    .kpi{
      padding: 14px;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    .kpi .label{
       font-size: 16px;
    margin-bottom: 6px;
    color: #33989a;
    }
    .kpi .value{
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
    }
 .kpi .mini {
position: absolute;
    right: 14px;
    top: 0px;
    width: 25%;
}
 .kpi .mini img {
     width:100%;
 }


    .spark{
      height: 26px;
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff, #eff2eb);
      border: 1px solid rgba(0,0,0,.05);
      box-shadow: var(--shadow-in);
      display: flex;
      align-items: flex-end;
      gap: 4px;
      padding: 6px 8px;
    }
    .spark span{
      display:block;
      width: 6px;
      border-radius: 6px 6px 2px 2px;
      background: rgba(118,160,109,.45);
    }
    .spark .o{ background: rgba(217,162,74,.55); }

    /* Donut progress */
    .donut{
      --p: 75; /* percent */
      width: 150px;
      height: 150px;
      border-radius: 50%;
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 0 auto;
      box-shadow: var(--shadow-in);
      border: 1px solid rgb(61 157 159);
    }
    .donut::before{
      content:"";
      width: 112px;
      height: 112px;
      border-radius: 50%;
      background: var(--card);
      box-shadow: 0 6px 14px rgba(0,0,0,.06);
      border: 1px solid rgb(56 154 156);
      position:absolute;
    }
    .donut-inner{
      position: relative;
      text-align:center;
      z-index: 1;
    }
    .donut-inner .pct{
      font-size: 34px;
      font-weight: 900;
      color: #2f9798;
      line-height: 1;
    }
    .donut-inner .sub{
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }

    .progress-meta{
      font-size: 17px;
      color: var(--muted);
      display:flex;
      justify-content: space-between;
      margin-top: 12px;
      gap: 10px;
    }

    /* Activity stats row */
    .pill{
      background: #f2f4ef;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 14px;
      padding: 10px 12px;
      box-shadow: var(--shadow-in);
      height: 100%;
    }
    .pill .top{
display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 19px;
    margin-bottom: 6px;
    color: #399b9d;
    }
    .pill .num{
      font-weight: 900;
      font-size: 18px;
      color: #2d2f2a;
    }

    /* Bar chart */
    .chart-card{
      padding: 14px;
    }
    .bars{
      height: 160px;
      display:flex;
      align-items:flex-end;
      gap: 10px;
      padding: 10px 6px 0;
      border-top: 1px dashed rgba(0,0,0,.10);
    }
    .bar{
      width: 18px;
      border-radius: 8px 8px 4px 4px;
      background: linear-gradient(180deg, rgba(118,160,109,.95), rgba(118,160,109,.35));
      border: 1px solid rgba(0,0,0,.07);
      position: relative;
    }
    .bar.o{
      background: linear-gradient(180deg, rgba(217,162,74,.95), rgba(217,162,74,.35));
    }
    .xlabels{
      display:flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--muted);
      padding: 6px 6px 0;
    }

    /* Bottom table + map */
    .bottom-card{
      padding: 14px;
    }
    .tab-head{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .search{
      flex: 1;
      max-width: 300px;
      background: #eff2eb;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      outline: none;
    }
    .mosque-row{
      display:flex;
      gap: 12px;
      align-items: center;
      padding: 10px 10px;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,.05);
      background: #f4f6f0;
      margin-bottom: 8px;
    }
    .badge-soft{
      font-size: 12px;
      background: rgba(118,160,109,.18);
      color: var(--green);
      border: 1px solid rgba(62,107,76,.20);
      padding: 5px 10px;
      border-radius: 999px;
      font-weight: 700;
      min-width: 96px;
      text-align: center;
    }
    .badge-soft.o{
      background: rgba(217,162,74,.18);
      color: #7a5210;
      border-color: rgba(217,162,74,.25);
    }
    .view{
      margin-left: auto;
      font-size: 12px;
      color: #4b4d47;
      text-decoration: none;
      font-weight: 700;
    }
    .view:hover{ text-decoration: underline; }

    .map-box{
      height: 280px;
      border-radius: 18px;
      background:
        radial-gradient(circle at 30% 25%, rgba(118,160,109,.22), transparent 45%),
        radial-gradient(circle at 70% 55%, rgba(217,162,74,.20), transparent 42%),
        linear-gradient(180deg, #f7f8f3, #e7eadf);
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: var(--shadow-in);
      position: relative;
      overflow: hidden;
    }
    .pin{
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 8px 18px rgba(0,0,0,.18);
      position: absolute;
    }
    .pin::after{
      content:"";
      position:absolute;
      left: 50%;
      top: 50%;
      width: 28px;
      height: 28px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: rgba(62,107,76,.18);
    }
    .pin.o{ background: var(--orange); }
    .pin.o::after{ background: rgba(217,162,74,.18); }

    /* small responsiveness */
    @media (max-width: 768px){
      .donut{ width: 130px; height: 130px; }
      .donut::before{ width: 98px; height: 98px; }
      .bars{ gap: 8px; }
      .bar{ width: 16px; }
    }
    
    
    
.icon {
width: 79px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 33px;
}
.stat-card {
  background-color: #f4f1eb;
  transition: 0.3s ease;
  margin-bottom: 26px;
}
.stat-card:hover {
  transform: translateY(-5px);
}
    
/*  .row.space {*/
/*    margin-bottom: 28px;*/
/*}  */
    
      .stats-wrapper {
      background: #f4f1eb;
      border-radius: 10px;
      margin: 24px 0px;
    }

    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24px;
      margin: 0 auto 10px;
    }

    .bg-green { background-color: #3d7f3d; }
    .bg-yellow { background-color: #d4a72c; }
    .bg-red { background-color: #c5523f; }

    .stat-number {
      font-size: 28px;
      font-weight: 600;
      color: #555;
    }

    .stat-label {
      font-size: 14px;
      color: #777;
    }  
    
</style>
@endpush
<!--/////////////////////// end style //////////////////////////////-->


{{-- ======================= CONTENT ======================= --}}
@section('content')

    @if($user->hasAnyRole(['awqaf admin', 'super admin']))
        <!-------------------- start awqaf admin content ----------------------------->
         <div class="container-xxl flex-grow-1 container-p-y">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                         <div class="page-title">Awqaf Admin <span>Dashboard</span></div>
                    </div>
                    <hr />
                </div>
    
                <div class="card-body">
                   <div class="wrap">
    
<div class="row space">

    <!-- Card 1 -->
    <div class="col-md-6 col-lg-6">
      <div class="card shadow-sm border-0 rounded-4 p-3 stat-card">
        <div class="d-flex align-items-center">
          <div class="icon bg-success text-white me-3">
            <i class="bi bi-building"></i>
          </div>
          <div>
            <small class="text-muted">Total Mosques</small>
            <h3 class="mb-0 fw-bold">124</h3>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="col-md-6 col-lg-6">
      <div class="card shadow-sm border-0 rounded-4 p-3 stat-card">
        <div class="d-flex align-items-center">
          <div class="icon bg-info text-white me-3">
            <i class="bi bi-people"></i>
          </div>
          <div>
            <small class="text-muted">Cleaners</small>
            <h3 class="mb-0 fw-bold">90</h3>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="col-md-6 col-lg-6">
      <div class="card shadow-sm border-0 rounded-4 p-3 stat-card">
        <div class="d-flex align-items-center">
          <div class="icon bg-warning text-white me-3">
            <i class="bi bi-list-task"></i>
          </div>
          <div>
            <small class="text-muted">Active Tasks</small>
            <h3 class="mb-0 fw-bold">312</h3>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="col-md-6 col-lg-6">
      <div class="card shadow-sm border-0 rounded-4 p-3 stat-card">
        <div class="d-flex align-items-center">
          <div class="icon bg-secondary text-white me-3">
            <i class="bi bi-check-circle"></i>
          </div>
          <div>
            <small class="text-muted">Completed Tasks</small>
            <h3 class="mb-0 fw-bold">148</h3>
          </div>
        </div>
      </div>
    </div>

  </div>
    
    
    
    
    
    
   <div class="row g-4">

    <!-- Urgent Alerts Card -->
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm rounded-4 p-4 alert-card">
        <div class="d-flex justify-content-between align-items-center">

          <div class="d-flex align-items-center">
            <div class="icon bg-danger text-white me-3">
              <i class="bi bi-bell-fill"></i>
            </div>
            <div>
              <h5 class="mb-1 fw-semibold">Urgent Alerts</h5>
              <h2 class="mb-0 fw-bold">9</h2>
            </div>
          </div>

          <div class="text-danger fs-4">
            <i class="bi bi-alarm"></i>
          </div>

        </div>

        <!-- Progress Style Line -->
        <div class="mt-3">
          <div class="progress rounded-pill" style="height:6px;">
            <div class="progress-bar bg-success" style="width:20%"></div>
            <div class="progress-bar bg-warning" style="width:30%"></div>
            <div class="progress-bar bg-secondary" style="width:50%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Satisfaction Card -->
    <div class="col-lg-4">
      <div class="card border-0 shadow-sm rounded-4 p-4 text-center alert-card">
        <div class="icon bg-success text-white mx-auto mb-2">
          <i class="bi bi-emoji-smile-fill"></i>
        </div>
        <h3 class="fw-bold mb-0">94%</h3>
        <small class="text-muted">More Satisfaction</small>
      </div>
    </div>

  </div> 
    
    
    
   <div class="stats-wrapper p-4">
    <div class="row text-center">

      <div class="col-md-4 mb-4 mb-md-0">
        <div class="stat-icon bg-green">
          <i class="bi bi-people-fill"></i>
        </div>
        <div class="stat-number">104</div>
        <div class="stat-label">Schedule</div>
      </div>

      <div class="col-md-4 mb-4 mb-md-0">
        <div class="stat-icon bg-yellow">
          <i class="bi bi-people-fill"></i>
        </div>
        <div class="stat-number">18</div>
        <div class="stat-label">Delayed</div>
      </div>

      <div class="col-md-4">
        <div class="stat-icon bg-red">
          <i class="bi bi-people-fill"></i>
        </div>
        <div class="stat-number">2</div>
        <div class="stat-label">Urgent</div>
      </div>

    </div>
  </div>  
    
    

                      <div class="row g-4 align-items-start">
                        <!-- LEFT DASHBOARD -->
                        <div class="col-lg-6">
                          <div class="dash">
                            <!-- top nav/tabs -->
                            <div class="dash-topbar">
                              <div class="dash-tabs">
                                <div class="tabpill active">
                                  <i class="bi bi-clipboard-check"></i> Self audits
                                </div>
                                <div class="tabpill"><i class="bi bi-bar-chart"></i> Work</div>
                                <div class="tabpill">
                                  <i class="bi bi-chat-dots"></i> Messages
                                </div>
                                <div class="tabpill">
                                  <i class="bi bi-shield-check"></i> Verification
                                </div>
                                <div class="tabpill">
                                  <i class="bi bi-exclamation-triangle"></i> Accusation
                                </div>
                                <div class="tabpill">
                                  <i class="bi bi-award"></i> Certificates
                                </div>
                                <div class="tabpill"><i class="bi bi-caret-down-fill"></i></div>
                              </div>
                
                              <!-- metrics -->
                              <div class="dash-metrics mt-2">
                                <div class="metric">
                                  <b>72</b>
                                  <span>Mosque</span>
                                </div>
                                <div class="metric">
                                  <b>72</b>
                                  <span>KPI Scores</span>
                                </div>
                                <div class="metric">
                                  <b>5</b>
                                  <span>Awqaf Tasks</span>
                                </div>
                                <div class="metric">
                                  <b class="text-danger">17</b>
                                  <span>Open Alerts</span>
                                </div>
                              </div>
                            </div>
                
                            <!-- main table panel -->
                            <div class="dash-body">
                              <div class="panel">
                                <div class="panel-head">
                                  <div class="h">Mosque Overview</div>
                                  <div class="controls">
                                    <select
                                      class="form-select form-select-sm mini-select"
                                      style="min-width: 220px"
                                    >
                                      <option>Search: mosque name or area…</option>
                                      <option>Karama Central Mosque</option>
                                      <option>Doha Main Mosque</option>
                                      <option>West Bay Mosque</option>
                                    </select>
                                    <select
                                      class="form-select form-select-sm mini-select"
                                      style="width: auto"
                                    >
                                      <option>FILTER</option>
                                      <option>Today</option>
                                      <option>This week</option>
                                      <option>This month</option>
                                    </select>
                                  </div>
                                </div>
                
                                <div class="table-responsive">
                                  <table class="table table-hover align-middle mb-0">
                                    <thead>
                                      <tr>
                                        <th style="width: 48px">#</th>
                                        <th>Mosque</th>
                                        <th>Last Visit</th>
                                        <th>Open Task</th>
                                        <th>Open Minutes</th>
                                        <th>Status</th>
                                        <th style="width: 160px">Actions</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      <tr>
                                        <td class="text-muted fw-bold">1</td>
                                        <td>
                                          <div class="row-name">
                                            <div class="avatar">K</div>
                                            <div>
                                              <div class="title">Konanme</div>
                                              <small>Karama area</small>
                                            </div>
                                          </div>
                                        </td>
                                        <td>
                                          <span class="badge-soft b-ok"
                                            ><i class="bi bi-check2"></i> +0.35</span
                                          >
                                        </td>
                                        <td>34.1900</td>
                                        <td>03,030</td>
                                        <td>
                                          <span class="badge-soft b-ok"
                                            ><i class="bi bi-check-circle"></i> Verified</span
                                          >
                                        </td>
                                        <td class="d-flex gap-2">
                                          <button class="btn btn-success btn-mini">
                                            Tracker
                                          </button>
                                          <button class="btn btn-outline-secondary btn-mini">
                                            Scores
                                          </button>
                                        </td>
                                      </tr>
                
                                      <tr>
                                        <td class="text-muted fw-bold">2</td>
                                        <td>
                                          <div class="row-name">
                                            <div
                                              class="avatar"
                                              style="
                                                background: rgba(34, 197, 94, 0.12);
                                                border-color: rgba(34, 197, 94, 0.22);
                                                color: #0f6a2c;
                                              "
                                            >
                                              D
                                            </div>
                                            <div>
                                              <div class="title">Deria Ool</div>
                                              <small>Doha zone</small>
                                            </div>
                                          </div>
                                        </td>
                                        <td>
                                          <span class="badge-soft b-ok"
                                            ><i class="bi bi-check2"></i> +0.38</span
                                          >
                                        </td>
                                        <td>36.0068</td>
                                        <td>05,000</td>
                                        <td>
                                          <span class="badge-soft b-w"
                                            ><i class="bi bi-exclamation-circle"></i>
                                            Pending</span
                                          >
                                        </td>
                                        <td class="d-flex gap-2">
                                          <button class="btn btn-success btn-mini">
                                            Tracker
                                          </button>
                                          <button class="btn btn-outline-secondary btn-mini">
                                            Scores
                                          </button>
                                        </td>
                                      </tr>
                
                                      <tr>
                                        <td class="text-muted fw-bold">3</td>
                                        <td>
                                          <div class="row-name">
                                            <div
                                              class="avatar"
                                              style="
                                                background: rgba(245, 158, 11, 0.14);
                                                border-color: rgba(245, 158, 11, 0.26);
                                                color: #8a5a00;
                                              "
                                            >
                                              W
                                            </div>
                                            <div>
                                              <div class="title">Wodit</div>
                                              <small>West bay</small>
                                            </div>
                                          </div>
                                        </td>
                                        <td>
                                          <span class="badge-soft b-ok"
                                            ><i class="bi bi-check2"></i> +0.35</span
                                          >
                                        </td>
                                        <td>34.0000</td>
                                        <td>90,038</td>
                                        <td>
                                          <span class="badge-soft b-ok"
                                            ><i class="bi bi-check-circle"></i> Verified</span
                                          >
                                        </td>
                                        <td class="d-flex gap-2">
                                          <button class="btn btn-success btn-mini">
                                            Tracker
                                          </button>
                                          <button class="btn btn-outline-secondary btn-mini">
                                            Scores
                                          </button>
                                        </td>
                                      </tr>
                
                                      <tr>
                                        <td class="text-muted fw-bold">4</td>
                                        <td>
                                          <div class="row-name">
                                            <div
                                              class="avatar"
                                              style="
                                                background: rgba(99, 102, 241, 0.12);
                                                border-color: rgba(99, 102, 241, 0.22);
                                                color: #3730a3;
                                              "
                                            >
                                              S
                                            </div>
                                            <div>
                                              <div class="title">Stabile Herid</div>
                                              <small>South area</small>
                                            </div>
                                          </div>
                                        </td>
                                        <td>
                                          <span class="badge-soft b-ok"
                                            ><i class="bi bi-check2"></i> +0.35</span
                                          >
                                        </td>
                                        <td>54.0020</td>
                                        <td>09,338</td>
                                        <td>
                                          <span class="badge-soft b-w"
                                            ><i class="bi bi-exclamation-circle"></i>
                                            Review</span
                                          >
                                        </td>
                                        <td class="d-flex gap-2">
                                          <button class="btn btn-success btn-mini">
                                            Tracker
                                          </button>
                                          <button class="btn btn-outline-secondary btn-mini">
                                            Scores
                                          </button>
                                        </td>
                                      </tr>
                
                                      <tr>
                                        <td class="text-muted fw-bold">5</td>
                                        <td>
                                          <div class="row-name">
                                            <div
                                              class="avatar"
                                              style="
                                                background: rgba(34, 197, 94, 0.12);
                                                border-color: rgba(34, 197, 94, 0.22);
                                                color: #0f6a2c;
                                              "
                                            >
                                              S
                                            </div>
                                            <div>
                                              <div class="title">Stibble Rerid</div>
                                              <small>North zone</small>
                                            </div>
                                          </div>
                                        </td>
                                        <td>
                                          <span class="badge-soft b-ok"
                                            ><i class="bi bi-check2"></i> +0.35</span
                                          >
                                        </td>
                                        <td>55.0000</td>
                                        <td>03,036</td>
                                        <td>
                                          <span class="badge-soft b-b"
                                            ><i class="bi bi-x-circle"></i> Alert</span
                                          >
                                        </td>
                                        <td class="d-flex gap-2">
                                          <button class="btn btn-success btn-mini">
                                            Tracker
                                          </button>
                                          <button class="btn btn-outline-secondary btn-mini">
                                            Scores
                                          </button>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                
                        <!-- RIGHT PHONES -->
                        <div class="col-lg-6">
                          <div class="phone-grid">
                            <!-- PHONE 1 -->
                            <div class="phone">
                              <div class="phone-inner">
                                <div class="wa-top">
                                  <div class="wa-left">
                                    <i class="bi bi-arrow-left"></i>
                                    <div class="wa-avatar">MC</div>
                                    <div class="min-w-0">
                                      <div class="wa-name">Mosque Cleaner</div>
                                      <div class="wa-sub">Awqaf verification group</div>
                                    </div>
                                  </div>
                                  <div class="wa-actions">
                                    <i class="bi bi-telephone"></i>
                                    <i class="bi bi-three-dots-vertical"></i>
                                  </div>
                                </div>
                
                                <div class="wa-body">
                                  <div class="msg-card">
                                    <div class="msg-head">
                                      <div class="left">
                                        <div class="tag">
                                          <i class="bi bi-check2-circle"></i> Verified • Photo
                                          update
                                        </div>
                                        <div class="msg-title">Karama Central Mosque</div>
                                        <div class="msg-text">
                                          Work: HOSL • Set 1 • KPI check<br />
                                          <span class="text-primary fw-bold">Results:</span>
                                          some short notes here
                                        </div>
                                      </div>
                                      <i class="bi bi-x-lg text-muted"></i>
                                    </div>
                
                                    <div class="msg-img">
                                      <div class="img-badge">01:30</div>
                                    </div>
                
                                    <div class="msg-foot">
                                      <div class="note">
                                        Recent: link detected near north area.
                                      </div>
                                      <i class="bi bi-check2-all text-success"></i>
                                    </div>
                                  </div>
                
                                  <button class="btn action-green">
                                    <i class="bi bi-whatsapp me-2"></i> Send confirmation to
                                    cleaner
                                  </button>
                                </div>
                
                                <div class="wa-inputbar">
                                  <div class="circle"><i class="bi bi-emoji-smile"></i></div>
                                  <input type="text" value="Type a message…" />
                                  <button class="plus-btn" type="button">
                                    <i class="bi bi-plus"></i>
                                  </button>
                                </div>
                              </div>
                            </div>
                
                            <!-- PHONE 2 -->
                            <div class="phone">
                              <div class="phone-inner">
                                <div class="wa-top">
                                  <div class="wa-left">
                                    <i class="bi bi-arrow-left"></i>
                                    <div class="wa-avatar">MC</div>
                                    <div class="min-w-0">
                                      <div class="wa-name">Mosque Cleaner</div>
                                      <div class="wa-sub">Reports & alerts</div>
                                    </div>
                                  </div>
                                  <div class="wa-actions">
                                    <i class="bi bi-telephone"></i>
                                    <i class="bi bi-three-dots-vertical"></i>
                                  </div>
                                </div>
                
                                <div class="wa-body">
                                  <div class="msg-card">
                                    <div class="msg-head">
                                      <div class="left">
                                        <div class="tag">
                                          <i class="bi bi-info-circle"></i> Update • Request
                                        </div>
                                        <div class="msg-title">Karama Central Mosque</div>
                                        <div class="msg-text">
                                          Please confirm: washroom cleaning for Noor<br />
                                          KPI: 123,102 • Due: once/after events
                                        </div>
                                      </div>
                                      <i class="bi bi-x-lg text-muted"></i>
                                    </div>
                
                                    <div class="msg-foot">
                                      <div class="note">Tap to open checklist</div>
                                      <i class="bi bi-clock text-warning"></i>
                                    </div>
                                  </div>
                
                                  <button class="btn action-green">
                                    <i class="bi bi-send-check me-2"></i> Send task confirmation
                                  </button>
                
                                  <div
                                    class="msg-card"
                                    style="border-left: 6px solid rgba(239, 68, 68, 0.75)"
                                  >
                                    <div class="msg-head">
                                      <div class="left">
                                        <div
                                          class="tag"
                                          style="
                                            color: #9b1c1c;
                                            background: rgba(239, 68, 68, 0.1);
                                            border-color: rgba(239, 68, 68, 0.22);
                                          "
                                        >
                                          <i class="bi bi-exclamation-triangle"></i> Alert
                                        </div>
                                        <div class="msg-title">Service delay</div>
                                        <div class="msg-text">
                                          Please check location and resolve immediately.
                                        </div>
                                      </div>
                                      <i class="bi bi-x-lg text-muted"></i>
                                    </div>
                
                                    <div class="msg-foot">
                                      <div class="note">Escalate if not resolved</div>
                                      <i class="bi bi-exclamation-circle text-danger"></i>
                                    </div>
                                  </div>
                
                                  <button class="btn action-red">
                                    <i class="bi bi-megaphone me-2"></i> Raise incident to Awqaf
                                  </button>
                                </div>
                
                                <div class="wa-inputbar">
                                  <div class="circle"><i class="bi bi-emoji-smile"></i></div>
                                  <input type="text" value="Type a message…" />
                                  <button class="plus-btn" type="button">
                                    <i class="bi bi-plus"></i>
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>          
                </div>
            </div>
        </div>
        <!-------------------- end awqaf admin content ------------------------------->

    @elseif($user->hasRole('moulvi'))
        <!-------------------- start moulvi content ----------------------------->
        
        
          <div class="dash-wrap">
    <!-- TOP: KPI Overview -->
    <div class="d-flex align-items-center justify-content-between mb-2">
      <div class="section-title">KPI Overview</div>
      <span class="chip">📅 Last 30 days</span>
    </div>

    <div class="row g-3">
      <!-- left KPIs -->
      <div class="col-lg-8">
        <div class="row g-3">
          <div class="col-md-6">
            <div class="card-soft kpi">
              <div class="mini"><img src="assets/img/ic1.png"></div>
              <div class="label">Total Numper</div>
              <div class="value">112</div>

              <div class="spark">
                <span style="height:45%"></span>
                <span style="height:70%"></span>
                <span class="o" style="height:55%"></span>
                <span style="height:85%"></span>
                <span style="height:60%"></span>
                <span class="o" style="height:75%"></span>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card-soft kpi">
              <div class="mini"><img src="assets/img/ic2.png"></div>
              <div class="label">Joined Registrations</div>
              <div class="value">347 <small class="text-muted fw-semibold">/ 460</small></div>

              <div class="spark">
                <span style="height:55%"></span>
                <span class="o" style="height:65%"></span>
                <span style="height:80%"></span>
                <span style="height:72%"></span>
                <span class="o" style="height:58%"></span>
                <span style="height:88%"></span>
              </div>
            </div>
          </div>


          <div class="col-md-6">
            <div class="card-soft kpi">
              <div class="mini"><img src="assets/img/ic3.png"></div>
              <div class="label">Activities Pending</div>
              <div class="value">113</div>

              <div class="spark">
                <span style="height:35%"></span>
                <span style="height:60%"></span>
                <span style="height:52%"></span>
                <span class="o" style="height:70%"></span>
                <span style="height:48%"></span>
                <span style="height:65%"></span>
              </div>
            </div>
          </div>
          

          <div class="col-md-6">
            <div class="card-soft kpi">
              <div class="mini"><img src="assets/img/ic4.png"></div>
              <div class="label">Cleaners in the Field</div>
              <div class="value">52</div>

              <div class="spark">
                <span style="height:35%"></span>
                <span style="height:60%"></span>
                <span style="height:52%"></span>
                <span class="o" style="height:70%"></span>
                <span style="height:48%"></span>
                <span style="height:65%"></span>
              </div>
            </div>
          </div>
          
          
          </div>
          </div>
          
              <!-- right donut -->
      <div class="col-lg-4">
        <div class="card-soft p-3 h-100 d-flex flex-column">
          <div class="d-flex align-items-center justify-content-between mb-2">
            <div class="section-title mb-0">Progress</div>
            <span class="chip"><i class="fa fa-check-circle"></i></span>
          </div>

          <div class="position-relative mt-2">
            <div class="donut" style="--p:75;">
              <div class="donut-inner">
                <div class="pct">75%</div>
                <div class="sub">Complete</div>
              </div>
            </div>
          </div>

          <div class="progress-meta mt-3">
            <div>
              <div class="fw-bold text-dark">20%</div>
              <div>Complete</div>
            </div>
            <div class="text-end">
              <div class="fw-bold text-dark">450</div>
              <div>Pending</div>
            </div>
          </div>


        </div>
      </div>
          
          
          
          
          

          <!-- Activity Stats -->
          <div class="col-12">
            <div class="card-soft p-3">
              <div class="d-flex align-items-center justify-content-between mb-2">
                <div class="section-title mb-0">Activity Stats</div>
                <span class="chip">⏱ Updated now</span>
              </div>

              <div class="row g-2">
                <div class="col-6 col-md-3">
                  <div class="pill">
                    <div class="top"><span>Daily</span><span>📍</span></div>
                    <div class="num">247</div>
                  </div>
                </div>
                <div class="col-6 col-md-3">
                  <div class="pill">
                    <div class="top"><span>Monthly</span><span>📅</span></div>
                    <div class="num">1,756</div>
                  </div>
                </div>
                <div class="col-6 col-md-3">
                  <div class="pill">
                    <div class="top"><span>Quarterly</span><span>📊</span></div>
                    <div class="num">5,285</div>
                  </div>
                </div>
                <div class="col-6 col-md-3">
                  <div class="pill">
                    <div class="top"><span>Yearly</span><span>🗓️</span></div>
                    <div class="num">20,370</div>
                  </div>
                </div>

                <div class="col-12">
                  <div class="pill d-flex align-items-center justify-content-between">
                    <div class="top mb-0"><span>Yearly (extra)</span></div>
                    <div class="num">610</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Completion Overview -->
          <div class="col-6">
            <div class="card-soft chart-card">
              <div class="d-flex align-items-center justify-content-between mb-2">
                <div class="section-title mb-0">Completion Overview <span class="text-muted fw-semibold">- Past Month</span></div>
                <span class="chip">📈</span>
              </div>

              <div class="bars">
                <!-- 14 bars (green/orange mix) -->
                <div class="bar"   style="height:75%"></div>
                <div class="bar o" style="height:58%"></div>
                <div class="bar"   style="height:82%"></div>
                <div class="bar o" style="height:65%"></div>
                <div class="bar"   style="height:90%"></div>
                <div class="bar"   style="height:72%"></div>
                <div class="bar o" style="height:48%"></div>
                <div class="bar"   style="height:86%"></div>
                <div class="bar"   style="height:78%"></div>
                <div class="bar o" style="height:60%"></div>
                <div class="bar"   style="height:88%"></div>
                <div class="bar"   style="height:70%"></div>
                <div class="bar o" style="height:52%"></div>
                <div class="bar"   style="height:80%"></div>
              </div>

              <div class="xlabels">
                <span>1</span><span>5</span><span>10</span><span>15</span><span>20</span><span>25</span><span>30</span>
              </div>
            </div>
          </div>
          
          
                    <div class="col-6">
            <div class="chart-img">
      <img src="{{asset('assets/img/qatarimg.jpg')}}">
            </div>
          </div>
        
      

  

      <!-- BOTTOM: Mosques list + Map -->
      <div class="col-12">
        <div class="card-soft bottom-card">
          <div class="tab-head">
            <div class="section-title mb-0">Mosques</div>

            <div class="d-flex gap-2 align-items-center flex-wrap">
              <span class="chip">All</span>
              <span class="chip">Completed</span>
              <span class="chip">Pending</span>
              <span class="chip">Declined</span>
              <span class="chip">Drafting</span>
              <span class="chip">Contacted</span>
            </div>

            <input class="search" placeholder="Search..." />
          </div>

          <div class="row g-3">
            <div class="col-lg-7">
              <div class="mosque-row">
                <div>
                  <div class="fw-bold">Al Noor Mosque</div>
                  <div class="small text-muted">Makkah • N/A</div>
                </div>
                <div class="badge-soft">Completed</div>
                <a class="view" href="#">View Details</a>
              </div>

              <div class="mosque-row">
                <div>
                  <div class="fw-bold">Al Waha Mosque</div>
                  <div class="small text-muted">Madinah • N/A</div>
                </div>
                <div class="badge-soft">Completed</div>
                <a class="view" href="#">View Details</a>
              </div>

              <div class="mosque-row">
                <div>
                  <div class="fw-bold">Al Sa'd Mosque</div>
                  <div class="small text-muted">Jeddah • N/A</div>
                </div>
                <div class="badge-soft o">Pending</div>
                <a class="view" href="#">View Details</a>
              </div>

              <div class="mosque-row">
                <div>
                  <div class="fw-bold">Al Badr Mosque</div>
                  <div class="small text-muted">Taif • N/A</div>
                </div>
                <div class="badge-soft o">Pending</div>
                <a class="view" href="#">View Details</a>
              </div>

              <div class="mosque-row mb-0">
                <div>
                  <div class="fw-bold">Faisal Mosque</div>
                  <div class="small text-muted">Islamabad • N/A</div>
                </div>
                <div class="badge-soft">Completed</div>
                <a class="view" href="#">View Details</a>
              </div>
            </div>

            <div class="col-lg-5">
              <div class="map-box">
                <div class="pin" style="left: 20%; top: 25%;"></div>
                <div class="pin o" style="left: 60%; top: 40%;"></div>
                <div class="pin" style="left: 72%; top: 65%;"></div>
                <div class="pin o" style="left: 35%; top: 70%;"></div>

                <div class="position-absolute bottom-0 start-0 p-3">
                  <span class="chip">🗺️ Map preview</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
        
        
        
        <!-------------------- end moulvi content ------------------------------->

    @elseif($user->hasRole('cleaner'))
        <!-------------------- start cleaner content ----------------------------->
        
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                     <h5 class="mb-0">Cleaner Dashboard</h5>
                </div>
                <hr />
            </div>

            <div class="card-body">
               <div class="container-fluid rounded-4 shadow-lg dashboard">
                        <div class="top-bar row align-items-center g-0">
                            <div class="col-md-3">
                                <div class="time-display">
                                    <i class="fas fa-shopping-cart me-2"></i>
                                    <span id="current-time">tour</span>
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="location">
                                    <i class="fas fa-map-marker-alt me-2"></i>
                                    Karama Central Mosque
                                </div>
                            </div>
                        </div>
                        
                        <div class="row g-0"> <div class="col-md-3">
                                <div class="left-panel">
                                    <h4 class="panel-title">RFID LOGIN</h4>
                                    <p class="text-muted">Duyến mượn từ đường dẫn</p>
                                    <div class="img1"><img src="{{asset('assets/img/laptop.png')}}"></div>
                                    <div class="img2"><img src="{{asset('assets/img/qrcode.png')}}"></div>
                                    <button class="alarm-btn">
                                        <i class="fas fa-user me-2"></i>Raise Alarm
                                    </button>
                                </div>
                            </div>
                            
                            <div class="col-md-6 px-2"> <div class="main-content" style="position: relative; display: flex; flex-wrap: wrap; overflow: hidden; background-color: #ffffffb0; border-radius: 19px; padding: 30px 25px; min-height: 450px;">
                                    
                                    <div style="flex: 0 0 70%; max-width: 70%; position: relative; z-index: 2;">
                                        <h3 class="tasks-title" style="color: #0f2027; font-weight: 700; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 2px solid #e9ecef;">Today's Tasks</h3>
                                        <p class="text-muted mb-4">Forkliftroom fogar Cleatsisters</p>
                                        
                                        <div style="padding-right: 15px;">
                                            <div class="task-item" style="background-color: #f8f9fa; border-radius: 8px; padding: 18px 20px; margin-bottom: 15px; border-left: 5px solid #6c757d;">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div><i class="fas fa-restroom me-2"></i><strong>Washroom Cleaning</strong></div>
                                                    <span class="task-status status-not-started" style="background-color: white; color: #0f2027; padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;">
                                                        <i class="fas fa-broom me-2" style="color: rgba(0, 0, 0, 0.1);"></i>NOT STARTED
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="task-item" style="background-color: #f8f9fa; border-radius: 8px; padding: 18px 20px; margin-bottom: 15px; border-left: 5px solid #6c757d;">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div><i class="fas fa-couch me-2"></i><strong>Carpet Vacuuming</strong></div>
                                                    <span class="task-status status-not-started" style="background-color: white; color: #0f2027; padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;">
                                                        <i class="fas fa-check me-2" style="color: #25D366;"></i>NOT STARTED
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="task-item" style="background-color: #f8f9fa; border-radius: 8px; padding: 18px 20px; margin-bottom: 15px; border-left: 5px solid #6c757d;">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div><i class="fas fa-door-open me-2"></i><strong>Door & Handle Cleaning</strong></div>
                                                    <span class="task-status status-not-started" style="background-color: white; color: #0f2027; padding: 5px 12px; border-radius: 20px; font-size: 0.84rem; font-weight: 600;">
                                                        <i class="fas fa-check me-2" style="color: #25D366;"></i>NOT STARTED
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="task-item" style="background-color: #f8f9fa; border-radius: 8px; padding: 18px 20px; margin-bottom: 15px; border-left: 5px solid #6c757d;">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div><i class="fas fa-trash-alt me-2"></i><strong>Trash Disposal</strong></div>
                                                    <span class="task-status status-not-started" style="background-color: white; color: #0f2027; padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;">
                                                        <i class="fas fa-check me-2" style="color: #25D366;"></i>NOT STARTED
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
            
                                    <div style="flex: 0 0 30%; max-width: 30%; position: relative;">
                                        <img src="{{asset('assets/img/cleaner.png')}}" style="position: absolute; right: -70px; width: 190%; height: 130%; max-width: none; z-index: 1;" alt="Cleaner">
                                    </div>
            
                                    <div style="flex: 0 0 100%; display: flex; align-items: flex-end; margin-top: auto; position: relative; z-index: 3; padding-top: 20px;">
                                        <div style="flex: 0 0 75%;">
                                            <button class="start-shift-btn" style="background: linear-gradient(to bottom, #42879e, #204a5c, #0f2027); color: white; font-weight: 700; font-size: 1.2rem; padding: 18px 30px; border-radius: 10px; border: none; width: 100%; letter-spacing: 0.5px;">
                                                START SHIFT
                                            </button>
                                        </div>
                                        <div style="flex: 0 0 25%; padding-left: 10px;">
                                            <div class="status-panel d-flex justify-content-around align-items-center" style="background: linear-gradient(to bottom, #42879e, #204a5c, #0f2027); color: white; padding: 23px 23px; border-radius: 10px;">
                                                <i class="fas fa-window-maximize" style="color: #99d1e4; font-size: 1.2rem;"></i>
                                                <i class="fas fa-volume-mute" style="color: #99d1e4; font-size: 1.2rem;"></i>
                                                <i class="fas fa-expand" style="color: #99d1e4; font-size: 1.2rem;"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="right-panel" style="background: #f0f2f5; border-radius: 25px; padding: 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); height: 97%; display: flex; flex-direction: column; justify-content: space-between; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-right: 15px;">
                                    <div>
                                        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 25px;">
                                            <div style="max-width: 65%;">
                                                <h5 class="alternative" style="font-weight: 800; color: #1a202c; margin: 0 0 5px 0; font-size: 1.2rem;">Alternative Login</h5>
                                                
                                                <p style="font-size: 0.78rem; color: #718096; line-height: 1.4; margin: 0;">Scan QR code or send login link to WhatsApp</p>
                                            </div>
                                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=Login" 
                                                 style="width: 65px; height: 65px; border: 4px solid white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);" alt="QR">
                                        </div>
            
                                        <button type="button" style="background-color: #25D366; color: white; border-radius: 12px; padding: 12px; font-weight: 600; border: none; font-size: 0.85rem; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; cursor: pointer;">
                                            <i class="fab fa-whatsapp" style="font-size: 1.3rem; margin-right: 8px;"></i> 
                                            Send Login Link to WhatsApp
                                        </button>
            
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px; padding: 0 4px; font-size: 0.75rem; font-weight: 600; color: #a0aec0;">
                                            <span>Login to Begin</span>
                                            <span style="color: #4a5568;">930 122 4567</span>
                                        </div>
            
                                        <div style="background: white; border-radius: 12px; padding: 14px; border: 1px solid #e2e8f0; margin-bottom: 25px;">
                                            <input type="text" placeholder="Email or Phone" 
                                                   style="border: none; width: 100%; outline: none; font-size: 0.95rem; color: #333; font-weight: 500; background: transparent;">
                                        </div>
            
                                        <button type="button" style="background-color: #25D366; color: white; border-radius: 12px; padding: 15px; font-weight: 800; border: none; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.9rem; width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.05); cursor: pointer;">
                                            Scan Login
                                        </button>
                                    </div>
            
                                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e2e8f0; margin-top: 30px; padding-top: 15px;">
                                        <div style="text-align: center; color: #a0aec0; font-size: 0.7rem; cursor: pointer;"><i class="fas fa-book" style="font-size: 1.2rem; display: block; margin-bottom: 4px;"></i> Status</div>
                                        <div style="text-align: center; color: #a0aec0; font-size: 0.7rem; cursor: pointer;"><i class="fas fa-users" style="font-size: 1.2rem; display: block; margin-bottom: 4px;"></i> Staff</div>
                                        <div style="text-align: center; color: #a0aec0; font-size: 0.7rem; cursor: pointer;"><i class="fas fa-gem" style="font-size: 1.2rem; display: block; margin-bottom: 4px;"></i> Gems</div>
                                        <div style="text-align: center; color: #25D366; font-size: 0.7rem; cursor: pointer;"><i class="fas fa-comment-dots" style="font-size: 1.2rem; display: block; margin-bottom: 4px;"></i> Messages</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
        <!-------------------- end cleaner content ------------------------------->

    @else
        <div class="alert alert-danger">
            Role not allowed.
            <br>
            Your roles: <b>{{ $user->getRoleNames()->implode(', ') }}</b>
        </div>
    @endif

@endsection
{{-- ======================= END CONTENT ======================= --}}


{{-- ======================= SCRIPT ======================= --}}
@push('script')
<script>
    (function () {
        const roles = @json($user->getRoleNames());

        if (roles.includes('awqaf admin') || roles.includes('super admin')) {
            // awqaf admin js here
        } 
        else if (roles.includes('moulvi')) {
            // moulvi js here
        } 
        else if (roles.includes('cleaner')) {
            // cleaner js here
        }
    })();
</script>
@endpush
{{-- ======================= END SCRIPT ======================= --}}