@extends('layout.app')
@section('title')
    {{ __('فريق الإدارة') }}
@stop
@section('css')
    <!-- أكواد CSS المطلوبة هنا -->
@stop

@section('content')

    <div class="content-wrapper">
        <!-- محتوى الصفحة هنا -->
        <div class="content-body">
            <!-- قائمة الأعضاء -->
            <div class="d-flex justify-content-start align-items-center mb-3">
                <button type="button" class="btn btn-success me-2" data-toggle="modal" data-target="#modals-create">
                    {{ __('إضافة عضو') }}
                </button>
                <span>&nbsp;&nbsp;</span>
                <button type="button" class="btn btn-danger" id="bulk-delete-button">
                    {{ __('حذف المحدد') }}
                </button>
            </div>
            <section class="app-committee-users-list pt-1">
                <div class="card">

                    <div class="card-datatable table-responsive pt-0">
                        {{-- <x-alert /> --}}
                        <table class="committee-users-list-table table table-striped table-hover text-center">
                            <thead class="thead-light">
                                <tr>
                                    <th>
                                        <div class="animated-checkbox">
                                            <label class="m-0">
                                                <input type="checkbox" id="record__select-all">
                                                <span class="label-text"></span>
                                            </label>
                                        </div>
                                    </th>
                                    <th>{{ __('الاسم') }}</th>
                                    <th>{{ __('العمل المكلف به') }}</th>
                                    <th>{{ __('الإجراءات') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($committeeUsers as $committeeUser)
                                    <tr>
                                        <td>
                                            <div class="animated-checkbox">
                                                <label class="m-0">
                                                    <input type="checkbox" class="record__select"
                                                        value="{{ $committeeUser->id }}">
                                                    <span class="label-text"></span>
                                                </label>
                                            </div>
                                        </td>
                                        <td>{{ $committeeUser->user->name }}</td>
                                        <td>
                                            @switch($committeeUser->role)
                                                @case('leader')
                                                    {{ __('رئيساً') }}
                                                @break

                                                @case('member')
                                                    {{ __('عضو') }}
                                                @break

                                                @case('secretary')
                                                    {{ __('مقرر اللجنة') }}
                                                @break

                                                @default
                                                    {{ __('دور غير محدد') }}
                                            @endswitch
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-primary edit-member-button"
                                                data-id="{{ $committeeUser->id }}"
                                                data-user_id="{{ $committeeUser->user_id }}"
                                                data-role="{{ $committeeUser->role }}" data-toggle="modal"
                                                data-target="#modals-edit">
                                                {{ __('تعديل') }}
                                            </button>
                                            <form action="{{ route('committee-users.destroy', $committeeUser->id) }}"
                                                method="POST" style="display: inline-block;"
                                                onsubmit="return confirm('{{ __('هل أنت متأكد من أنك تريد حذف هذا العضو؟') }}')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                    class="btn btn-sm btn-danger">{{ __('حذف') }}</button>
                                            </form>

                                        </td>
                                    </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center">{{ __('لا توجد بيانات لعرضها.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>


                <!-- مودال إضافة عضو جديد -->
                <div class="modal fade" id="modals-create">
                    <div class="modal-dialog">
                        <form class="create-new-member modal-content pt-0" action="{{ route('committee-users.store') }}"
                            method="POST">
                            @csrf
                            <div class="modal-header mb-1">
                                <h5 class="modal-title" id="exampleModalLabel">{{ __('إضافة عضو') }}</h5>
                            </div>
                            <div class="modal-body flex-grow-1">
                                <div class="form-group">
                                    <label for="user_id">{{ __('الاسم') }}</label>
                                    <select name="user_id" id="user_id" class="form-control" required>
                                        <option value="">{{ __('اختر العضو') }}</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="role">{{ __('العمل المكلف به') }}</label>
                                    <select name="role" id="role" class="form-control" required>
                                        <option value="">{{ __(' العمل المكلف به') }}</option>
                                        <option value="leader">{{ __('رئيساً') }}</option>
                                        <option value="member">{{ __('عضو') }}</option>
                                        <option value="secretary">{{ __('مقرر اللجنة') }}</option>
                                    </select>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary mr-1 data-submit">{{ __('حفظ') }}</button>
                                <button type="reset" class="btn btn-outline-secondary"
                                    data-dismiss="modal">{{ __('إلغاء') }}</button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- مودال تعديل عضو -->
                <div class="modal fade" id="modals-edit">
                    <div class="modal-dialog">
                        <form class="edit-member-form modal-content pt-0" action="committee-users/update" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="modal-header mb-1">
                                <h5 class="modal-title" id="exampleModalLabel">{{ __('تعديل عضو') }}</h5>
                            </div>
                            <div class="modal-body flex-grow-1">
                                <input type="hidden" name="member_id" id="edit-member-id">
                                <div class="form-group">
                                    <label for="edit-user_id">{{ __('الاسم') }}</label>
                                    <select name="user_id" id="edit-user_id" class="form-control" required>
                                        <option value="">{{ __('اختر العضو') }}</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="edit-role">{{ __('العمل المكلف به ') }}</label>
                                    <select name="role" id="edit-role" class="form-control" required>
                                        <option value="">{{ __('لعمل المكلف به') }}</option>
                                        <option value="leader">{{ __('رئيساً') }}</option>
                                        <option value="member">{{ __('عضو') }}</option>
                                        <option value="secretary">{{ __('مقرر اللجنة') }}</option>
                                    </select>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="submit"
                                    class="btn btn-primary mr-1 data-submit">{{ __('حفظ التعديلات') }}</button>
                                <button type="button" class="btn btn-outline-secondary"
                                    data-dismiss="modal">{{ __('إلغاء') }}</button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- مودال الحذف الجماعي -->
                <div class="modal fade" id="modals-delete-bulk">
                    <div class="modal-dialog">
                        <form method="post" action="{{ route('committee-users.bulk-delete') }}" class="modal-content"
                            style="display: inline-block;">
                            @csrf
                            @method('delete')
                            <input type="hidden" name="record_ids" id="record-ids" value="[]">

                            <div class="modal-header mb-1">
                                <h5 class="modal-title" id="exampleModalLabel">{{ __('حذف الأعضاء') }}</h5>
                            </div>
                            <div class="modal-body flex-grow-1">
                                <h4>{{ __('هل تريد حذف الأعضاء المحددين؟') }}</h4>
                            </div>
                            <div class="modal-footer">
                                <button type="submit"
                                    class="btn btn-danger mr-1 data-submit">{{ __('حذف المحدد') }}</button>
                                <button type="button" class="btn btn-outline-secondary"
                                    data-dismiss="modal">{{ __('إلغاء') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @section('js')
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

        <!-- أكواد JavaScript المطلوبة هنا -->
        <script>
            $(document).ready(function() {
                // تعبئة بيانات المودال عند النقر على زر التعديل
                $('.edit-member-button').click(function() {
                    var memberId = $(this).data('id');
                    var userId = $(this).data('user_id');
                    var role = $(this).data('role');

                    $('#edit-member-id').val(memberId);
                    $('#edit-user_id').val(userId);
                    $('#edit-role').val(role);

                    var actionUrl = '{{ url('committee-users') }}/' + memberId;
                    $('#edit-member-form').attr('action', actionUrl);
                });

                // تحديد/إلغاء تحديد الكل
                $('#record__select-all').on('change', function() {
                    $('.record__select').prop('checked', $(this).prop('checked'));
                });

                $('.record__select').on('change', function() {
                    if (!$(this).prop('checked')) {
                        $('#record__select-all').prop('checked', false);
                    }
                });

                // زر الحذف الجماعي
                $('#bulk-delete-button').on('click', function() {
                    var selectedIds = [];
                    $('.record__select:checked').each(function() {
                        selectedIds.push($(this).val());
                    });

                    if (selectedIds.length > 0) {
                        $('#record-ids').val(JSON.stringify(selectedIds));
                        $('#modals-delete-bulk').modal('show');
                    } else {
                        alert('{{ __('يرجى تحديد أعضاء للحذف.') }}');
                    }
                });
            });
        </script>
    @stop