@extends('layouts/contentNavbarLayout')
@section('title', 'Zillion')

@section('content')
@if(session('success'))
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif
<div class="content-wrapper">
 <!-- Content -->      
<div class="container-xxl flex-grow-1 container-p-y">                 
<div class="row">
  <!-- User Sidebar -->
  <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
    <!-- User Card -->
    <div class="card mb-6">
      <div class="card-body pt-12">
        <div class="user-avatar-section">
          <div class=" d-flex align-items-center flex-column">
           {{--  <img class="img-fluid rounded mb-4" src="../../assets/img/avatars/10.png" height="120" width="120" alt="User avatar"> --}}
           @if($user->profile_image) 
           <!-- Show User Profile Image -->
           <img class="rounded-circle" src="{{ asset('storage/' . $user->profile_image) }}" alt="{{ $user->name }}">
       @else 
           <!-- Generate Labeled Avatar using Initials -->
           <img class="rounded-circle" src="{{ asset('assets/img/avatars/2.png') }}" alt="Avatar">
       @endif
            <div class="user-info text-center mt-4">
              <h5>{{ $user->name }}</h5>
              <span class="badge bg-label-warning rounded-pill">{{ $user->userModel->user_type }}</span>
            </div>
          </div>
        </div>
        <div class="d-flex justify-content-around flex-wrap my-6 gap-0 gap-md-3 gap-lg-4">
          <div class="d-flex align-items-center me-5 gap-4">
            <div class="avatar">
              <div class="avatar-initial bg-label-primary rounded">
                <i class="mdi mdi-format-list-bulleted ri-24px"></i>
              </div>
            </div>
           {{--  <div>
              <h5 class="mb-0">1.23k</h5>
              <span>Task Done</span>
            </div> --}}
            <div class="task-list">

                  <div class="activity-section">
                    <h5 class="mb-0">{{ $tasks->count() }}</h5>
                      <span>Task(s) Done</span>
                  </div>
          </div>
          </div>
          <div class="d-flex align-items-center gap-4">
            <div class="avatar">
              <div class="avatar-initial bg-label-primary rounded">
                <i class="mdi mdi-checkbox-marked-circle-auto-outline ri-24px"></i>
              </div>
            </div>
            <div>
              <h5 class="mb-0">{{ $activityprojects->count() }}</h5>
              <span>Project(s) Done</span>
            </div>
          </div>
        </div>
        <h5 class="pb-4 border-bottom mb-3 mt-4">Details</h5>
        <div class="info-container">
          <ul class="list-unstyled mb-6">
            <li class="mb-2">
              <span class="h6">Username:</span>
              <span>{{ $user->email }}</span>
            </li>
            <li class="mb-2">
              <span class="h6">Email:</span>
              <span>{{ $user->email }}</span>
            </li>
            <li class="mb-2">
              <span class="h6">Role:</span>
              <span>{{ $user->userModel->user_type }}</span>
            </li>
        
            <li class="mb-2">
              <span class="h6">Contact:</span>
              <span>{{ $user->phone }}</span>
            </li>
            <li class="mb-2">
              <span class="h6">Location</span>
              <span>{{ $user->location }}</span>
            </li>
            <li class="mb-2">
              <span class="h6">Created At:</span>
              <span>{{ $user->created_at }}</span>
            </li>
            <li class="mb-2">
              <span class="h6">Status:</span>
              <span class="badge bg-label-success rounded-pill">Active</span>
            </li>
          </ul>
          {{-- <div class="d-flex justify-content-center">
            <a href="javascript:;" class="btn btn-primary me-4 waves-effect waves-light" data-bs-target="#editUser" data-bs-toggle="modal">Edit</a>
            <a href="javascript:;" class="btn btn-outline-danger suspend-user waves-effect">Suspend</a>
          </div> --}}
        </div>
      </div>
    </div>
    <!-- /User Card -->
  </div>
  <!--/ User Sidebar -->
  <!-- User Content -->
  <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
    <!-- Project table -->
    <div class="card mb-6">
      <div class="card-datatable table-responsive mb-n8">
        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer"><div class="card-header d-flex flex-wrap row-gap-5">
          <div class="project-head-label">
            <h5 class="card-title mb-0">Project List</h5></div>
            <div class=" text-end pt-0 my-n5"><div id="DataTables_Table_0_filter" class="dataTables_filter"></div>
          </div></div>
          <table class="table datatable-project table-border-bottom-0 dataTable no-footer dtr-column">
                  <thead>
                  <tr>
                  <th>Project</th>
                  <th class="text-nowrap">Total Task</th>
                  <th>Progress</th>
                  <th>Hours</th>
                  </tr>
                  </thead>
                  <tbody>
                    @foreach($user->activities as $activity)
                    @php
                      // Count the total tasks (modules)
                      $totalmodules = $activity->tasks->count();
                      

                      // Fetch all tasks related to the activity and employee from the employee_activity_logs table
                      $tasks = App\Models\EmployeeActivityLog::where('activity_id', $activity->id)
    ->where('employee_id', $user->id)
    ->get();

                      // Get the module names

                      $modules = App\Models\Module::where('activity_id', $activity->id)
                      ->get(['name', 'hours']); // Fetch name and hours

                      $totalHoursModule = $modules->sum('hours');

                      // Count the completed tasks and total tasks
                      $completedTasks = $tasks->where('status', 'Completed')->count();
                                            $totalTasks = $tasks->count();

                      // Calculate progress percentage
                      $progress = $totalTasks > 0 ? ($completedTasks / $totalTasks) * 100 : 0;
                      // Convert actual_time (HH:MM:SS) to total minutes
                      $totalModuleMinutes = $tasks->sum(function ($task) {
                          if ($task->actual_time) {
                              list($hours, $minutes) = explode(':', $task->actual_time);
                              return ((int)$hours * 60) + (int)$minutes; // Convert to minutes
                          }
                          return 0;
                      });

                      // Convert total minutes to HH:MM format
                      $totalHours = floor($totalModuleMinutes / 60);
                      $totalMinutes = $totalModuleMinutes % 60;
                      $totalModuleHours = sprintf("%02d:%02d", $totalHours, $totalMinutes);
                    @endphp
                    <tr>
                      <td>
                          <div class="d-flex justify-content-left align-items-center">
                              <div class="avatar-wrapper">
                                  @php
                                      // Define a set of colors to alternate between
                                      $colors = ['bg-label-primary', 'bg-label-success', 'bg-label-warning', 'bg-label-danger', 'bg-label-info'];
                                      $colorClass = $colors[$activity->id % count($colors)];
                                  @endphp

                                  <div class="avatar avatar-sm me-4">
                                      @if($activity->image)
                                          <img src="{{ asset('path/to/project/images/' . $activity->image) }}" 
                                                alt="Project Image" class="rounded-circle">
                                      @else
                                          <div class="avatar-initials rounded-circle {{ $colorClass }} d-flex justify-content-center align-items-center" style="width: 40px; height: 40px;">
                                              <span class="font-weight-bold">
                                                  {{ strtoupper(substr($activity->title, 0, 1)) }}
                                              </span>
                                          </div>
                                      @endif
                                  </div>
                              </div>
                              <div class="d-flex flex-column">
                                @php
