@extends('central.dashboard.layouts.master')

@section('sidebar')
    @include('central.dashboard.layouts.sidebar', ['page' => 'announcements'])
@endsection

@section('content')
    <div>
        <div class="d-flex justify-content-between p-2">
            <h4>إشعارات الحسابات المشتركة</h4>

            <button class="btn btn-outline-success btn-sm rounded-pill" type="button" data-bs-toggle="modal" data-bs-target="#addAnnouncementModal">
                إضافة جديد
            </button>
        </div>

        <div>
            {{-- Add new announcement Modal --}}
            <div class="modal fade" id="addAnnouncementModal" role="dialog" aria-labelledby="addAnnouncementModalLabel"
                aria-hidden="true" style="overflow:hidden;">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addAnnouncementModalLabel">إضافة جديد</h5>
                            <button type="button" class="btn-close ms-0" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <form action="{{ route('central.dashboard.tenant-announcements.store') }}" method="post" id="addAnnouncementForm">
                                @csrf

                                <div class="my-2">
                                    <label for="type" class="fw-bold">نوع الإشعار</label>
                                    <select name="type" id="type" class="form-select" required>
                                        <option value="new-feature">New Feature</option>
                                        <option value="fix-bug">Bug Fixing</option>
                                    </select>
                                </div>

                                <div class="my-2">
                                    <label for="users_ids" class="fw-bold">الحسابات</label>

                                    @foreach ($code_modules as $code_module)
                                        @if (!Str::endsWith($code_module->code, 'Settings'))
                                            <div>
                                                <label for="cm-{{ $code_module->code }}">{{ $code_module->name }}</label>
                                                <input type="checkbox" id="cm-{{ $code_module->code }}" class="selected_modules" value="{{ $code_module->code }}">
                                            </div>
                                        @endif
                                    @endforeach

                                    <select name="users_ids[]" id="users_ids" class="form-select" multiple>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->company_name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="my-2">
                                    <label for="title" class="fw-bold">العنوان</label>
                                    <input type="text" name="title" id="title" class="form-control" placeholder="العنوان" required>
                                </div>

                                <div class="my-2">
                                    <label for="description" class="fw-bold">التفاصيل</label>
                                    <input type="text" name="description" id="description" class="form-control" placeholder="التفاصيل">
                                </div>
                            </form>
                        </div>

                        <div class="modal-footer">
                            <button form="addAnnouncementForm" class="btn btn-success">
                                إضافة وإرسال
                            </button>

                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>نوع الإشعار</th>
                    <th>الحسابات</th>
                    <th>العنوان</th>
                    <th>التفاصيل</th>
                    <th>تاريخ الإرسال</th>
                </tr>
            </thead>

            <tbody>
                @php $grouped_users = $users->groupBy('id')->all(); @endphp

                @foreach ($announcements as $announcement)
                    <tr>
                        <td>{{ $announcement->type }}</td>
                        <td>
                            @if (count($announcement->users_ids) == 0)
                                الجميع
                            @else
                                @foreach ($announcement->users_ids as $user_id)
                                @if (isset($grouped_users[$user_id]))
                                    - {{ $grouped_users[$user_id][0]->company_name }} <br>
                                   @else
                                   
                                   @endif
                                @endforeach
                            @endif
                        </td>
                        <td>{{ $announcement->title }}</td>
                        <td>{{ $announcement->description ?? '---' }}</td>
                        <td>{{ $announcement->created_at->format('Y-m-d h:i A') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

@push('script')
<script>
    const users = @json($users);

    $(() => {
        $('.selected_modules').on('change', function() {
            const selected_modules_inputs = $('.selected_modules:checked');
            const selected_modules_codes = [...selected_modules_inputs.map((i, selected_module_input) => $(selected_module_input).val())];

            $('#users_ids option:selected').attr('selected', false);    // clear all selected from options

            users.forEach((user) => {
                const user_has_any_of_selected_modules = user.modules.find((m) => selected_modules_codes.includes(m.module_code)) != null;
                if(user_has_any_of_selected_modules) {
                    $(`#users_ids option[value=${user.id}]`).attr('selected', 'selected');
                }
            });
        });
    });
</script>
@endpush