@extends('layouts.master_panel')

@section('title') Gestion appels téléphoniques @stop

@section('CSS') 


<link rel="stylesheet" type="text/css" href="{{url('/')}}/js/datatables/dataTables.bootstrap4.min.css">

<link rel="stylesheet" href="{{url('/')}}/assets/vendor/datepicker/tempusdominus-bootstrap-4.css" />


<link rel="stylesheet" href="{{url('/')}}/assets/vendor/summernote/css/summernote-bs4.css">

@stop

@section('JS') 


<script src="{{url('/')}}/js/datatables/jquery.dataTables.min.js"></script>
<script src="{{url('/')}}/js/datatables/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript" class="init">
  $(document).ready(function() {
    $("#example").dataTable({ "language": { "url": "{{ url('/') }}/js/datatables/lang/fr.json" },
      "order": [[ 0, "desc" ]]
    });
  });
  </script>


<script src="{{url('/')}}/assets/vendor/datepicker/moment.js"></script>
<script src="{{url('/')}}/assets/vendor/datepicker/tempusdominus-bootstrap-4.js"></script>
<script src="{{url('/')}}/assets/vendor/datepicker/datepicker.js"></script>

<script src="{{url('/')}}/assets/vendor/datepicker/fr.js"></script>

<script type="text/javascript">
    $(function () {
        $('#datetimepickerdate').datetimepicker({
          format: 'DD/M/YYYY',
          locale: 'fr'
      });
    });

</script>



<script type="text/javascript">
$(document).ready(function () { 


    $('#classID').on('change',function(e){

        var class_id = e.target.value;

        $.ajax({
          type: "GET",
          url: "{{ url('/') }}/ajax_students_class?class_id="+class_id,
          success: function(data) {  

            var subcat =  $('#UserID').empty();

            $.each(data, function(key, val) { 
              subcat.append('<option value ="'+val.id+'">'+val.last_name+' '+val.first_name+'</option>');
            });

            $('.selectpicker').selectpicker('refresh');

          }

        });

    
    });





});
</script>


@stop


@section('content')


                  <!-- ============================================================== -->
                  <!-- pageheader  -->
                  <!-- ============================================================== -->
                  <div class="row">
                      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                          <div class="page-header">
                              <h3 class="mb-2">Gestion appels téléphoniques</h3>
                           
                              <div class="page-breadcrumb">
                                  <nav aria-label="breadcrumb">
                                      <ol class="breadcrumb">
                                          <li class="breadcrumb-item active" aria-current="page">Gestion appels téléphoniques </li>
                                      </ol>
                                  </nav>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!-- ============================================================== -->
                  <!-- end pageheader  -->
                  <!-- ============================================================== -->


<div class="row">


<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
  <div class="card">

    <h5 class="card-header">
      <a href="#" class="btn btn-primary mb-1" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-plus"></i> Ajouter </a>
    </h5>

  <div class="card-body">


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Ajouter</h5>
      <a href="#" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
    </div>
    <div class="modal-body">

<form method="POST" action="{{ URL::route('agent_appels_telephoniques_store') }}">

{{ csrf_field() }}


<div class="form-row">


      <div class="col-md-6 mb-2">
        <label>Numéro de téléphone: <span class="text-danger">*</span></label>
        <div class="form-group">
          <div class="input-group">

          <input name="phone" type="text" value="{{ old('phone') }}" class="form-control" required="required" />
          
            <div class="input-group-append">
            <div class="input-group-text"><i class="fa fa-phone"></i></div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 mb-2">
        <label>Nom et prénom: <span class="text-danger">*</span></label>
        <div class="form-group">
          <div class="input-group">

          <input name="fullname" type="text" value="{{ old('fullname') }}" class="form-control" required="required" />
          
            <div class="input-group-append">
            <div class="input-group-text"><i class="fa fa-user"></i></div>
            </div>
          </div>
        </div>
      </div>

      

      <div class="col-md-12 mb-2">
        <label>Sujet: <span class="text-danger">*</span></label>
        <div class="form-group">
          <div class="input-group">

          <input name="sujet" type="text" value="{{ old('sujet') }}" class="form-control" required="required" />
          
            <div class="input-group-append">
            <div class="input-group-text"><i class="fa fa-info-circle"></i></div>
            </div>
          </div>
        </div>
      </div>


  <div class="clearfix"></div><hr>

  <div class="col-md-12 mb-1">
    <h5 class="text-danger text-center">Choisissez élève au cas où l'appel est lié</h5>
  </div>

  <div class="col-md-6 mb-3">
      <label>Classe:</label>
      <select name="class_id" id="classID" class="selectpicker" data-width="100%" >   
      <option value="">Choisir</option>
        @foreach($classes as $classe)
          <option value="{{ $classe->id }}">{{ $classe->name }}</option>
        @endforeach
      </select>

  </div>

  <div class="col-md-6 mb-3">
      <label>Élève:</label>
      <select name="student_id" id="UserID" class="selectpicker" data-width="100%" title="Choisir">   
      </select>
  </div>




