@extends('layout.master')

@section('title', 'List Santri')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{route('student.index')}}">Santri</a></li>
    <li class="breadcrumb-item active" aria-current="page">List Santri</li>
  </ol>
</nav>
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-6">
            <h6 class="card-title">List Keseluruhan Santri Voice Call</h6>
          </div>
          <div class="col-6">
            <button class="btn btn-success float-end" onclick="openModalInputSantri()">Tambah Santri Baru</button>
          </div>
        </div>
        <div class="table-responsive">
          <table id="students" class="table">
            <thead>
              <tr>
                <th>No</th>
                <th>Name</th>
                <th>Email</th>
                <th>Kategori</th>
                <th>Jenis Kelamin</th>
                <th>Action</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th>No</th>
                <th>Name</th>
                <th>Email</th>
                <th>Kategori</th>
                <th>Jenis Kelamin</th>
                <th>Action</th>
              </tr>
          </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@include('students.modal_input')
@include('students.modal_editinput')
@include('students.modal_view_student')

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/moment/moment-with-locales.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script>
    $(function() {
      $('#students tfoot th').each(function () {
        var title = $(this).text();
        var columnSearch = ['Name', 'Email'];
        if (columnSearch.includes(title)) {
          $(this).html('<input type="text" class="form-control" placeholder="Search ' + title + '" />');
        } else if (title === 'Kategori') {
          $(this).html('<select class="form-control"><option value="">All</option><option value="2">Tahfidz</option><option value="1">Tahsin</option></select>');
        } else if (title === 'Jenis Kelamin') {
          $(this).html('<select class="form-control"><option value="">All</option><option value="1">Laki-laki</option><option value="2">Perempuan</option></select>');
        }
      });
      var table = $('#students').DataTable({
        "aLengthMenu": [
          [10, 30, 50, -1],
          [10, 30, 50, "All"]
        ],
        "iDisplayLength": 10,
        "language": {
          search: ""
        },
        "dom": '<"html5buttons">lfrtip',
        "processing": true,
         "serverSide": true,
         "ajax": '{{route("student.ajaxRequest")}}' + '?service=students',
         "columns": [
            { data:'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            { data: 'name', name: 'name'},
            { data: 'email', name: 'email'},
            { data: 'studendt_category', name: 'studendt_category'},
            { data: 'gender', name: 'gender'},
            { data: 'action', name: 'action'},
         ],
         "initComplete": function(setting, json) {
            // Apply the search
            this.api()
                .columns()
                .every(function () {
                    var that = this;
                    $('input, select', this.footer()).on('keyup change clear', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
         }
      });
      $('#students').each(function() {
        var datatable = $(this);
        // SEARCH - Add the placeholder for Search and Turn this into in-line form control
        var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
        search_input.attr('placeholder', 'Search');
        search_input.removeClass('form-control-sm');
        // LENGTH - Inline-Form control
        var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
        length_sel.removeClass('form-control-sm');
      });
      @if ($errors->any())
            openModalInputSantri();
      @endif
      @if ($errors->editSantri->any())
            openModalEditSantri("{{$errors->editSantri->first('id')}}");
      @endif
      const propertySel2InputSantri = {
        width: '100%',
        dropdownParent: $('#inputsantri')
      };
      const propertySel2EditSantri = {
        width: '100%',
        dropdownParent: $('#editSantri')
      };
      $('.select2InputSantri').select2(propertySel2InputSantri);
      $('.select2EditSantri').select2(propertySel2EditSantri);
      const province = $('#provinceEdit, #province');
      const city = $('#cityEdit');
      var propertyForCity = {
        city : propertySel2InputSantri,
        cityEdit : propertySel2EditSantri
      };
      province.on('change', function(event, openModal, cityUpdate) {
          var citySelector = $(this).attr('data-city-selector');
          openModal  =  typeof openModal === "function" ? openModal : () => {};
          cityUpdate =  typeof cityUpdate === "function" ? cityUpdate : () => {};
          $(`#${citySelector}`).html('').select2({ ...propertyForCity[citySelector], ...{data: [{id:"", text: "Silahkan Pilih Kab/Kota", disabled: true, selected:true}]}});
          var provinceId = $(this).val();
          if (provinceId) {
            var url = '{!!route("ajax.province.city", ":idProvince")!!}';
            getCities = $.ajax({
                type: "GET",
                url: url.replace(":idProvince", provinceId),
                success: function (response) {
                  $(`#${citySelector}`).select2({...propertyForCity[citySelector], ...{data: response.results}});
                }
            });
            getCities.done(function () {
             cityUpdate();
             openModal();
            })
          } else {
            openModal();
          }
      });
    });

    function guidance(e) {
        $('#guidance').DataTable({
            "aLengthMenu": [
                [10, 30, 50, -1],
                [10, 30, 50, "All"]
            ],
            "iDisplayLength": 10,
            "language": {
                search: ""
            },
            "dom": '<"html5buttons">lfrtip',
            "processing": true,
            "serverSide": true,
            "ajax": '{{route("student.ajaxRequest")}}' + `?service=guidance&id=${e}`,
            "columns": [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'pengajar',
                    name: 'pengajar.name'
                },
                {
                    data: 'chapter_start',
                    name: 'chapter_start'
                },
                {
                    data: 'chapter_end',
                    name: 'chapter_end'
                },
                {
                    data: 'note',
                    name: 'note'
                },
                {
                    data: 'guidance_at',
                    name: 'guidance_at'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            "initComplete": function(settings, json) {
              feather.replace();
            },
            "bDestroy": true,
        });
        $('#guidance').each(function () {
            var datatable = $(this);
            // SEARCH - Add the placeholder for Search and Turn this into in-line form control
            var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
            search_input.attr('placeholder', 'Search');
            search_input.removeClass('form-control-sm');
            // LENGTH - Inline-Form control
            var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
            length_sel.removeClass('form-control-sm');
        });
        $('#showModalGuidance').attr('data-student-id', e);
        $('#showModalGuidance').modal('show');
    }

    function openModalInputSantri() {
      $('#inputsantri').removeAttr("hidden");
      $('#inputsantri').modal('show');
    }
    function showModalInputBimbingan() {
      $('#inputGuidance').modal('show');
    }

    function openModalEditSantri(e) {
      var url = "{{route('student.update', '?')}}";
      var urlEdit ="{{route('student.edit', '?')}}";
      $('#editSantriForm').attr('action', url.replace('?', e));
      $.ajax({
        type: "GET",
        url: "{{route('student.ajaxRequest')}}" + `?service=editStudent&id=${e}`,
        success: function (response) {
          $('#nameEdit').val(response.name);
          $('#emailEdit').val(response.email);
          $('#phoneEdit').val(response.phone);
          $('#genderEdit').val(response.gender.id).trigger('change');
          $('#place_of_birthEdit').val(response.place_of_birth);
          $('#date_of_birthEdit').val(response.date_of_birth);
          $("#educationEdit").val(response.education.id).trigger('change');
          $('#jobEdit').val(response.job);
          $('#addressEdit').val(response.address);
          $('#studendt_categoryEdit').val(response.studendt_category.id).trigger('change');
          $('#provinceEdit').val(null).trigger('change');
          const cityEditChange = () => {
            $('#cityEdit').val(response.city_id).trigger('change');
          };
          const openModal = () => {
            $('#editSantri').removeAttr("hidden");
            $('#editSantri').modal('show');
          };
          if (response.province_id !== null) {
            $('#provinceEdit').val(response.province_id).trigger('change', [openModal, cityEditChange]);
          } else {
            openModal();
          }
        }
      });
    }

    function openModalViewSantri(e) {
      $.ajax({
        type: "GET",
        url: "{{route('student.ajaxRequest')}}" + `?service=editStudent&id=${e}`,
        success: function (response) {
          moment.locale('id');
          if (response.province !== null) {
            var provinceName = response.province.name;
          } else {
            var provinceName = "-";
          }
          if (response.city !== null) {
            var cityName = response.city.name;
          } else {
            var cityName = "-";
          }
          $('#name_v').val(response.name);
          $('#email_v').val(response.email);
          $('#phone_v').val(response.phone);
          $('#gender_v').val(getValuOption(response.gender));
          $('#place_of_birth_v').val(response.place_of_birth);
          $('#date_of_birth_v').val(moment(response.date_of_birth).format('DD MMMM YYYY'));
          $("#education_v").val(getValuOption(response.education));
          $('#job_v').val(response.job);
          $('#address_v').val(response.address);
          $('#studendt_category_v').val(getValuOption(response.studendt_category));
          $('#provinsi_id_v').val(provinceName);
          $('#city_id_v').val(cityName);
          $('#viewSantri').removeAttr("hidden");
          $('#viewSantri').modal('show');
        }
      });
    }

    function getValuOption(e)
    {
      try {
        return e.key;
      } catch(err) {
        return null;
      }
    }

    // this is the id of the form
    $("#guidanceForm").submit(function(e) {
    
    e.preventDefault(); // avoid to execute the actual submit of the form.
    
    var studentId = $('#showModalGuidance').attr('data-student-id');
    var form = $(this);
    var actionUrl = "{{route('student.ajaxRequest')}}" + `?service=storeGuidance&id=${studentId}`;
    
    $.ajax({
        type: "POST",
        url: actionUrl,
        headers: {
          "Accept": "application/json"
        },
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
          $('#guidance').DataTable().ajax.reload();
          $('#inputGuidance').modal('hide');
          form.trigger("reset");
        },
        error: function(xhr, ajaxOptions, thrownError)
        {
          $.each(['chapter_start', 'chapter_end', 'note'], function(index, value) {
              $(`#${value}`).removeClass('is-invalid');
          });
          if (xhr.status == 422) {
            Object.entries(xhr.responseJSON.errors).forEach(entry => {
              const [key, value] = entry;
              $(`#${key}Message`).html(value);
              $(`#${key}`).addClass("is-invalid");
            });
          }
        }
    });
    
    });

    function deleteGuidance(e) {
      var urlDelete = "{{route('student.ajaxRequest')}}" + `?service=deleteGuidance&id=${e}`;
      $.ajaxSetup({
          headers: {
          'X-CSRF-TOKEN': '{{csrf_token()}}'
          }
          });
            Swal.fire({
                title             : "Apakah Anda Yakin ?",
                text              : "Data Yang Sudah Dihapus Tidak Bisa Dikembalikan!",
                icon              : "warning",
                showCancelButton  : true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor : "#d33",
                confirmButtonText : "Ya, Tetap Hapus!"
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        url    : urlDelete,
                        type   : "delete",
                        success: function(data) {
                          $('#guidance').DataTable().ajax.reload();
                          const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000
                          });
                          
                          Toast.fire({
                            icon: 'success',
                            title: data.message
                          })
                        }
                    })
                }
            })
    }

    function deleteStudent(e) {
      var urlDelete = "{{route('student.ajaxRequest')}}";
      $.ajaxSetup({
          headers: {
          'X-CSRF-TOKEN': '{{csrf_token()}}'
          }
          });
            Swal.fire({
                title             : "Apakah Anda Yakin ?",
                text              : "Data Yang Sudah Dihapus Tidak Bisa Dikembalikan!",
                icon              : "warning",
                showCancelButton  : true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor : "#d33",
                confirmButtonText : "Ya, Tetap Hapus!"
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        url    : urlDelete,
                        type   : "delete",
                        data : {service: "deleteStudent", id: e},
                        success: function(data) {
                          $('#students').DataTable().ajax.reload();
                          const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000
                          });
                          
                          Toast.fire({
                            icon: 'success',
                            title: data.message
                          })
                        }
                    })
                }
            })
    }
</script>
@endpush