@extends('layouts.surat')

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

@push('styles')
    <link href="{{ asset('assets/libs/jquery-scrollbar/jquery.scrollbar.css') }}" rel="stylesheet" type="text/css" media="screen" />
    <link href="{{ asset('assets/css/calendar.css') }}" rel="stylesheet" type="text/css" media="screen" />
    <style>
        .calendar .calendar-container .view.month-view .tble .trow .tcell {
            height: 100px;
        }
    </style>
@endpush

@section('content_surat')
    <div class="card">
        <div class="card-body">
            <div class="">
                <h5 class="mt-0 mb-4"><i class="mdi mdi-database-search mr-2"></i> Search</h5>
                @if ( in_array(auth()->user()->pegawai->jabatan_pegawai->satuan_kerja->id, [11, 4, 2780]))
                    <x-form-group id="pegawai" caption="Pilih Karyawan">
                        <x-input name="cari_nama_pegawai" onclick="open_search_pegawai_modal()" />
                        <x-input name="cari_pegawai_id" type="hidden" />
                    </x-form-group>
                @else
                    <x-form-group id="pegawai" caption="Pilih Karyawan">
                        <x-input name="cari_nama_pegawai" value="{{ auth()->user()->pegawai->nama }}" readonly style="background-color:  #fcfcfc!important;" />
                        <x-input name="cari_pegawai_id" value="{{ auth()->user()->pegawai->id }}" type="hidden" />
                    </x-form-group>
                @endif
            </div><br>
            <div id="calendar" ></div>
        </div>
    </div>

    <div class="modal fade slide-up disable-scroll" id="modal_penugasan" role="dialog" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content-wrapper">
                <div class="modal-content">
                    <div class="modal-header clearfix text-left">
                        <h5 id="modal_penugasan_judul">Detail Penugasan</h5>
                    </div>
                    <div class="modal-body" id="info_penugasan" style="height: 500px;overflow-y: scroll;">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@include('components.custom._modal_search_pegawai')

@push('scripts')
    <script src="{{ asset('assets/libs/jquery-scrollbar/jquery.scrollbar.min.js') }}"></script>
    <script src="{{ asset('assets/libs/interactjs/interact.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/libs/moment/moment-with-locales.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages.calendar.js') }}"></script>
    <script>
        init_form_element();

        let $modal_penugasan = $('#modal_penugasan'),
            $info_penugasan = $('#info_penugasan'),
            $calender = $('#calender');

        init_search_calender = () => {
            $calender.html('Loading ...');
            let id = $('#cari_pegawai_id').val();
            console.log(id);
            $.post("{{ route('kalender_penugasan.search') }}", {
                _token: '{{ csrf_token() }}', pegawai_id: id,
            }, (result) => {
                let data = [];
                $.each(result, (i, value) => {
                    data.push({
                        title: value.judul,
                        class: 'bg-success text-white',
                        start: value.tanggal_selesai + 'T00:00:00',
                        end: value.tanggal_selesai + 'T23:59:59',
                        other: {
                            original: value
                        }
                    });
                });
                $('#calendar').pagescalendar({
                    events: data,
                    view:"month",
                    onViewRenderComplete: function() {

                    },
                    onEventClick: function(event) {
                        detail_event(event);
                    },
                    onEventDragComplete: function(event) {

                    },
                    onEventResizeComplete: function(event) {

                    },
                });
            }).fail((xhr) => {
                console.log(xhr.responseText);
            });
        }

        let open_search_pegawai_modal = (id) => {
            $('#cari_pegawai_id').val('');
            $('#cari_nama_pegawai').val('');
            $('#modal_cari_pegawai').modal('show');
        }

        let select_search_pegawai = (id) => {
            $.post("{{ url('modal/cari_pegawai') }}/" + id, {_token: '{{ csrf_token() }}'}, (result) => {
                $('#cari_pegawai_id').val(id);
                $('#cari_nama_pegawai').val(result.nama);
                $('#modal_cari_pegawai').modal('toggle');
                window.location.reload();
            })
        }

        let detail_event = (event) => {
            $.post("{{ route('kalender_penugasan.info') }}", {
                _token: '{{ csrf_token() }}', id: event.other.original.id
            }, (result) => {
                $modal_penugasan.modal('show');
                $info_penugasan.html(result);
            }).fail((xhr) => {
                $modal_penugasan.modal('show');
                $info_penugasan.html(xhr.responseText);
            });
        }

        init_search_calender();
    </script>
@endpush