@extends('layouts.index')

@section('title')
    {{ $title }} -
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">{{ $title }}</h4>
            </div>
        </div>
    </div>
    <table class="table bg-main" >
        <tr>
            <td class="bg-light">
                <button class="btn btn-sm btn-success float-right px-3" onclick="add_new()">Tambah</button>
                <button class="btn btn-sm btn-info float-right px-3 mr-3" onclick="toggle_search()">search</button>
                <h5 class="mt-0 mb-4"><i class="mdi mdi-database mr-2"></i> Data {{ $title }}</h5>
                <div id="tim_penugasan_auto_table"></div>
            </td>
            <td class="bg-light" id="tim_penugasan_auto_search">
                <h5 class="mt-0 mb-4"><i class="mdi mdi-database-search mr-2"></i> Search</h5>
                <form id="search_form">
                    @csrf
                    <x-form-group id="fungsi_penugasan" caption="Fungsi Penugasan">
                        <x-select class="select2" name="fungsi_penugasan_id" :options="$fungsi_penugasan" :default="'--Pilih Fungsi Penugasan--'" />
                    </x-form-group>

                    <x-form-group id="kelompok" caption="Kelompok Penugasan">
                        <x-select class="select2" name="kelompok" :options="$kelompok" :default="'--Pilih Kelompok Penugasan--'" />
                    </x-form-group>

                    <div class="text-right">
                        <button type="submit" class="btn btn-primary">Search</button>
                    </div>
                </form>
            </td>
            <td class="bg-light" id="tim_penugasan_auto_info" width="350px">
            </td>
        </tr>
    </table>
@endsection

@include('components.custom._modal_search_pegawai')

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

        // manage ui
        $tim_penugasan_auto_data = $('#tim_penugasan_auto_data');
        $tim_penugasan_auto_search = $('#tim_penugasan_auto_search');
        $tim_penugasan_auto_search.hide();
        toggle_search = () => {
            $tim_penugasan_auto_search.toggle();
        }

        let open_search_pegawai_modal = () => {
            $('#pegawai_id').val('');
            $('#nama_pegawai').val('');
            $('#modal_cari_pegawai').modal('show');
        }

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

        // search
        let selected_page = 1;
        $search_form = $('#search_form');
        $tim_penugasan_auto_table = $('#tim_penugasan_auto_table');
        search_tim_penugasan_auto = (page = 1) => {
            if (page.toString() === '+1') selected_page++;
            else if (page.toString() === '-1') selected_page--;
            else selected_page = page;

            let data = getFormData($search_form);
            data.paginate = 10;
            $.post("{{ route('tim_penugasan_auto.search') }}?page=" + selected_page, data, (result) => {
                $tim_penugasan_auto_table.html(result);
            }).fail((xhr) => {
                $tim_penugasan_auto_table.html(xhr.responseText);
            });
        }
        search_tim_penugasan_auto();
        $search_form.submit((e) => {
            e.preventDefault();
            search_tim_penugasan_auto();
        })

        // crud
        $tim_penugasan_auto_info = $('#tim_penugasan_auto_info');
        $tim_penugasan_auto_info.hide();
        add_new = () => {
            let data = {_token: '{{ csrf_token() }}'};
            $.post("{{ route('tim_penugasan_auto.info') }}", data, (result) => {
                $tim_penugasan_auto_info.html(result);
                $tim_penugasan_auto_info.show();
            }).fail((xhr) => {
                $tim_penugasan_auto_info.html(xhr.responseText);
                $tim_penugasan_auto_info.show();
            });
        }
        edit_tim_penugasan_auto = (id) => {
            let data = {_token: '{{ csrf_token() }}', id};
            $.post("{{ route('tim_penugasan_auto.info') }}", data, (result) => {
                $tim_penugasan_auto_info.html(result);
                $tim_penugasan_auto_info.show();
            }).fail((xhr) => {
                $tim_penugasan_auto_info.html(xhr.responseText);
                $tim_penugasan_auto_info.show();
            });
        }
        clear_form = () => {
            $tim_penugasan_auto_info.html('');
            $tim_penugasan_auto_info.hide();
        }
    </script>
@endpush