@extends ('admin.master')

@section('styles')
    <!-- CSS Files -->
   
     
@stop

@section('content-main')
	<div class="container-fluid">
      <!-- Breadcrumbs-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Dashboard</a>
        </li>
        <li class="breadcrumb-item active">Filières</li>
      </ol>
		<!-- Example DataTables Card-->
      <div class="card mb-3">
        <div class="card-header">
          <i class="fa fa-table"></i> La liste des filières
        </div>

        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered"  id="mytable" width="100%" cellspacing="0">
              <thead>
                <tr>
                  <th width="30%">No</th>
                  <th width="35%">Intitule</th>                  
                  <th width="35%">Action</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>No</th>
                  <th>Intitule</th>                  
                  <th>Action</th>
                </tr>
              </tfoot>
              <tbody>
              </tbody>
               
            </table>
            {{ csrf_field() }}
          </div>
        </div>
        <div class="card-footer small text-muted">
          <button type="button" id="create_record" name="create_record" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
            Ajouter
          </button>
        </div>
      </div>
	  <!-- /tables-->
	  </div>


    <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <span id="form_result"></span>
          <form method="post"  id="sample_form" >
            @csrf
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Add New Record</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">             

                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label>Intitule</label>
                      <input type="text" class="form-control" name="intitule" id="intitule" placeholder="Intitule">
                    </div>
                  </div>         
                </div>
              
            </div>
            <div class="modal-footer">
              <input type="hidden" name="action" id="action" value="Add" />
              <input type="hidden" name="hidden_id" id="hidden_id" />
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <input type="submit" name="action_button" id="action_button" class="btn btn-warning" value="Add" />
              
            </div>
          </form>
        </div>
      </div>
    </div>

    <div id="confirmModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <p>Êtes-vous sûr de vouloir supprimer ces données?</p>                  
              </div>
              <div class="modal-footer">
               <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">OK</button>
                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              </div>
          </div>
      </div>
    </div>

@stop

@section('scripts')
<script src="{{URL::asset('admin/js/admin-datatables.js')}}"></script>

<script>
  $(function(){ 
      load_data();

      var token = $("meta[name='csrf-token']").attr("content");

      $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
      });

      function load_data(){
          $('#mytable').DataTable({
              processing:true,
              serverSide:true,
              pageLength: 5,
              ajax: {
                  url:"{{ route('admin.filiere.index')}}",                  
              },
              columns:[
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'intitule', name:'intitule'},                  
                  {data: 'action', name:'action', orderable:false, searchable: false}
              ]
          });
      }

      $('#create_record').click(function(){
        $('.modal-title').text('Add New Record');
        $('#action_button').val('Add');
        $('#action').val('Add');
        $('#form_result').html('');

        $('#formModal').modal('show');
      });

      $('#sample_form').on('submit', function(event){
        event.preventDefault();
        var action_url = '';

        if($('#action').val() == 'Add')
        {
         action_url = "{{ route('admin.filiere.store') }}";
        }

        if($('#action').val() == 'Edit')
        {
         action_url = "{{ route('admin.filiere.update') }}";
        }

        $.ajax({
         url: action_url,
         method:"POST",
         data:$(this).serialize(),
         dataType:"json",
         success:function(data)
         {
          var html = '';
          if(data.errors)
          {
           html = '<div class="alert alert-danger">';
           for(var count = 0; count < data.errors.length; count++)
           {
            html += '<p>' + data.errors[count] + '</p>';
           }
           html += '</div>';
          }
          if(data.success)
          {
           html = '<div class="alert alert-success">' + data.success + '</div>';
           $('#sample_form')[0].reset();
           $('#mytable').DataTable().ajax.reload();
          }
          $('#form_result').html(html);
         }
        });
       });

      $(document).on('click', '.edit', function(){
        var id = $(this).attr('id');
        $('#form_result').html('');
        $.ajax({
         url :"/administration/filiere/"+id+"/edit",
         dataType:"json",
         success:function(data)
         {
          $('#intitule').val(data.result.intitule);          
          $('#hidden_id').val(id);
          $('.modal-title').text('Edit Record');
          $('#action_button').val('Edit');
          $('#action').val('Edit');
          $('#formModal').modal('show');
         }
        })
      });

      var filiere_id;

      $(document).on('click', '.delete', function(){
        filiere_id = $(this).attr('id');
        $('#confirmModal').modal('show');
       });

      $('#ok_button').click(function(){
        $.ajax({        
         url:"/administration/filiere/destroy/"+filiere_id,
         beforeSend:function(){
          $('#ok_button').text('Deleting...');
         },
         success:function(data)
         {
          setTimeout(function(){
           $('#confirmModal').modal('hide');
           $('#mytable').DataTable().ajax.reload();
           alert('Data Deleted');
          }, 2000);
         }
        })
       });
 
  });
</script>
    
@stop