@extends('layout.base')

@section('action')
    {{-- <button class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal" data-bs-target="#modalAdd">
        <i class="fas fa-plus"></i> Add
    </button> --}}
    <button id="btnExport" class="btn btn-light-success btn-sm rounded">
        <i class="fas fa-file-excel"></i> Export
    </button>
@endsection

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="card card-flush">
        <div class="card-header">
            <div class="w-100 p-5">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title fw-bold mb-1">Volunteer List</h3>
                    <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                        <li class="nav-item">
                            <a class="nav-link table-list active" data-action="pending" data-bs-toggle="tab" href="#pending_tab">Pending</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link table-list" data-action="shortlist" data-bs-toggle="tab" href="#approve_tab">ShortList</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link table-list" data-action="approve" data-bs-toggle="tab" href="#approve_tab">Approved</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="informationTable">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Title</th>
                        <th>Name</th>
                        <th>Nasionality</th>
                        <th>Gender</th>
                        <th>Educational Background</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>

            </table>
        </div>
    </div>

    <!-- Modal for Preview -->
    <div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="participant">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewModalLabel">File Preview</h5>
                </div>
                <div class="modal-body">
                    <div id="previewContent"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const InformationUrls = {
            _datatable: "{{ route('volunteer-list.datatable') }}",
            _export: "{{ route('volunteer-list.excel', ['type' => 'paramType']) }}",
        }

        $(document).ready(function() {
            let view = "pending"
            const datatable = $('#informationTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: InformationUrls._datatable,
                    type: 'GET',
                    data: function(data) {
                        data.view = view;
                        return data;
                    }
                },
                ordering: [],
                columns: [
                    {
                        data: "DT_RowIndex",
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: "title",
                        name: "title"
                    },
                    {
                        data: "given_name",
                        name: "given_name"
                    },
                    {
                        data: "nationality",
                        name: "nationality"
                    },
                    {
                        data: "gender",
                        name: "gender"
                    },
                    {
                        data: "educations",
                        name: "educations"
                    },
                    {
                        data: "status",
                        name: "status"
                    },
                    {
                        data: "action",
                        name: "action"
                    },
                ],
            });

            $(document).on('click', '.table-list', function() {
                view = $(this).data('action')
                datatable.ajax.reload()
            })

            $(document).on('click', '#btnExport', function() {
                window.location = InformationUrls._export.replace("paramType", view);
            })
        });
    </script>
@endsection