@include('includes.header')
<div class="container page__heading-container">
  <div class="page__heading d-flex align-items-end">
    <div class="flex">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item">{{ $categorie }}</li>
          <li class="breadcrumb-item active"
          aria-current="page">Assistance</li>
        </ol>
      </nav>
      <h1 class="m-0">Assistance</h1>
    </div>
    @include('includes.toast', ['msg' => $msg])
  </div>
</div>
<div class="container page__container">
  <div class="row h-100 m-0">
    <div class="col-lg-8 py-3 d-flex flex-column h-100">
      <div class="search-form form-control-rounded search-form--light">
        <input type="text" class="form-control" placeholder="Recherche..." id="searchSample02">
        <button class="btn" type="button"><i class="material-icons">search</i></button>
      </div>

      <div class="flex p-3 ps" data-perfect-scrollbar="">

        <div class="media border-bottom py-3">
          <div class="media-body">
            <div class="d-flex align-items-center">
              <div class="flex">
                <a href="#" class="text-body bold">Karl Bertrand</a>
              </div>
              <small class="text-muted">Il y a 4 jours</small>
            </div>
            <div>Bonjour, j'ai un problème</div>

          </div>
        </div>

        <div class="media py-3">
          <div class="media-body">
            <div class="d-flex align-items-center">
              <div class="flex">
                <a href="#" class="text-body bold">Alcôves du Palais</a>
              </div>
              <small class="text-muted">Il y a 52 minutes</small>
            </div>
            <div>Est-ce que une photo de votre sinistre?</div>

            <a href="#" class="media align-items-center mt-2 text-underline-0 bg-white p-2">
              <span class="avatar avatar-xs mr-2">
                <span class="avatar-title rounded-circle">
                  <i class="material-icons">attach_file</i>
                </span>
              </span>
              <span class="media-body" style="line-height: 1.5">
                <span class="text-primary">photo.jpeg</span><br>
                <span class="text-muted">15kb</span>
              </span>
            </a>

          </div>
        </div>

        <div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div>

        <div class="input-group input-group-merge">
          <input type="text" class="form-control form-control-appended" required="" placeholder="Rédigez votre message">
          <div class="input-group-append">
            <div class="input-group-text pr-2">
              <button class="btn btn-flush" type="button"><i class="material-icons">tag_faces</i></button>
            </div>
            <div class="input-group-text pl-0">
              <div class="custom-file custom-file-naked d-flex" style="width: 24px">
                <input type="file" class="custom-file-input" id="customFile">
                <label class="custom-file-label" style="color: inherit;" for="customFile">
                  <i class="material-icons">attach_file</i>
                </label>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="col-lg-4 py-3 px-0 bg-white border-left d-flex flex-column h-100">
        <div class="form-group px-3">
          <div class="input-group input-group-merge input-group-rounded">
            <input type="text" class="form-control form-control-prepended" placeholder="Filtre...">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <span class="material-icons">filter_list</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex d-flex flex-column ps" data-perfect-scrollbar="">
          <div class="list-group list-group-flush" style="position: relative; z-index: 0;">

            <div class="list-group-item d-flex media align-items-center" style="background-color: silver;">
              <div class="media-body">
                <p class="m-0">
                  <a href="#" class="text-body"><strong>Fuite d'eau</strong></a><br>
                  <span class="text-muted">Sinistres</span>
                </p>
              </div>
            </div>

            <div class="list-group-item d-flex media align-items-center">
              <div class="media-body">
                <p class="m-0">
                  <a href="#" class="text-body"><strong>Bruit au 3e étage</strong></a><br>
                  <span class="text-muted">Plaintes</span>
                </p>
              </div>
            </div>

            <div class="list-group-item d-flex media align-items-center">
              <div class="media-body">
                <p class="m-0">
                  <a href="#" class="text-body"><strong>!!!!</strong></a><br>
                  <span class="text-muted">Questions, commentaires & insultes</span>
                </p>
              </div>
            </div>
            <hr>
            <center>
            <div class="flatpickr-wrapper ml-3">
              <button type="button"
              class="btn btn-primary"
              data-toggle="modal"
              data-target="#newAide"><i class="fas fa-plus"></i>&nbsp;&nbsp;Nouvelle demande
            </div>
            </center>
          </div>
          <div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div>
        </div>
      </div>
    </div>

  </div>
  <!-- // END Header Layout Content -->
</div>
<!-- // END Header Layout -->
@include('widgets.newAide')
@include('includes.footer')
</body>

</html>