@extends('layouts.master')

@section('title', 'Jamaah')

@section('content-header','Manajemen Jamaah')

@section('plugin-styles')
<!-- DataTables -->
<link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css')}}">
<!-- Select2 -->
<link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
{{-- <link rel="stylesheet" href="{{asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}"> --}}
<!-- DateRange Picker -->
<link rel="stylesheet" href="{{asset('plugins/daterangepicker/daterangepicker.css')}}">
@endsection

@section('content')
<!-- Default box -->
<div class="card card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-id-card"></i> Data Jamaah</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" id="btn-refresh" data-toggle="tooltip" data-trigger="hover" data-original-title="Refresh"><i class="fas fa-sync-alt"></i></button>
        </div>
    </div>
    <div class="card-body">
        <div class="mailbox-controls">
            <div class="row">
                @if (Auth::user()->kota_id == '1')
                    <div class="col-md-3 col-sm-6">
                        <div class="form-group">
                            <label>Filter Kota :</label>
                            <select id="filterKota" class="form-control select2bs4" data-placeholder="Kota" data-dropdown-css-class="select2-primary" style="width: 100%;">
                                <option value="0">Semua Kota</option>
                                @foreach(Haji\Model\Kota::where('id','>','1')->get() as $kota)
                                    <option value="{{$kota->id}}">{{$kota->kota}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                @else
                    <input type="hidden" id="filterKota" value="{{Auth::user()->kota_id}}">
                @endif
                <div class="col-md-3 col-sm-6">
                    <div class="form-group">
                        <label>Filter Status :</label>
                        <select id="filterStatus" class="form-control select2bs4" data-placeholder="status" data-dropdown-css-class="select2-primary" style="width: 100%;">
                            <option value="0">Semua Status</option>
                            @foreach(Haji\Model\Status::all() as $status)
                                <option value="{{$status->id}}">{{$status->status}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            @if (Laratrust::can('pendaftaran|entry-data'))
                <a href="{{ url('jamaah/pendaftaran') }}" class="btn btn-warning"><i class="fas fa-plus"></i> Pendaftaran Jamaah</a>
            @endif
        </div>
        <table id="table-jamaah" class="table table-bordered table-hover">
            <thead class="thead-dark">
                <tr>
                    <th>No. Porsi</th>
                    <th>No. Permohonan</th>
                    <th>No. Paspor</th>
                    <th>Nama</th>
                    <th>Tempat, Tgl. Lahir</th>
                    <th>Umur (Th)</th>
                    <th>Kota</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot class="thead-dark">
                <tr>
                    <th>No. Porsi</th>
                    <th>No. Permohonan</th>
                    <th>No. Paspor</th>
                    <th>Nama</th>
                    <th>Tempat, Tgl. Lahir</th>
                    <th>Umur (Th)</th>
                    <th>Kota</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- /.card-body -->
    <div class="card-footer">
        @if (Laratrust::can('pendaftaran|entry-data'))
            <a href="{{ url('jamaah/pendaftaran') }}" class="btn btn-warning"><i class="fas fa-plus"></i> Pendaftaran Jamaah</a>
        @endif
    </div>
    <!-- /.card-footer-->
</div>
<div class="modal fade" id="hapus-modal">
    <div class="modal-dialog">
        <div class="modal-content bg-danger">
            <div class="modal-header">
                <h4 class="modal-title" id="hapus-title">Hapus Jamaah</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="id" id="hapus-id">
                <h4>No Porsi : <strong id="hapus-noporsi"></strong></h4>
                <p>Nama : <span id="hapus-nama"></span></p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-outline-light" id="hapus-data">Hapus</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
@endsection

@section('plugin-scripts')
<!-- DataTables -->
<script src="{{asset('plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js')}}"></script>
<!-- Select2 -->
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
<!-- DateRange Picker -->
<script src="{{asset('plugins/daterangepicker/moment.min.js')}}"></script>
<script src="{{asset('plugins/daterangepicker/daterangepicker.js')}}"></script>
<!-- JQuery Validate -->
<script src="{{ asset('plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-validation/localization/messages_id.min.js') }}"></script>
@endsection

@section('custom-script')
<script type="text/javascript">
    $(function() {
        'use strict';
        $('.select2bs4').select2();

        var oTable = $("#table-jamaah").DataTable({
            "ajax": {
                url: "{{ url('jamaah/ajax/tabel-jamaah') }}",
                type: "POST",
                data : function (dt) {
                    dt._token = "{{ csrf_token() }}";
                    dt.kota = $("#filterKota").val();
                    dt.status = $("#filterStatus").val();
                }
            },
            "processing": true,
            "serverSide": true,
            "order": [[ 0, "desc" ]],
            "columnDefs": [
                { "orderable": false, "targets": 4 },
                { "orderable": false, "targets": 8 },
                { "searchable": false, "targets": 8 },
            ]
        });

        $("#table-jamaah_filter input").unbind().bind('keyup', function(e) {
            //e.preventDefault();
            var code = e.keyCode || e.which;
            if(code == 13 && this.value !== "") {
                oTable.search( this.value ).draw();
            }
            if(this.value == "") {
                oTable.search("").draw();
            }
            // console.log(this.value);
            return;
        });

        $("#btn-refresh").on('click', function(event) {
            event.preventDefault();
            oTable.ajax.reload();
        });

        $("#filterKota").on('change', function(event) {
            oTable.ajax.reload();
        });

        $("#filterStatus").on('change', function(event) {
            oTable.ajax.reload();
        });

        $("#hapus-data").hide();
        $("#hapus-modal").on("show.bs.modal", function(e) {
            var button = $(e.relatedTarget);
            // console.log(button.data("bap"));
            $.ajax({
                url: "{{ url('jamaah/ajax/data-jamaah') }}",
                type: "post",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: button.data("jamaah")
                },
                success: function(dt){
                    $("#hapus-data").hide();
                    if (dt == "error") {
                        $("#hapus-title").text("ERROR");
                        $("#hapus-id").val('');
                        $("#hapus-noporsi").text('');
                        $("#hapus-nama").text('');
                        $("#hapus-data").hide();
                        
                    } else {
                        $("#detail-title").text("Hapus Jamaah");
                        $("#hapus-id").val(dt.id);
                        $("#hapus-noporsi").text(dt.noporsi);
                        $("#hapus-nama").text(dt.nama);
                        $("#hapus-data").show('fast');
                    }
                }
            });
        });
        $("#hapus-data").on("click",function(evt){
            $.ajax({
                url: "{{ url('jamaah/ajax/hapus-jamaah') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    _method: "DELETE",
                    id: $("#hapus-id").val(),
                },
                success: function(ret){
                    if (ret == "error") {
                        $(document).Toasts('create', {
                            class: 'bg-danger',
                            title: 'Gagal',
                            autohide: true,
                            delay: 3000,
                            body: 'Gagal Mehapuskan Data Jamaah.',
                            icon: 'far fa-times-circle fa-lg',
                        });
                    } else {
                        $(document).Toasts('create', {
                            class: 'bg-success',
                            title: 'Sukses',
                            autohide: true,
                            delay: 3000,
                            body: 'Sukses Mehapuskan Data Jamaah.',
                            icon: 'far fa-check-circle fa-lg',
                        });
                        oTable.ajax.reload();
                    }
                }
            });
            $("#hapus-modal").modal("hide");
        });
    });
</script>
@endsection