@extends('layouts.app-bo')
@section('title', __('app.dashboard'))
@section('content')
<style>
#carouselExampleControls .card {
    margin-bottom: 15px; /* Ajustez la marge si nécessaire */
    height: 100%; /* Assure que les cartes ont une hauteur égale */
}


  .info-box {
    background-color: #fff3cd;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .legend-box {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .legend-box span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: 50%;
  }

  .legend-box .nothing-assigned {
    background-color: #0000ff;
  }

  .legend-box .not-started {
    background-color: #ff0000;
  }

  .legend-box .in-progress {
    background-color: #ffbf00;
  }

  .legend-box .all-done {
    background-color: #00ff00;
  }

  .notAllowed {
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
  }

  .notAllowed:hover {
    transform: none;
    box-shadow: none;
  }

  .card {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .card img {
    border-radius: 5px 5px 0 0;
    object-fit: cover;
    height: 200px;
    width: 100%;
  }

  .card-body {
    padding: 10px;
  }
</style>


<div class="container-fluid">
  <div class="row mb-3" hidden>
    <div class="col-md-6">
      <a href="{{ route('training-demand.list', [$locale]) }}" class="btn btn-info mb-3 w-100 fs-7">
        {{ __("app.training_requests") }}
      </a>
    </div>
    <div class="col-md-6">
      <a href="#" class="btn btn-info mb-3 w-100 fs-7">
        {{ __("app.contractor_inventory_consultation") }}
      </a>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-7">
      <div class="card uncover-exciting-enhancements notAllowed">
        <div class="card-body position-relative z-1 row p-3">
          <div class="col-xl-7 col-xxl-10">
            <h2 class="mb-2 lh-sm pb-1">{{ __('menus.assign_trainings') }}</h2>
            <div class="row gap-2">
              <div class="col-md-7">
                <button type="button" class="btn d-flex bg-primary-subtle w-100 d-block text-primary ">
                  {{ __('menus.assign_trainings') }}
                  <span class="badge ms-auto text-bg-primary">{{ $assign_trainings }}</span>
                </button>
              </div>
              <div class="col-md-7">
                <button type="button" class="btn d-flex bg-success-subtle w-100 d-block text-success ">
                  {{ __('users.completed_trainings') }}
                  <span class="badge ms-auto text-bg-success">{{ $completed_trainings }}</span>
                </button>
              </div>
              <div class="col-md-7">
                <button type="button" class="btn d-flex bg-warning-subtle w-100 d-block text-warning ">
                  {{ __('users.timespent') }}
                  <span class="badge ms-auto text-bg-warning">{{ $timespent }}</span>
                </button>
              </div>
            </div>
            <h2 class="mb-6 mt-5 lh-sm pb-1">{{ __('other.disabled') }} {{ __('menus.trainings') }}</h2>
            <div class="row gap-2">
              <div class="col-md-7">
                <button type="button" class="btn d-flex bg-primary-subtle w-100 d-block text-primary ">
                  {{ __('menus.online_training_and_evaluation') }}
                  <span class="badge ms-auto text-bg-primary">{{ $online_training_and_evaluation }}</span>
                </button>
              </div>
              <div class="col-md-7">
                <button type="button" class="btn d-flex bg-info-subtle w-100 d-block text-info ">
                  {{ __('menus.external_presentiel') }}
                  <span class="badge ms-auto text-bg-info">{{ $external_presentiel }}</span>
                </button>
              </div>
              <div class="col-md-7">
                <button type="button" class="btn d-flex bg-warning-subtle w-100 d-block text-warning ">
                  {{ __('menus.online_reading_procedures') }}
                  <span class="badge ms-auto text-bg-warning">{{ $online_reading_procedures }}</span>
                </button>
              </div>
              <div class="col-md-7">
                <button type="button" class="btn d-flex bg-danger-subtle w-100 d-block text-danger ">
                  {{ __('menus.interactive_apprentice_booklet') }}
                  <span class="badge ms-auto text-bg-danger">{{ $interactive_apprentice_booklet }}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
       <div class="col-lg-5">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body">
              <div class="brand-logo d-flex justify-content-center text-center">
                <a href="{{ route('admin.dashboard', $locale) }}" class="text-nowrap logo-img">
                  <img src="{{ url('assets/images/logos/dark-logo.svg') }}" alt="Logo" class="dark-logo" width="100px" />
                  <img src="{{ url('assets/images/logos/light-logo.svg') }}" alt="Logo" class="light-logo" width="100px" />
                </a>
              </div>

              <br><br><br><br>
              <div class="hstack justify-content-between py-1">
                <h5 class="mb-0 fw-medium text-center">
                  <span data-bs-toggle="modal" data-bs-target="#modal-dialog-tutorial-video" id="watch-tutorial">
                    <div class="p-1">
                      <i class="ti ti-world-www text-primary fs-5"></i>
                      {{ __('other.how_this_webpage_works') }}
                    </div>
                    <div class="p-1">
                      <i class="ti ti-info-circle text-info fs-5"></i>
                      {{ __('other.how_to_use_the_training_plateform') }}
                    </div>
                    <div class="p-1">
                      <i class="ti ti-video fs-5 text-primary"></i>
                      {{ __('other.watch_video') }}
                    </div>
                  </span>
                </h5>
                <div class="hstack gap-9">
                  <i class="ti ti-book text-warning fs-13 h1 flex-shrink-0"></i>
                  <h2 class="mb-0 fw-medium fs-13 hstack align-items-start"></h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--       
        <div class="col-md-6">
          <div class="card text-bg-primary ">
            <div class="card-body">
              <h5 class="text-white fw-normal">{{ __('app.nothing_assigned') }}</h5>
            </div>
            <div class="card-body">
              <h5 class="fs-6 text-white mb-1">{{ $nothing_assigned_category }}</h5>
              <h6 class="text-white fw-medium mb-0">{{ $nothing_assigned_training }} {{ __('app.training') }}(s)</h6>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card text-bg-danger">
            <div class="card-body">
              <h5 class="text-white fw-normal">{{ __('app.not_started') }}</h5>
            </div>
            <div class="card-body">
              <h5 class="fs-6 text-white mb-1">{{ $not_started_category }}</h5>
              <h6 class="text-white fw-medium mb-0">{{ $not_started_training }} {{ __('app.training') }}(s)</h6>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card text-bg-warning">
            <div class="card-body pb-3">
              <h5 class="text-white fw-normal">{{ __('app.in_progress') }}</h5>
            </div>
            <div class="card-body pt-2">
              <h5 class="fs-6 text-white mb-1">{{ $in_progress_category }}</h5>
              <h6 class="text-white fw-medium mb-0">{{ $in_progress_training }} {{ __('app.training') }}(s)</h6>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card text-bg-success">
            <div class="card-body">
              <h5 class="text-white fw-normal">{{ __('app.all_done') }}</h5>
            </div>
            <div class="card-body">
              <h5 class="fs-6 text-white mb-1">{{ $all_done_category }}</h5>
              <h6 class="text-white fw-medium mb-0">{{ $all_done_training }} {{ __('app.training') }}(s)</h6>
            </div>
          </div>
        </div> 
        <div class="col-md-8">
          <div class="card notAllowed h-100">
            <div class="card-body">
              <div class="hstack justify-content-between py-1">
                <h3 class="mb-0 fw-medium">{{ __('app.completed_trainings') }}</h3>
                <div class="hstack gap-9">
                  <i class="ti ti-check text-success fs-13 flex-shrink-0"></i>
                  <h2 class="mb-0 fw-medium fs-10 hstack align-items-start">{{ $completed_trainings }}</h2>
                </div>
              </div>
            </div>
          </div>
        </div> -->
        <div class="col-md-12">

          <a href="#" class="btn btn-info w-100 h-100 fs-7" style='font-size:25px' data-bs-toggle="modal" data-bs-target="#modal-dialog-my-qr-code" id="my-qr-code">
            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-qr-code" viewBox="0 0 16 16">
              <path d="M2 2h2v2H2z" />
              <path d="M6 0v6H0V0zM5 1H1v4h4zM4 12H2v2h2z" />
              <path d="M6 10v6H0v-6zm-5 1v4h4v-4zm11-9h2v2h-2z" />
              <path d="M10 0v6h6V0zm5 1v4h-4V1zM8 1V0h1v2H8v2H7V1zm0 5V4h1v2zM6 8V7h1V6h1v2h1V7h5v1h-4v1H7V8zm0 0v1H2V8H1v1H0V7h3v1zm10 1h-1V7h1zm-1 0h-1v2h2v-1h-1zm-4 0h2v1h-1v1h-1zm2 3v-1h-1v1h-1v1H9v1h3v-2zm0 0h3v1h-2v1h-1zm-4-1v1h1v-2H7v1z" />
              <path d="M7 12h1v3h4v1H7zm9 2v2h-3v-1h2v-1z" />
            </svg> {{ __('menus.my_qr_code') }}
          </a>
        </div>
      </div>
    </div>
    <div class="container mt-3">
      <!--
      <div class="row">
        <div class="col-12">
          <div class="legend-box">
            <span class="nothing-assigned"></span>{{ __('app.nothing_assigned') }}
            <span class="not-started"></span>{{ __('app.not_started') }}
            <span class="in-progress"></span>{{ __('app.in_progress') }}
            <span class="all-done"></span>{{ __('app.all_done') }}
          </div>
        </div>
      </div>
      -->
      <div class="row">
        @foreach($categories as $category)
        <div class="col-sm-6 col-xxl-4">
          <div class="card overflow-hidden rounded-2 border">
            <div class="position-relative">
              @if ($category->id == 11)
              <a href="{{ route('training-library_video.index', [$locale, $category->id]) }}" class="hover-img d-block overflow-hidden">
                <img src="{{ Storage::url($category->image) }}" class="card-img-top rounded-0" alt="{{ $category->name }}">
              </a>
              @elseif ($category->id == 8)
              <a href="{{ route('admin.report', [$locale]) }}" class="hover-img d-block overflow-hidden">
                <img src="{{ Storage::url($category->image) }}" class="card-img-top rounded-0" alt="{{ $category->name }}">
              </a>
              @else
              <a href="{{ url(app()->getLocale() . '/users/dashboard/' . $category->id) }}" class="hover-img d-block overflow-hidden">
                <img src="{{ Storage::url($category->image) }}" class="card-img-top rounded-0" alt="{{ $category->name }}">
              </a>
              @endif
              <a href="javascript:void(0)" class="text-bg-primary rounded-circle p-2 text-white d-inline-flex position-absolute bottom-0 end-0 mb-n3 me-3">
                <i class="ti ti-basket fs-4"></i>
              </a>
            </div>
            <div class="card-body pt-3 p-4">
              <h6 class="fw-semibold fs-4">{{ __("menus.$category->code") }}</h6>
              <div class="d-flex align-items-center justify-content-between">
                <h6 class="fw-semibold fs-4 mb-0">{{ __('other.click_here') }}</h6>
                <ul class="list-unstyled d-flex align-items-center mb-0">
                  <li><i class="ti ti-star text-warning"></i></li>
                  <li><i class="ti ti-star text-warning"></i></li>
                  <li><i class="ti ti-star text-warning"></i></li>
                  <li><i class="ti ti-star text-warning"></i></li>
                  <li><i class="ti ti-star text-warning"></i></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        @endforeach
      </div>

      <div class="col-lg-12">
        <h1>{{ __('app.training_catalog') }}</h1>
      </div>

<div id="carouselExampleControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        @foreach ($training_catalogs as $j => $training_catalog)
        <div class="carousel-item {{ $j == 0 ? 'active' : '' }}">
            <div class="row justify-content-center"> <!-- Center the cards -->
                @foreach ($training_catalog as $i => $training)
                @php
                $images = $training->image;
                $image_name = '';
                $image_path = 'assets/images/backgrounds/active-bg.png';
                foreach ($images as $key => $val)
                {
                    $image_name = $key;
                    $image_path = $val;
                }
                @endphp
                <div class="col-lg-2 col-md-4 col-sm-6 mb-4"> <!-- 6 cards per line -->
                    <div class="card">
                        <a href="javascript:void(0)">
                            @if ($image_name)
                            <img class="card-img-top img-responsive" src="{{ Storage::url($image_path) }}" alt="{{ $image_name }}" />
                            @else
                            <img class="card-img-top img-responsive" src="{{ url($image_path) }}"/>
                            @endif
                        </a>
                        <div class="card-body">
                            <div class="hstack mb-6">
                                
                            </div>
                            <h4 class="mb-0">
                                {{ $training->name }}
                            </h4>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">{{ __('app.previous') }}</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">{{ __('app.next') }}</span>
    </button>
</div>

      
      
    </div>
  </div>
</div>
<br/>
<!--
<button class="btn btn-primary p-3 rounded-circle d-flex align-items-center justify-content-center customizer-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  <i class="icon ti ti-settings fs-7"></i>
</button>
-->
</div>

<!-- Modal dialog video -->
<div id="modal-dialog-tutorial-video" class="modal fade" tabindex="-1" aria-labelledby="modal-dialog-tutorial-video-label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header modal-colored-header bg-primary text-white">
        <h4 class="modal-title text-white" id="modal-dialog-tutorial-video-label">
          {{ __('message.tutorial_video') }}
        </h4>
      </div>
      <div class="modal-body">
        <div class="text-center">
          @if ($tutorial_video)
          <video id="tutorial-video"
            src="{{ $tutorial_video }}"
            title="{{ __('message.tutorial_video') }}"
            controls
            autoplay
            controlslist="nodownload"
            style="width:100%;height:auto;margin:auto;display:block;">
            {{ __('message.your_browser_does_not_support_the_video_tag') }}
          </video>
          @else
          <h1>{{ __('message.no_tutorial_video') }}</h1>
          @endif
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="button-tutorial-video" data-bs-dismiss="modal">
          <i class="ti ti-player-skip-forward fs-4"></i>
          {{ __('message.skip') }}
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal dialog my-qr-code -->
<div id="modal-dialog-my-qr-code" class="modal fade" tabindex="-1" aria-labelledby="modal-dialog-my-qr-code-label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header modal-colored-header bg-primary text-white">
        <h4 class="modal-title text-white" id="modal-dialog-my-qr-code-label">
          {{ __('menus.my_qr_code') }}
        </h4>
      </div>
      <div class="modal-body">
        <div class="text-center">
          <h1>{{ __('menus.my_qr_code') }}</h1>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" id="button-my-qr-code" data-bs-dismiss="modal">
          <i class="ti ti-square-rounded-x fs-4"></i>
          {{ __('app.close') }}
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Javascript -->
<script type="text/javascript">
  $(function() {
    $("#watch-tutorial").click(function() {
      var video = $("#tutorial-video").get(0);
      video.play();
    });

    $("#button-tutorial-video").click(function() {
      var video = $("#tutorial-video").get(0);
      video.pause();
      video.currentTime = 0;
    }).click();
  });
</script>
@endsection