$employeeActivities = App\Models\EmployeeActivityLog::where('activity_id', $activity->id)
    ->where('employee_id', $user->id)
    ->orderBy('created_at', 'desc') // Sorting by newest first
    ->get();
@endphp


<span class="text-truncate fw-medium text-heading " 
      data-bs-toggle="offcanvas" 
      data-bs-target="#activityLogOffcanvas_{{ $activity->id }}" 
      style="cursor: pointer;">
    {{ $activity->title }}
</span>


                                          <small>{{ $activity->typeModel->category }} / {{ optional($activity->clientModel)->name }}</small> 
                                          
                                          <!-- Clickable Text to Open Modal -->
                                        
                                          <small data-bs-toggle="modal" data-bs-target="#moduleModal_{{ $activity->id }}" class="badge bg-label-secondary rounded-pill mt-2 mb-2" style="text-align: left; cursor: pointer;">
                                            Total Modules: {{ $totalmodules }}
                                        </small>
                                        
                                          <!-- Bootstrap 5 Modal -->
                                          <!-- Employee Activity Log Modal -->
<!-- Employee Activity Log Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="activityLogOffcanvas_{{ $activity->id }}" aria-labelledby="activityLogLabel_{{ $activity->id }}">
  <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="activityLogLabel_{{ $activity->id }}">Employee Activity Log - {{ $activity->title }}</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="card mb-6">
        <h5 class="card-header">Project Activity Timeline</h5>
        <div class="card-body pt-0">
            <ul class="timeline mb-0">
                @foreach($employeeActivities as $log)
                <li class="timeline-item timeline-item-transparent">
                    <span class="timeline-point timeline-point-{{ $log->status == 'Completed' ? 'success' : ($log->status == 'In Progress' ? 'warning' : 'secondary') }}"></span>
                    <div class="timeline-event">
                        <div class="timeline-header mb-3">
                            <h6 class="mb-0">Module: {{ $log->moduleModel->name }}  <span class="badge bg-label-warning ms-auto rounded-pill">{{ $log->hours }} hrs</span></h6>
                            <small class="text-muted">{{ \Carbon\Carbon::parse($log->start_date)->diffForHumans() }} | {{ $log->start_date }}</small>
                        </div>
                        <p class="mb-2 d-flex">
                            <span class="me-2">Start Time: {{ $log->start_time }}</span>
                            <span class="me-2">End Time: {{ $log->end_time }} </span>   
                            <p>Actual Arrival: {{ $log->actual_time }}</p>
                        </p> 
                        <strong>Status:</strong> <span class="me-2 badge bg-{{ $log->status == 'Completed' ? 'success' : ($log->status == 'In Progress' ? 'warning' : 'secondary') }}">{{ $log->status }}</span>
                        </p>
                        <p>Remarks: {{ $log->remarks ?? 'No remarks' }}</p>

                        @if($log->preview_file)
                        <div class="d-flex align-items-center mb-1">
                            <div class="badge bg-lightest">
                                <img src="{{ asset('assets/img/icons/misc/slack.png') }}" alt="File" width="15" class="me-2">
                                <a href="{{ asset('storage/' . $log->preview_file) }}" target="_blank">View File</a>
                            </div>
                        </div>
                        @endif
                       
                        {{-- Calculate Remaining Hours --}}
                        @php
                        // Initialize total worked minutes
                        $totalWorkedMinutes = 0;
                    
                        // Iterate through all logs and sum up worked time for the same module
                        foreach ($employeeActivities as $previousLog) {
                            if ($previousLog->moduleModel->id == $log->moduleModel->id) {
                                // Convert actual_time to minutes (HH:MM:SS)
                                $prevTimeParts = explode(":", $previousLog->actual_time);
                                $prevMinutes = ($prevTimeParts[0] * 60) + $prevTimeParts[1];
                                $totalWorkedMinutes += $prevMinutes;
                            }
                        }
                    
                        // Convert total planned hours to minutes (planned time)
                        $totalPlannedMinutes = $log->hours * 60;
                    
                        // Calculate remaining minutes based on worked minutes
                        $remainingMinutes = $totalPlannedMinutes - $totalWorkedMinutes;
                    
                        // If status is In Progress
                        if ($log->status == 'In Progress') {
                            // Ensure remaining time is calculated based on work done so far
                            $remainingMinutes = max(0, $remainingMinutes); // Prevent negative values
                            $remainingHours = floor($remainingMinutes / 60);
                            $remainingMinutes = $remainingMinutes % 60;
                            $statusText = "Remaining Hours";
                            $badgeClass = "bg-label-warning";
                        }
                    
                        // For Pending (or when no work has been done yet), show the full planned time
                        elseif ($log->status == 'Pending') {
                            // Display full planned time as remaining time
                            $remainingHours = floor($totalPlannedMinutes / 60);
                            $remainingMinutes = $totalPlannedMinutes % 60;
                            $statusText = "Remaining Hours";
                            $badgeClass = "bg-label-info"; // Blue badge for Pending
                        }
                        // For Completed tasks
                        elseif ($log->status == 'Completed') {
                            if ($remainingMinutes < 0) {
                                // Extra time taken
                                $extraMinutes = abs($remainingMinutes);
                                $extraHours = floor($extraMinutes / 60);
                                $extraMinutes = $extraMinutes % 60;
                                $remainingHours = $extraHours;
                                $remainingMinutes = $extraMinutes;
                                $statusText = "Extra Hours Taken";
                                $badgeClass = "bg-label-danger";
                            } else {
                                // Remaining time after completion
                                $remainingHours = floor($remainingMinutes / 60);
                                $remainingMinutes = $remainingMinutes % 60;
                                $statusText = "Remaining Hours";
                                $badgeClass = "bg-label-success";
                            }
                        }
                    @endphp
                    <p>{{ $statusText }} <span class="badge {{ $badgeClass }} rounded-pill">{{ sprintf("%02d:%02d", $remainingHours, $remainingMinutes) }}</span></p>
                    </div>
                </li>
                @endforeach
            </ul>
            @if($employeeActivities->isEmpty())
                <p class="text-muted">No activity logs available.</p>
            @endif
        </div>
    </div>
