@extends('layouts.surat')

@section('title')
    Monitoring Penugasan -
@endsection

@section('content_surat')
    <div class="container-fluid">
        <div class="card" id="card_progres">
            <div class="card-header" id="monitoring_search">
                <h5 class="mt-0 mb-4"><i class="mdi mdi-database-search mr-2"></i> Search</h5>
                <form id="search_form">
                    @csrf
                    <div class="row">
                        <div class="col-md-3">
                            @if ( in_array(auth()->user()->pegawai->jabatan_pegawai->satuan_kerja->id, [11, 4, 2780]))
                                <x-form-group id="pegawai" caption="Karyawan">
                                    <x-input name="nama_pegawai" onclick="open_pegawai_modal(1)" />
                                    <x-input name="pegawai_id" type="hidden" />
                                </x-form-group>
                            @else
                                <x-form-group id="pegawai" caption="Karyawan">
                                    <x-input name="nama_pegawai" value="{{ auth()->user()->pegawai->nama }}" readonly />
                                    <x-input name="pegawai_id" value="{{ auth()->user()->pegawai->id }}" type="hidden" />
                                </x-form-group>
                            @endif
                        </div>
                        <div class="col-md-3">
                            <x-form-group id="jenis" caption="Jenis Penugasan">
                                <x-input name="jenis" />
                            </x-form-group>
                        </div>
                        <div class="col-md-3">
                            <x-form-group id="judul" caption="Judul">
                                <x-input name="judul" />
                            </x-form-group>
                        </div>
                        <div class="col-md-2">
                            <x-form-group id="status" caption="Status">
                                <x-select name="status" :options="$status"  class="select2" />
                            </x-form-group>
                        </div>
                        <div class="col-md-1">
                            <br>
                            <button class="btn btn-block btn-primary mt-2" type="submit">Cari</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <h5 class="mt-0 mb-4"><i class="mdi mdi-database mr-2"></i> Data {{ $title }}</h5>
                <div id="progres_draft_table"></div>
            </div>
        </div>
        <div id="progres_info"></div>
    </div>
@endsection

@include('components.custom._modal_pegawai')

@push('scripts')
    <script>
        init_form_element();

        let selectedPage = 1, _token = '{{ csrf_token() }}';
        let $search_form = $('#search_form'),
            $progres_draft_table = $('#progres_draft_table'),
            $card_progres = $('#card_progres'),
            $progres_info = $('#progres_info');

        let open_pegawai_modal = (id = '') => {
            $('#pegawai_id').val('');
            $('#nama_pegawai').val('');
            $('#modal_pegawai').modal('show');
            if (id == 1) {
                $('a[id=cek]').hide();
            }
        }

        let select_search_pegawai = (id) => {
            $.post("{{ url('global/pegawai') }}/" + id, {_token}, (result) => {
                $('#pegawai_id').val(id);
                $('#nama_pegawai').val(result.nama);
                $('#modal_pegawai').modal('toggle');
            })
        }

        $search_form.submit((e) => {
            e.preventDefault();
            search_progres();
        });

        search_progres = () => {
            $progres_draft_table.html('Loading ...');
            let data = getFormData($search_form);
            $.post("{{ route('monitoring.search') }}", data, (result) => {
                $progres_draft_table.html(result);
            }).fail((xhr) => {
                $progres_draft_table.html(xhr.responseText);
            });
        }

        let info_progres = (id = '') => {
            let url = '{{ $active_route }}';
            url += (id === '' ? '/create' : ('/' + id + '/edit'));

            $.get(url, (result) => {
                $progres_info.html(result);
                $card_progres.hide();
            }).fail((xhr) => {
                $progres_draft_table.html(xhr.responseText);
            });
        }

        selesai_penugasan = (id = '') => {
            Swal.fire({
                title: 'Anda yakin ?',
                text: "Anda akan menghentikan penugasan",
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Selesai',
                confirmButtonColor: '#d60b29'
            }).then((result) => {
                if(result.value === true) {
                    update_selesai_penugasan(id);
                }
            });
        }

        update_selesai_penugasan = (id) => {
            let is_selesai = 2;
            $.post("{{ url('penugasan/ubah_status') }}/"+id, {_token, is_selesai}, (result) => {
                search_progres();
            }).fail((xhr) => {
                $progres_draft_table.html(xhr.responseText);
            });
        }

        mulai_penugasan = (id = '') => {
            Swal.fire({
                title: 'Anda yakin ?',
                text: "Anda akan memulai penugasan",
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Mulai',
            }).then((result) => {
                if(result.value === true) {
                    update_mulai_penugasan(id);
                }
            });
        }

        update_mulai_penugasan = (id) => {
            let is_selesai = 1;
            $.post("{{ url('penugasan/ubah_status') }}/"+id, {_token, is_selesai}, (result) => {
                search_progres();
            }).fail((xhr) => {
                $progres_draft_table.html(xhr.responseText);
            });
        }

        search_progres();
    </script>
@endpush