@extends('admin.includes.main')
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12">
        <span class="mb-2 page-title menu-head">Surveys</span>
        @can('add survey')
        <a class="btn btn-primary float-right" id="create_survey" href="javascript:;">Create Survey</a>
        @endcan
        <p class="card-text"></p>
        <div class="row my-4">
          <!-- Small table -->
          <div class="col-md-12">
            <div class="card shadow">
              <div class="card-body">
                <!-- table -->
                <table class="table datatables" id="dataTable-1">
                  <thead>
                    <tr>
                      <th>Empolyee Name</th>
                      <th>Response</th>
                      <th>Pending</th>
                      <th>Action</th>
                      
                      
                    </tr>
                  </thead>
                  <tbody>
                        @foreach ($surveys as $item)
                        <tr>
                            <td><a target="_blank" href="{{ route('admin.survey_form', ['id' => $item->id]) }}" class="view-form">{{ $item->employee_name }}</a></td>
                            <td>{{ $item->response->count() }}</td>
                            <td>{{ $item->pending->count() }}</td>
                            <td>
                              
                              <a class="btn btn-primary" href="{{ route('admin.survey', ['id' => $item->id]) }}">Feedback</a>
                              
                              @can('send surveys')
                                <a class="btn btn-success send-form" ref="{{ $item->id }}" href="javascript:;">Send</a>
                              @endcan
                            </td>
                            
                            {{-- <td>{{ $item->created_at->format('d M, Y') }}</td> --}}
                            
                        </tr>
                        @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div> <!-- simple table -->
        </div> <!-- end section -->
      </div> <!-- .col-12 -->
    </div> <!-- .row -->
</div>
<div class="modal fade" id="survey_modal" tabindex="-1" role="dialog" aria-labelledby="survey_modal" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <form action="{{ route("admin.send_survey_form") }}" method="POST" id="send_survey_form">
      @csrf
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Survey Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="survey_modal_body">
        <div class="row">

          <input type="hidden" name="survey" id="survey">
          <div class="col-md-6">
            <div class="mb-3">
                <label class="form-label" for="name">Clent Name</label>
                <input name="name" type="text" id="name" class="form-control">
                <span class="invalid-feedback d-none" id="name-error" role="alert"></span>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
                <label class="form-label" for="name">Year</label>
                <input name="year" type="text" id="year" class="form-control">
                <span class="invalid-feedback d-none" id="year-error" role="alert"></span>
            </div>
          </div>
          <div class="col-12">
            <div class="mb-3">
                <label class="form-label" for="name">Clent Email</label>
                <input name="email" type="email" id="email" class="form-control">
                <span class="invalid-feedback d-none" id="email-error" role="alert"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="submit">Send</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
    </form>
  </div>
</div>
<div class="modal fade" id="add_survey_modal" tabindex="-1" role="dialog" aria-labelledby="survey_modal" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <form action="{{ route("admin.post_survey") }}" method="POST" id="post_survey_form">
      @csrf
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Survey Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="add_survey_modal_body">
        <div class="row">

          <input type="hidden" name="survey" id="survey">
          <div class="col-md-6">
            <div class="mb-3">
                <label class="form-label" for="name">Employee Name</label>
                <input name="name" type="text" id="name" class="form-control">
                <span class="invalid-feedback d-none" id="name-error" role="alert"></span>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
                <label class="form-label" for="gender">Gender</label>
                <select name="gender" id="gender" class="form-control">
                  <option value="1">Male</option>
                  <option value="0">Female</option>
                </select>
                <span class="invalid-feedback d-none" id="year-error" role="alert"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="submit">Create</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
    </form>
  </div>
</div>

<script>
  function error_message(message, id) {
        $('#' + id).addClass('is-invalid');
        $('#' + id + '-error').html('<strong>' + message + '</strong>');
        $('#' + id + '-error').removeClass('d-none');
    }
  $('#send_survey_form').on('submit', function(e) {
    e.preventDefault();

    // Clear previous errors
    $('.form-control').removeClass('is-invalid');
    // Serialize the form data
    var formData = $(this).serialize();
    var formAction = $(this).attr('action');
    // alert(formAction);
    $('.loader').show();
    $.ajax({
        type: 'POST',
        url: formAction,
        data: formData,
        success: function(response) {
            $('.loader').hide();

            // If the response contains validation errors
            if (response.type == 1) {
                $.each(response.errors, function(key, value) {
                    // $('#' + key + '-error').text(value[0]);
                    error_message(value[0], key);
                });
            } else if (response.type == 2) {
                alert(response.message);

                window.location.reload();

            } else {
                alert(response.message);
                // alert(response.message);

            }
        },
        error: function(response){
            $('.loader').hide();
        }
    });
  });
  $('.send-form').click(function (e) { 
    e.preventDefault();
    var ref = $(this).attr('ref');
    if (ref) {
      $('#survey').val(ref);
    $('#survey_modal').modal('show');
    }
    
    // console.log('hare');
    
  }); 
  
  $('#create_survey').click(function (e) { 
    e.preventDefault();
    
    $('#add_survey_modal').modal('show');
    
    
  }); 

  $('#post_survey_form').on('submit', function(e) {
    e.preventDefault();

    // Clear previous errors
    $('.form-control').removeClass('is-invalid');
    // Serialize the form data
    var formData = $(this).serialize();
    var formAction = $(this).attr('action');
    // alert(formAction);
    $('.loader').show();
    $.ajax({
        type: 'POST',
        url: formAction,
        data: formData,
        success: function(response) {
            $('.loader').hide();

            // If the response contains validation errors
            if (response.type == 1) {
                $.each(response.errors, function(key, value) {
                    // $('#' + key + '-error').text(value[0]);
                    error_message(value[0], key);
                });
            } else if (response.type == 2) {
                alert(response.message);

                window.location.reload();

            } else {
                alert(response.message);
                // alert(response.message);

            }
        },
        error: function(response){
            $('.loader').hide();
        }
    });
  });
  
  
</script>
@endsection