@extends('layouts.app')

@section('title', $state->name.' Members')

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>{{ $state->name.' Members' }}</h2>
                    <ol>
                        <li><a href="{{ route('home.index') }}">{{ __('Home') }}</a></li>
                        <li>
                            <a href="{{ route('dashboard.index') }}">{{ $state->name }} {{ __('Dasboard') }}</a>
                        </li>
                        <li>{{ __('Members') }}</li>
                    </ol>
                </div>
            </div>
        </section>

        <section class="service-details">
            <div class="container">
                <div class="row mb-3">
                    <div class="col">
                        @if(Auth::user()->hasStateOffice(['Governor', 'Secretary of State'], $state->id))
                        <a href="{{ route('members.export', $state->id) }}" class="btn btn-outline-primary rounded-0 mb-3">
                            <i class="bi bi-file-earmark-excel"></i>&nbsp;Export Members
                        </a>
                        @endif
                        {{-- @if(Auth::user()->hasStateOffice(['Governor'], $state->id))
                            <a href="#" class="btn btn-outline-primary rounded-0 mb-3" data-bs-toggle="modal" data-bs-target="#inviteModal">
                                <i class="bi bi-send"></i>&nbsp;&nbsp;Invite Member
                            </a>
                        @endif --}}
                        {{-- <div class="modal fade" id="inviteModal" tabindex="-1" aria-labelledby="inviteModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <form action="{{ route('members.invite', $state->id) }}" method="post">
                                        @csrf
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="inviteModalLabel">Invite A Member</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row mb-3 form-group">
                                                <div class="col">
                                                    <label for="email" class="form-label">Enter Member's Email Address</label>
                                                    <input type="email"
                                                        name="email"
                                                        id="email"
                                                        class="form-control rounded-0"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline-secondary rounded-0" data-bs-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-outline-primary rounded-0">Send Invitation</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div> --}}
                        <table class="table table-striped table-bordered table-sm" style="width:100%;font-size:small;" id="cacUsersTable">
                            <thead>
                            <tr>
                                <th scope="col">First Name</th>
                                <th scope="col">Last Name</th>
                                @if(Auth::user()->hasStateOffice(['Governor', 'Secretary of State'], $state->id))
                                <th scope="col">Phone</th>
                                @endif
                                <th scope="col">County</th>
                                <th scope="col">Joined</th>
                                <th scope="col" class="text-end">Actions</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@push('styles')
    <link href="https://cdn.datatables.net/2.0.0/css/dataTables.bootstrap5.css" rel="stylesheet">
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/2.0.0/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.0.0/js/dataTables.bootstrap5.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function () {
            let table = $('#cacUsersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('members.index') }}",
                columns: [
                    {data: 'first_name', name: 'first_name'},
                    {data: 'last_name', name: 'last_name'},
                    @if(Auth::user()->hasStateOffice(['Governor', 'Secretary of State'], $state->id))
                    {data: 'phone', name: 'phone'},
                    @endif
                    {data: 'county', name: 'county'},
                    {
                        name: 'created_at.timestamp',
                        data: {
                            _: 'created_at.display',
                            sort: 'created_at.timestamp'
                        }
                    },
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                order: [
                    [1, 'asc']
                ],
                lengthMenu: [
                    [50, 100, 250, 500, -1],
                    [50, 100, 250, 500, 'All']
                ],
                pageLength: 50
            });
        });

        $(document).on('click', '.deleteButton', function(event) {
            event.preventDefault();
            let id = $(this).attr('id');
            Swal.fire({
                title: "Are you sure?",
                text: "Are you sure you want to delete this? You will not be able to revert!",
                icon: "warning",
                buttons: true,
                showCancelButton: true,
            }).then(function(result) {
                if (result.value === true) {
                    $("form[name='deleteForm" + id + "']").submit();
                }
            });
        });
    </script>
@endpush