@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="#">Affectation</a></li>
              <li class="breadcrumb-item active" aria-current="page">Affectation N° {{$affectation->id}}</li>
            </ol>
            <h6 class="slim-pagetitle">Affectation N° {{$affectation->id}}</h6>
          </div><!-- slim-pageheader -->

          <div class="section-wrapper mg-t-20 mg-b-20">
            <label class="section-title">Information du bénéficiaire </label>
            <div class="form-layout form-layout-2">
                <div class="row no-gutters">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-control-label"> Bénéficiaire: </label>
                            <input class="form-control" type="text" name="n_ins" value="{{ $affectation->personnel->name }}" readonly>
                        </div>
                    </div><!-- col-3 -->
                    <div class="col-md-4 mg-t--1 mg-md-t-0">
                        <div class="form-group mg-md-l--1">
                            <label class="form-control-label"> Département/Fonction: </label>
                            <input class="form-control" type="text" name="first_name" value="{{  $affectation->personnel->job}}" readonly>
                        </div>
                    </div><!-- col-3 -->
                    <div class="col-md-4 mg-t--1 mg-md-t-0">
                        <div class="form-group mg-md-l--1">
                            <label class="form-control-label"> Date: </label>
                            <input class="form-control" type="text" name="last_name" value="{{ $affectation->created_at->format('Y-m-d')}}" readonly>
                        </div>
                    </div>
                </div><!-- row -->
            </div><!-- form-layout -->
        </div>
        <div class="section-wrapper mg-t-20 mg-b-20">
            <label class="section-title">LISTE DE FOURNITURES</label>
            <div class="table-responsive">
                <table class="table table-bordered">
                <thead class="thead-colored bg-warning">
                    <tr class="tx-10 bg-primary">
                    <th class="pd-y-5">Designation</th>
                    <th class="pd-y-5">Qte</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($affectation->fournitures as $fourniture)
                    <tr>
                    <td class="valign-middle">{{ $fourniture->designation }}</td>
                    <td class="valign-middle">{{ $fourniture->qte }}</td>
                    </tr>
                    @endforeach
                </tbody>
                </table>
            </div>
        </div>
    </div>
        @include('dashboard.component.copyright')
      </div><!-- slim-mainpanel -->
    </div><!-- slim-body -->
@endsection

@push('styles')

    <link href="{{ asset('dashboard/lib/bootstrap-tagsinput/css/bootstrap-tagsinput.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/medium-editor/css/medium-editor.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/medium-editor/css/default.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/select2/css/select2.min.css') }}" rel="stylesheet">

    <style type="text/css">

      .editabl-wrapper textarea {
        display: none;
      }

      .bootstrap-tagsinput {
          border-radius: 0;
      }

    </style>

@endpush

@push('scripts')

    <script src="{{ asset('dashboard/lib/bootstrap-tagsinput/js/bootstrap-tagsinput.js') }}"></script>
    <script src="{{ asset('dashboard/lib/medium-editor/js/medium-editor.js') }}"></script>
    <script src="{{ asset('dashboard/lib/select2/js/select2.full.min.js') }}"></script>


    <script type="text/javascript">

        // Select2 by showing the search
        $('.select2-show-search').select2({
          minimumResultsForSearch: ''
        });

    </script>



@endpush