@extends('layouts.master')

@section('title', 'Data Ijin Tinggal')
{{-- @section('content-header', 'Template') --}}

@section('style-plugins')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
<!-- SweetAlert2 -->
<link rel="stylesheet" href="{{ asset('assets/plugins/sweetalert2/themes/dark.css') }}">
<!-- Select2 -->
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="{{ asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
@endsection

@section('style-custom')

@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Data Ijin Tinggal</h3>
                </div>
                <form action="{{ url('ijin-tinggal/simpan') }}" id="form-intal" method="POST" autocomplete="off">
                    @csrf
                    @method('patch')
                    <input type="hidden" name="dataintal_id" id="dataintal_id" value="{{ $dataIntal->id }}">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="nopermohonan">No. Permohonan</label>
                            <input type="text" class="form-control-plaintext" name="nopermohonan" id="nopermohonan" placeholder="-" readonly value="{{ $dataIntal->no_permohonan }}">
                        </div>
                        <div class="form-group">
                            <label for="nama">Nama</label>
                            <input type="text" class="form-control-plaintext" name="nama" id="nama" placeholder="-" readonly value="{{ $dataIntal->nama_pemohon }}">
                        </div>
                        <div class="form-group">
                            <label for="tgl_lahir">Tanggal Lahir</label>
                            <input type="text" class="form-control-plaintext" name="tgl_lahir" id="tgl_lahir" placeholder="-" readonly value="{{ $dataIntal->tgl_lahir }}">
                        </div>
                        <div class="form-group">
                            <label for="kebangsaan">Kebangsaan</label>
                            <input type="text" class="form-control-plaintext" name="kebangsaan" id="kebangsaan" placeholder="-" readonly value="{{ $dataIntal->kebangsaan }}">
                        </div>
                        <div class="form-group">
                            <label for="nopaspor">No. Paspor</label>
                            <input type="text" class="form-control-plaintext" name="nopaspor" id="nopaspor" placeholder="-. Paspor" readonly value="{{ $dataIntal->no_paspor }}">
                        </div>
                        <div class="form-group">
                            <label for="niora">NIORA</label>
                            <input type="text" class="form-control-plaintext" name="niora" id="niora" placeholder="-" readonly value="{{ $dataIntal->niora }}">
                        </div>
                        <div class="form-group">
                            <label for="dokim">DOKIM</label>
                            <input type="text" class="form-control-plaintext" name="dokim" id="dokim" placeholder="-"" readonly value="{{ $dataIntal->dokim_no }}">
                        </div>
                        <div class="form-group">
                            <label for="layanan">Layanan</label>
                            <textarea class="form-control-plaintext" rows="1" name="layanan" id="layanan" placeholder="-" wrap="soft" readonly> {{ $dataIntal->nama_layanan }}</textarea>
                        </div>
                        <div class="form-group">
                            <label for="telepon">Telepon</label>
                            <input type="text" class="form-control" name="telepon" id="telepon" placeholder="-" value="{{ $dataIntal->no_hp }}">
                            @if ($dataIntal->menerima_pesan == '1')
                                <small id="helpTelepon" class="form-text text-success">Menerima Notifikasi</small>
                            @else
                                <small id="helpTelepon" class="form-text text-danger">Tidak Menerima Notifikasi</small>
                            @endif
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <a href="{{ url('ijin-tinggal') }}" class="btn btn-info" id="btBatal">Kembali</a>
                        <button type="submit" class="btn btn-danger" id="btUpdate">Update</button>
                    </div>
                </form>
                <div class="overlay dark" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Tahapan Layanan</h3>
                    <div class="card-tools">
                        <button class="btn btn-tool btn-refresh"><i class="fas fa-sync-alt"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Seq</th>
                                <th>Nama Tahapan</th>
                                <th>Status</th>
                                <th>Notifikasi</th>
                            </tr>
                        </thead>
                        <tbody id="list-tahapan">
                            @foreach ($dataIntal->tahapan()->orderBy('seq','asc')->get() as $tahapan)
                                <tr class="{{ ($tahapan->seq==$dataIntal->next_seq?'text-info':($tahapan->seq<$dataIntal->next_seq?'text-success':'text-danger')) }}">
                                    <td>{{ $tahapan->seq }}</td>
                                    <td>{{ $tahapan->nama_tahapan }}</td>
                                    <td>
                                        {!! ($tahapan->seq==$dataIntal->next_seq?'<i class="fas fa-arrow-right"></i>':($tahapan->seq<$dataIntal->next_seq?'<i class="fas fa-check"></i>':'<i class="fas fa-minus-circle"></i>')) !!}
                                    </td>
                                    <td>
                                        @switch($tahapan->pesan)
                                            @case('tidak')
                                                <span class="badge badge-danger">{{ ucfirst($tahapan->pesan) }}</span>
                                                @break
                                            @case('belum')
                                                <span class="badge badge-warning">{{ ucfirst($tahapan->pesan) }}</span>
                                                <button class="btn btn-warning btn-xs btn-kirim ml-2" data-tahapan="{{ $tahapan->id }}">Kirim <i class="far fa-paper-plane"></i></button>
                                                @break
                                            @default
                                                <span class="badge badge-success">{{ ucfirst($tahapan->pesan) }}</span>
                                                <button class="btn btn-success btn-xs btn-kirim ml-2" data-tahapan="{{ $tahapan->id }}">Kirim Ulang <i class="far fa-share-square"></i></button>
                                                @break
                                        @endswitch
                                        {{-- <span class="badge {{ ($tahapan->pesan=='tidak'?'badge-danger':($tahapan->pesan=='belum'?'badge-warning':'badge-success')) }}">{{ ucfirst($tahapan->pesan) }}</span> --}}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="overlay dark" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-plugins')
<!-- DataTables  & Plugins -->
<script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('assets/plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
<!-- SweetAlert2 -->
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
<!-- Select2 -->
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<!-- Validation -->
<script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-validation/localization/messages_id.js') }}"></script>
<script src="{{ asset('assets/plugins/autosize/autosize.js') }}"></script>
@endsection

@section('script-custom')
<script>
    $(function () {
        $(".overlay").hide();
        autosize($('textarea'));
        $("#form-intal").validate({
            rules: {
                telepon: {
                    required: true,
                    digits: true,
                },
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

        $(".btn-refresh").on("click", function (evt) {
            evt.preventDefault();
            $(".overlay").show();
            $.ajax({
                type: "post",
                url: "{{ url('ijin-tinggal/ajax/list-tahapan-intal') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    dataintal_id: "{{ $dataIntal->id }}"
                },
                success: function (response) {
                    $("#list-tahapan").html(response);
                },
                complete: function (response) { $(".overlay").hide(); }
            });
        });

        $("body").on("click",".btn-kirim", function (evt) {
            evt.preventDefault();
            $(".overlay").show();
            $.ajax({
                type: "post",
                url: "{{ url('ijin-tinggal/ajax/kirim-pesan') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    dataintal_id: "{{ $dataIntal->id }}",
                    datatahapan_id: $(this).data("tahapan")
                },
                success: function (response) {
                    if (response == "error") {
                        Swal.fire('ERROR!','Gagal mengirim pesan!','error');
                    } else {
                        Swal.fire('SUKSES!','Pesan akan terkirim ke: ' + response,'success');
                    }
                },
                complete: function (response) { $(".overlay").hide(); }
            });
        });
    });
</script>
@endsection