@extends('admin.master')

@section('title', @trans('Subscription'))

@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.subscription.index') }}">@trans('subscription')</a></li>
                        <li class="breadcrumb-item active">@trans('All subscription')</li>
                    </ol>
                </div>
                <h4 class="page-title">@trans('subscription')</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.subscription.index') }}" class="btn btn-outline-primary "><i class="fa-solid fa-rotate"></i></a>
                    <a href="{{ route('admin.subscription-message.index') }}" class="btn btn-outline-success "><i class="fa-regular fa-message"></i> @trans('Previous message')</a>
                    <!-- زر "إرسال رسالة جديدة" مع إضافة ids من localStorage -->
                    <div class="col-md-12 mt-0 mb-0 text-center">
                        <a id="send-message-btn" href="{{ route('admin.subscription.send_messages') }}" class="btn text-center btn-outline-primary ">@trans('Send New message')</a>
                    </div>
                </div>

                @include('admin.pages.subscription._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('Name')</th>
                            <th>@trans('Email')</th>
                            <th>@trans('Phone')</th>
                            <th>@trans('Created At')</th>
                            <th>@trans('Settings')</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($subscription as $item)
                            <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->name }}</td>
                                <td>{{ $item->email }}</td>
                                <td>{{ @$item->phone }}</td>
                                <td>{{ $item->created_at->diffForHumans() }}</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>
                                                <button class="dropdown-item text-danger text-center" type="button" data-bs-toggle="modal" data-bs-target="#danger-header-modal{{ $item->id }}">
                                                    @trans('Delete')
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                    @include('admin.pages.subscription._model_delete', ['id' => $item->id])
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center">@trans('No subscription found')</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div> <!-- end card body-->

                <div class="card-footer">
                    {{ $subscription->links('vendor.pagination.bootstrap-5') }}
                </div>
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>

    <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