</div>

</div>


                                        <!-- Bootstrap Modal -->
                        <div class="modal fade" id="moduleModal_{{ $activity->id }}" tabindex="-1" aria-labelledby="modalLabel_{{ $activity->id }}" aria-hidden="true">
                        <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="modalLabel_{{ $activity->id }}">Module Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                        <p>Total Modules : {{ $modules->count() }}</p>
                        {{-- <ul>
                        @foreach($modules as $module)
                            <li>{{ $module->name }} - <strong>{{ $module->hours }}h</strong></li>
                        @endforeach
                        </ul> --}}
                        <ul class="list-unstyled mb-4">
                        @foreach($modules as $module)
                          <li class="d-flex mb-6">
                              <div class="avatar flex-shrink-0 me-4">
                                  <span class="avatar-initial rounded bg-label-info"><i class="mdi mdi-star ri-24px"></i></span>
                              </div>
                              <div class="d-sm-flex w-100 align-items-center">
                                  <div class="w-100 mb-2 mb-sm-0 me-sm-4">
                                      <h6 class="mb-0">{{ $module->name }}</h6>
                                  </div>
                                  <div class="badge bg-label-secondary rounded-pill text-heading">{{ $module->hours }} hrs</div>
                              </div>
                          </li>
                        @endforeach
                        </ul>
                        <!-- Display Total Estimated Hours -->
                        <div class="mt-3">
                        <p>Total Estimated Hours: <span class="badge bg-label-primary rounded-pill">{{ $totalHoursModule }} hrs</span></p> 
                        <p>Total Estimated Days: <span class="badge bg-label-success rounded-pill">{{ ceil($totalHoursModule / 8) }} days</span></p>  
                        </div>
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                        </div>
                        </div>
                        </div>
 
                                 
                              </div>
                          </div>
                      </td>
                      <td><span class="text-heading" data-bs-toggle="offcanvas" 
                        data-bs-target="#activityLogOffcanvas_{{ $activity->id }}" style="cursor: pointer;">{{ $completedTasks }}/{{ $totalmodules }}</span></td>
                     {{--  <td>
                          <div class="d-flex flex-column">
                              <p class="mb-0 text-heading">{{ number_format($progress, 2) }}%</p>
                              <div class="progress rounded bg-label-{{ $progress >= 80 ? 'success' : ($progress >= 50 ? 'warning' : 'danger') }} w-100 me-3" style="height: 6px;">
                                  <div class="progress-bar rounded bg-{{ $progress >= 80 ? 'success' : ($progress >= 50 ? 'warning' : 'danger') }}" 
                                        style="width: {{ $progress }}%" 
                                        aria-valuenow="{{ $progress }}" 
                                        aria-valuemin="0" 
                                        aria-valuemax="100"></div>
                              </div>
                          </div>
                      </td> --}}
                      <td>
                        <div class="d-flex flex-column">
                            <p class="mb-0 text-heading">{{ number_format($progress, 2) }}%</p>
                            <div class="progress rounded bg-label-{{ $progress >= 80 ? 'success' : ($progress >= 50 ? 'warning' : 'danger') }} w-100 me-3" style="height: 6px;" data-bs-toggle="modal" data-bs-target="#progressModal_{{ $activity->id }}">
                                <div class="progress-bar rounded bg-{{ $progress >= 80 ? 'success' : ($progress >= 50 ? 'warning' : 'danger') }}" 
                                    style="width: {{ $progress }}%" 
                                    aria-valuenow="{{ $progress }}" 
                                    aria-valuemin="0" 
                                    aria-valuemax="100">
                                </div>
                            </div>
                        </div>
                    </td>
                    <!-- Modal -->
                    <div class="modal fade" id="progressModal_{{ $activity->id }}" tabindex="-1" aria-labelledby="progressModalLabel_{{ $activity->id }}" aria-hidden="true">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="progressModalLabel_{{ $activity->id }}">Progress Information</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <p>Current Progress: {{ number_format($progress, 2) }}%</p>
                            
                            <!-- Calculate the actual time directly in Blade -->
                 
                            @php
                            $totalModuleHours = floatval($totalModuleHours); // Ensure it's a numeric value
                            $assignedHours = floatval($activity->hours); // Ensure assigned hours is numeric
                            $remainingHours = $assignedHours - $totalModuleHours; // Calculate remaining or extra hours
                        @endphp
                        
                        <p>Total Hours Spent:
                            <span class="badge bg-label-primary rounded-pill">{{ $totalModuleHours }} hrs</span>
                        </p>
                        
                        <p>Total Days Spent:
                            <span class="badge bg-label-success rounded-pill">
                                {{ $totalModuleHours > 0 ? ceil($totalModuleHours / 8) : 0 }} days
                            </span>
                        </p>
                        
                        <p>The Project Assigned Total Hours: {{ $assignedHours }} hrs</p>
                        
                        <p>
                            @if($remainingHours > 0)
                                Remaining Hours: 
                                <span class="badge bg-label-info rounded-pill">{{ $remainingHours }} hrs</span>
                            @elseif($remainingHours < 0)
                                Extra Hours Used: 
                                <span class="badge bg-label-danger rounded-pill">{{ abs($remainingHours) }} hrs</span>
                            @else
                                No extra or remaining hours.
                            @endif
                        </p>
                        <div class="alert {{ $progress >= 80 ? 'alert-success' : ($progress >= 50 ? 'alert-warning' : 'alert-danger') }} mt-4" role="alert">
                          <i class="bi bi-info-circle"></i> The project is currently in the 
                          <strong>{{ $progress >= 80 ? 'successful' : ($progress >= 50 ? 'warning' : 'critical') }}</strong> phase.
                          Keep up the good work!
                      </div>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    
                      <td> <span class="bg-label-warning">{{ $totalModuleHours }}h</span> / {{ $activity->hours }}h</td>
                    </tr>
                    @endforeach
                
                  </tbody>
                  </table>
                  </div>
                  </div>
                  </div>
    <!-- /Project table -->

  </div>
  <!--/ User Content -->
