@extends('layouts.admin')

@section('content')
    <div class="row mb-3">
        <div class="col-md-6">
            <h4 id="page_title">Anggota</h4>
        </div>
        <div class="col-md-6 text-right">
            <button class="btn btn-secondary mr-3" type="button" onclick="modal_import()" id="button_new">Import Anggota</button>
            <button class="btn btn-primary" type="button" onclick="info_anggota()" id="button_new">Tambah</button>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div id="info_anggota"></div>
            <form id="search_anggota" class="mb-3">
                @csrf
                <div class="row">
                    <div class="col-md-2">
                        <x-input name="no_anggota" prefix="search_" caption="Cari No.Anggota" />
                    </div>
                    <div class="col-md-8">
                        <x-input name="nama" prefix="search_" caption="Cari Nama" />
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-block btn-primary">Cari</button>
                    </div>
                </div>
            </form>
            <div id="table_anggota"></div>
        </div>
    </div>
@endsection

@push('modals')
    <div class="modal fade" tabindex="-1" id="modal_import">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tahapan Import Data</h5>
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times"></i>
                    </div>
                </div>
                <div class="modal-body">
                    <form action="{{ route('koperasi.anggota.import_excel') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <table class="table table-borderless">
                            <tr>
                                <td>1. Download format excel</td>
                                <td class="py-1 text-end text-nowrap">
                                    <a class="btn btn-sm btn-primary text-white" target="_blank" href="{{ route('koperasi.anggota.format_excel') }}"><i class="fa fa-download"></i> Download</a>
                                </td>
                            </tr>
                            <tr>
                                <td>2. Isi file excel tersebut</td>
                                <td class="py-1 text-end"></td>
                            </tr>
                            <tr>
                                <td>3. Upload file excel</td>
                                <td class="py-1 text-end"></td>
                            </tr>
                            <tr>
                                <td class="py-0">
                                    <x-input type="file" name="file_excel" required />
                                </td>
                                <td class="py-1 text-end text-nowrap">
                                    <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-upload"></i> Upload</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endpush

@push('scripts')
    <script>
        let _token = '{{ csrf_token() }}', paginate = 10, selected_page = 1;
        let $info_anggota = $('#info_anggota'),
            $table_anggota = $('#table_anggota'),
            $search_anggota = $('#search_anggota'),
            $page_title = $('#page_title'),
            $button_new = $('#button_new');

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

            let data = get_form_data($search_anggota);
            data.paginate = paginate;
            $.post("{{ route('koperasi.anggota.search') }}?page=" + selected_page, data, (result) => {
                $table_anggota.html(result);
            }).fail((xhr) => {
                $table_anggota.html(xhr.responseText);
            });
        }

        let info_anggota = (id = '') => {
            $button_new.hide();
            $table_anggota.hide();
            $search_anggota.hide();
            $page_title.html((id === '' ? 'Tambah' : 'Ubah') + ' Anggota');
            $.post("{{ route('koperasi.anggota.info') }}", {
                _token, id
            }, (result) => {
                $info_anggota.html(result);
            }).fail((xhr) => {
                $info_anggota.html(xhr.responseText);
            });
        }

        let init_anggota = () => {
            search_anggota(selected_page);
            $info_anggota.html('');
            $button_new.show();
            $table_anggota.show();
            $search_anggota.show();
            $page_title.html('Anggota');
        }

        let modal_import = () => {
            $('#modal_import').modal('show');
        }

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

        init_form_element();
        init_anggota();
    </script>
@endpush