@extends('layouts.surat')

@section('title')
    Surat Keluar -
@endsection

@section('content_surat')
    <div class="card">
        <div class="card-body">
            <form id="search_form">
                @csrf
                <div class="row">
                    <div class="col-md-2">
                        <x-form-group id="no_surat" caption="No.Surat">
                            <x-input name="no_surat" />
                        </x-form-group>
                    </div>
                    <div class="col-md-2">
                        <x-form-group id="no_agenda" caption="No.Agenda">
                            <x-input name="no_agenda" />
                        </x-form-group>
                    </div>
                    <div class="col-md-3">
                        <x-form-group id="perihal" caption="Perihal">
                            <x-input name="perihal" />
                        </x-form-group>
                    </div>
                    <div class="col-md-2">
                        <x-form-group id="kendali_aktif" caption="Status Surat">
                            @php($kendali_aktif = array('' => 'Semua Surat', '1' => 'Belum Direspon'))
                            @php($kendali_selected = 1)
                            @if(auth()->user()->id == 2)
                                @php($kendali_selected = '')
                            @endif
                            <x-select name="kendali_aktif" class="select2" :options="$kendali_aktif" :value="$kendali_selected" />
                        </x-form-group>
                    </div>
                    <div class="col-md-2">
                        <x-form-group id="status_terakhir" caption="Status Terakhir">
                            @php($status_terakhir = array('' => 'Semua', 'Permintaan Verifikasi' => 'Permintaan Verifikasi', 'Verifikasi Final' => 'Verifikasi Final', 'Terkirim' => 'Terkirim'))
                            <x-select name="status_terakhir" class="select2" :options="$status_terakhir" />
                        </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 id="surat_keluar_table"></div>
        </div>
    </div>
@endsection

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

        let $search_form = $('#search_form'),
            $surat_keluar_table = $('#surat_keluar_table');
        $search_form.submit((e) => {
            e.preventDefault();
            search_surat();
        });

        selected_page = 1;
        search_surat = (page = 1) => {
            if (page.toString() === '+1') selected_page++
            else if(page.toString() === '-1') selected_page--;
            else selected_page = page;

            $surat_keluar_table.html('Loading ...');
            let data = getFormData($search_form);
            data.paginate = 10;
            $.post("{{ route('surat.keluar.search') }}?page=" +selected_page, data, (result) => {
                $surat_keluar_table.html(result);
            }).fail((xhr) => {
                $surat_keluar_table.html(xhr.responseText);
            });
        }
        search_surat();
    </script>
@endpush