<div class="col-md-12 mt-3">
    <button class="btn btn-success btn-block" type="submit">Valider</button>
</div>

</div>

</form>

    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-dark" data-dismiss="modal">Fermer</a>
    </div>
  </div>
</div>
</div>
<!-- End Modal -->



@if(Session::has('error'))

<div class="alert alert-danger alert-dismissible fade show text-center" role="alert">
  <strong>{{ Session::get('error') }}</strong>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

@endif

@if(Session::has('success'))
<div class="alert alert-success alert-dismissible fade show text-center" role="alert">
  <strong>{{ Session::get('success') }}</strong>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
@endif

<div class="clearfix"></div>

      <div class="table-responsive">
          <table id="example" class="table table-striped table-bordered first">
            <thead>
            <tr class="text-uppercase">
              <th style="display: none;">#</th>
              <th>Date</th>
              <th>Téléphone</th>
              <th>Nom et prénom</th>
              <th>Élève / Classe</th>
              <th style="max-width: 15%">Sujet</th>
              <th>état</th>
              <th>Action</th>
            </tr>
            </thead>
            <tbody>

@foreach($appels as $appel)

              <tr>

                  <td style="display: none;">{{ $appel->id }}</td>

                  <td>
                                          {{ $enTofr->format('d/m/Y H:i') }}
                  </td>

                  
                  <td>{{ $appel->phone }}</td>

                  <td></td>

                  <td>@if(!empty($appel->student_name)) {{ $appel->student_name . ' | ' . $appel->class_name }} @else - @endif</td>


                  <td></td>
                  
                  <td>

                    @if($appel->etat == 1)  
                    <span class="badge badge-success text-white"><i class="fa fa-check-circle"></i> effectué</span>
                    @else 
                    <span class="badge badge-warning text-white"><i class="fa fa-hourglass"></i> en attente</span>
                    @endif
                    

                  <td>

                    <a class="btn btn-success btn-sm mb-2" href="#" data-toggle="modal" data-target="#editDecision-{{ $appel->id }}"><i class="fas  fa-keyboard"></i> Traiter </a>



                    <a onclick="return confirm('Supprimer?')" href="{{ route('appels_telephoniques_delete', $appel->id) }}" class="btn btn-danger btn-sm mb-2"><i class="fa fa-trash"></i> Suppr. </a>

                  


<!-- Modal -->
<div class="modal fade" id="editDecision-{{ $appel->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelDecision-{{ $appel->id }}" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabelDecision-{{ $appel->id }}">Effectuer</h5>
      <a href="#" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
    </div>
    <div class="modal-body">

      
<form method="POST" action="{{ route('appels_telephoniques_effectuer', $appel->id) }}" >

@csrf


<div class="form-row">

  <div class="col-md-12 mb-3">
    <label>Sujet:</label>
    <p class="text-primary"></p>
  </div>



  <div class="col-md-12 mb-3">
    <label>Détails:</label>
    <div class="form-group">
      <textarea name="details" class="form-control" rows="4"></textarea>
    </div>
  </div>

</div>

<div class="form-row">
<div class="col-md-12">
    <button class="btn btn-success btn-block" type="submit" >Valider</button>
</div>
</div>

</form>
   
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-dark" data-dismiss="modal">Fermer</a>
    </div>
  </div>
</div>
</div>
<!-- End Modal -->





                  </td>

              </tr>

@endforeach
                  </tbody>
                  </table>
               </div>

    </div>
  </div>
</div>

                                     


</div><!-- END row -->
                
               

@stop