@extends('admin.master')

@section('title',@trans('Course Registration'))

@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@trans('Dashboard') </a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.courses-register.index') }}">@trans('Course Registration') </a>
                    </li>
                    <li class="breadcrumb-item active">@trans('All Course Registration')</li>
                </ol>
            </div>
            <h4 class="page-title">@trans('Course Registration')</h4>
        </div>
    </div>
</div>
<!-- end page title -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <button type="button" class="btn   btn-outline-info" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                    <i class="fa-solid fa-filter"></i>
                </button>
                <a href="{{ route('admin.courses-register.index') }}" class="btn btn-outline-primary"><i
                        class="fa-solid fa-rotate"></i></a>
                        <a href="{{ route('admin.courses-register.export_excel') }}" class="btn btn-outline-secondary"><i
                            class="fa-regular fa-file-excel"></i> @trans('Excel')</a>
                <div class="col-md-12 mt-0 mb-0 text-center">
                    <a id="send-message-btn" href="{{ route('admin.courses-register.send_messages') }}" class="btn text-center btn-outline-primary ">@trans('Send New message')</a>
                </div>
            </div>
            @include('admin.pages.course_register._model_search')
            <div class="card-body">

                <table  class="table table-striped dt-responsive nowrap w-100">
                    <thead>
                        <tr>
                            <th style="width: 1px">
                                <input form="update-pages" class="checkbox-check flat cursor-pointer" type="checkbox" name="check-all-sub" id="check-all-sub" title="check-all-sub">
                            </th>
                        <th>#</th>
                        <th>@trans('Course Title') </th>
                        <th>@trans('City') </th>
                        <th>@trans('Price') </th>
                        <th>@trans('Currency') </th>
                        <th>@trans('Name') </th>
                        <th>@trans('Email') </th>
                        <th>@trans('Phone') </th>
                        <th>@trans('Status') </th>
                        <th>@trans('Payment Status') </th>
                        <th>@trans('Registration date') </th>
                        <th>@trans('Settings') </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($course_registers as $item)
                        @php
                        // تحديد النص واللون بناءً على حالة الدفع
                        switch ($item->payment_status) {
                            case 'pending':
                                $statusText = __('Pending');
                                $statusClass = 'text-primary';
                                break;
                            case 'completed':
                                $statusText = __('Completed');
                                $statusClass = 'text-success';
                                break;
                            default:
                                $statusText = __('Failed');
                                $statusClass = 'text-danger';
                                break;
                        }
                    @endphp
                        <tr>
                            <td>
                                <label>
                                    <input form="update-pages" class="checkbox-check" type="checkbox" name="record[{{ $item->id }}]" value="{{ $item->id }}">
                                </label>
                            </td>
                            <th scope="row">{{ $loop->index + 1 }}</th>
                            <td>{{ @$item->course->trans->where('locale', $current_lang)->first()->title }}</td>
                            <td>
                                @if($item->distribution)
                                {{ @$item->distribution->city->trans->where('locale', $current_lang)->first()->title}}
                                @else
                                        no city
                                @endif
                            </td>
                            <td>{{ $item->price}}</td>
                            <td>{{ $item->currency}}</td>
                            <td>{{ @$item->user->first_name }} {{ @$item->user->last_name }}</td>
                            <td>{{ @$item->user->email }}</td>
                            <td>{{ @$item->user->phone }}</td>
                            <td>{{ $item->status  }}</td>
                            <td>
                                @if ($item->payment_status == 'pending')
                                    <span class="badge badge-outline-warning">@trans('Pending') </span>
                                @elseif ($item->payment_status == 'completed')
                                    <span class="badge badge-outline-success">@trans('Completed')</span>
                                @else
                                    <span class="badge badge-outline-danger">@trans('Failed')</span>
                                @endif
                            </td>
                            <td>{{ $item->created_at->format('Y-m-d') }}</td>


                            <td>
                                <div class="dropdown">
                                    <button class="btn btn-outline-primary dropdown-toggle" type="button"
                                        id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                        @trans('Settings')
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <li>
                                            <a class="dropdown-item {{ $statusClass }} text-center"
                                                href="{{ route('admin.courses-register.update-status', $item->id) }}">
                                                {{ $statusText }}
                                            </a>
                                        </li>
                                        <li>
                                            <a  class="dropdown-item  text-center btn text-primary-custom" data-bs-toggle="modal" data-bs-target="#Confirmation{{$item->id}}">
                                                @trans('Confirmation')
                                            </a>
                                        </li>

                                        <li>
                                            <button class="dropdown-item  text-center text-danger" type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#danger-header-modal{{ $item->id }}">
                                                @trans('Delete')
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                                @include('admin.pages.course_register._model_delete', ['id' => $item->id])
                                @include('admin.pages.course_register._model_registration_confirmation', ['id' => $item->id])
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center">@trans('No courses register  found') </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div> <!-- end card body-->
            <div class="card-footer">
                {{ $course_registers->links('vendor.pagination.bootstrap-5') }}
            </div>
        </div> <!-- end card -->
    </div><!-- end col-->
</div>
@endsection
@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkAllCheckbox = document.getElementById('check-all-sub');
            const checkboxes = document.querySelectorAll('.checkbox-check');
            const sendMessageBtn = document.getElementById('send-message-btn');
            const sendMessageContainer = document.querySelector('.col-md-12.mt-0.mb-0.text-center'); // العنصر الذي يحتوي على زر الإرسال

            // التحقق من تغيير حالة check-all-sub
            checkAllCheckbox.addEventListener('change', function() {
                checkboxes.forEach(function(checkbox) {
                    checkbox.checked = checkAllCheckbox.checked;
                });
                toggleSendMessageButton();  // تحديث حالة الزر بناءً على التحديد
                updateSelectedIds();
            });

            // التحقق من تغيير حالة كل checkbox
            checkboxes.forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    toggleSendMessageButton();  // تحديث حالة الزر بناءً على التحديد
                    updateSelectedIds();
                });
            });

            // دالة لتحديث IDs المحددة
            function updateSelectedIds() {
                const selectedIds = [];
                checkboxes.forEach(function(checkbox) {
                    if (checkbox.checked) {
                        selectedIds.push(checkbox.value);
                    }
                });

                localStorage.setItem('selected_subscription_ids', JSON.stringify(selectedIds));
            }

            // دالة لتبديل إظهار الزر بناءً على وجود أي تحديد
            function toggleSendMessageButton() {
                const selectedCount = Array.from(checkboxes).filter(checkbox => checkbox.checked).length;

                if (selectedCount > 0) {
                    sendMessageContainer.style.display = 'block'; // إظهار الزر
                } else {
                    sendMessageContainer.style.display = 'none'; // إخفاء الزر
                }
            }

            // إضافة IDs المحددة إلى الرابط عند النقر
            sendMessageBtn.addEventListener('click', function(event) {
                const selectedIds = JSON.parse(localStorage.getItem('selected_subscription_ids')) || [];
                const url = new URL(sendMessageBtn.href);
                if (selectedIds.length > 0) {
                    url.searchParams.set('ids', selectedIds.join(','));
                }
                sendMessageBtn.href = url.toString();
            });

            // تحقق مبدئي عند تحميل الصفحة (في حال كانت هناك اختيارات مسبقة)
            toggleSendMessageButton();
        });
    </script>
@endsection