</div>
</div>
 <!-- / Content --> 
<!-- / Footer -->
 <div class="content-backdrop fade"></div>
 </div>

{{--  <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#onboardingSlideModal">Multistep
  Slider modal</button>
  
  <div class="modal-onboarding modal fade animate__animated multimodal" id="onboardingSlideModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header border-0">
          <a class="text-muted close-label" href="javascript:void(0);" data-bs-dismiss="modal">Skip Intro</a>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          </button>
        </div>
        <div id="modalCarouselControls" class="carousel slide pb-6 mb-2" data-bs-interval="false">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#modalCarouselControls" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#modalCarouselControls" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#modalCarouselControls" data-bs-slide-to="2"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="onboarding-media text-center">
                <div class="mx-2">
                  <img src="{{ asset('assets/img/projectoverview.png') }}" alt="girl-with-laptop-light" width="335" class="img-fluid" data-app-light-img="illustrations/girl-with-laptop-light.png" data-app-dark-img="illustrations/girl-with-laptop-dark.png">
                </div>
              </div>
              <div class="onboarding-content">
                <h5 class="onboarding-title text-body  text-center">Project Overview</h5>
                <!-- <div class="onboarding-info">In this example you can see a form where you can request some
                additional information from the customer when they land on the app page.</div> -->
            
                  <div class="row">
                    <div class="col-sm-12">
                      <ul class="mb-4">
                        <li>Project Name : Regional Science Centre And Planetarium Calicut</li>
                        <li>Start Date  : 18/01/2025</li>
                        <li>Deadline : 28/02/2025</li>
                        <li>Total Hours : 365hr</li>
                      </ul>
                    </div>
                  </div>
                
              </div>
            </div>
            <div class="carousel-item">
              <div class="onboarding-media">
                <div class="mx-2">
                  <img src="{{ asset('assets/img/phpproject.png') }}" alt="boy-with-laptop-light" width="300" class="img-fluid" data-app-light-img="illustrations/boy-with-laptop-light.png" data-app-dark-img="illustrations/boy-with-laptop-dark.png">
                </div>
              </div>
              <div class="onboarding-content">
                <h5 class="onboarding-title text-body">Example Request Information</h5>
                <div class="onboarding-info">In this example you can see a form where you can request some
                  additional information from the customer when they land on the app page.</div>
                <form>
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="form-floating form-floating-outline mb-4">
                        <input class="form-control" placeholder="Enter your full name..." type="text" value="" tabindex="0" id="nameEx1">
                        <label for="nameEx1">Your Full Name</label>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-floating form-floating-outline mb-4">
                        <select class="form-select" tabindex="0" id="roleEx1">
                          <option>Web Developer</option>
                          <option>Business Owner</option>
                          <option>Other</option>
                        </select>
                        <label for="roleEx1">Your Role</label>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <div class="carousel-item">
              <div class="onboarding-media">
                <div class="mx-2">
                  <img src="../../assets/img/illustrations/girl-verify-password-light.png" alt="girl-verify-password-light" width="300" class="img-fluid" data-app-light-img="illustrations/girl-verify-password-light.png" data-app-dark-img="illustrations/girl-verify-password-dark.png">
                </div>
              </div>
              <div class="onboarding-content">
                <h5 class="onboarding-title text-body">Example Request Information</h5>
                <div class="onboarding-info">In this example you can see a form where you can request some
                  additional information from the customer when they land on the app page.</div>
                <form>
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="form-floating form-floating-outline mb-4">
                        <input class="form-control" placeholder="Enter your full name..." type="text" value="" tabindex="0" id="nameEx2">
                        <label for="nameEx2">Your Full Name</label>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-floating form-floating-outline mb-4">
                        <select class="form-select" tabindex="0" id="roleEx2">
                          <option>Web Developer</option>
                          <option>Business Owner</option>
                          <option>Other</option>
                        </select>
                        <label for="roleEx2">Your Role</label>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#modalCarouselControls" role="button" data-bs-slide="prev">
            <i class="mdi mdi-chevron-double-left lh-1 me-1"></i><span>Previous</span>
          </a>
          <a class="carousel-control-next" href="#modalCarouselControls" role="button" data-bs-slide="next">
            <span>Next</span><i class="mdi mdi-chevron-double-right lh-1 ms-1"></i>
          </a>
        </div>
      </div>
    </div>
  </div> --}}
  <!--/ slider modal -->

<style>
  .multimodal .carousel-control-prev{color: #5c5a5a;}
  .multimodal .carousel-control-next{color: #5c5a5a;}
  .multimodal .carousel-indicators [data-bs-target] {

  background-color: #888;}
</style>



 @endsection