@extends('dashboard.layout.base')

@section('content')

      <div class="slim-mainpanel">
        <div class="container">
          <div class="slim-pageheader">
            <ol class="breadcrumb slim-breadcrumb">
              <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Demande de vacations</a></li>
              <li class="breadcrumb-item active" aria-current="page">Liste des demandes de vacation</li>
            </ol>
            <h6 class="slim-pagetitle">Liste des demandes de vacation</h6>
          </div><!-- slim-pageheader -->

          <div class="section-wrapper">

              @include('dashboard.component.dashboard_error')
              @include('dashboard.component.notifications')

              @if(count($vacations) > 0)
              <div class="table-responsive">
                <table class="table mg-b-0 tx-12">
                  <thead>
                    <tr class="tx-10">
                      <th class="pd-y-5">Nom du demandeur</th>
                      <th class="pd-y-5">Motif:</th>
                      <th class="pd-y-5">Date de la demande:</th>
                      <th class="pd-y-5 text-center">Télécharger la demande</th>
                      <th class="pd-y-5 text-center">Supprimer</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($vacations as $vacation)
                    <tr class="">
                      <td class="valign-middle ">{{ $vacation->employee->name }}</td>
                      <td class="valign-middle">{{ $vacation->motif }}</td>
                      <td class="valign-middle">{{ $vacation->created_at->format('Y-m-d') }}</td>
                      <td class="valign-middle text-center">
                        <a href="{{ route('admin.vacation.export_pdf_demande', ['id' => $vacation->id] ) }}" class="tx-gray-600 tx-24">
                          <i class="fa ion-document-text mg-r-5"></i>
                        </a>
                      </td>
                      <td class="valign-middle text-center">
                        <a href="{{ route('admin.vacation.delete', ['id' => $vacation->id] ) }}" class="tx-gray-600 text-danger tx-24"><i class="fa fa-close mg-r-5"></i> </a>
                      </td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div><!-- table-responsive -->
              @else
              <p>Vous n'avez aucune demande</p>
              @endif

          </div><!-- section-wrapper -->

        </div><!-- container -->

        @include('dashboard.component.copyright')
      </div><!-- slim-mainpanel -->


    </div><!-- slim-body -->

@endsection


@push('styles')

    <link href="{{ asset('dashboard/lib/jquery-toggles/css/toggles-full.css') }}" rel="stylesheet">

    <style type="text/css">

      .toggle-modern.indigo .toggle-on.active {
          background-color: #1b84e7 !important;
      }

      .toggle-modern.indigo .toggle-on.active + .toggle-blob {
          border: 3px solid #1b84e7 !important;
      }

      .toggle-wrapper {
        width: unset !important;
      }

      .category-image {
        /*height: 20pt;*/
        width: 120pt;
        background-position: center;
        background-size: cover;
        margin: 0;
      }

    </style>

@endpush



@push('scripts')

    <script src="{{ asset('dashboard/lib/jquery-toggles/js/toggles.min.js') }}"></script>

    <script type="text/javascript">

      $(function(){
        'use strict'

        // Toggles
        $('.toggle').toggles({
          on: true,
          height: 32,
          width: 90,
          text: {
            on: 'activer',
            off: 'desactiver'
          },
          checkbox: null,
        });

        $('.toggle').on('toggle', function(e, active) {
          if (active) {
            console.log('Toggle is now ON!');
          } else {
            console.log('Toggle is now OFF!');
          }
        });


      });

    </script>


@endpush