@include('Admin.Includes.header')

<div class="page-content">
    <div class="container-fluid">
        <div class="card shadow-sm mb-4">

        <div class="  p-3 mb-3">
            <h4 class="mb-1">{{ __('Subscription List') }}</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 bg-transparent p-0 m-0 align-items-center">
                    <li class="breadcrumb-item">
                        <a class="link-primary text-decoration-none" href="{{ route('Admin.Dashboard') }}">
                            <i class="fa-solid fa-home me-1"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Subscription List
                    </li>
                </ol>
            </nav>
        </div>
        </div>
        

      @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
    <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Subscription Table</h5>
        <button style="float: inline-end"  class="btn btn-danger " >Delete All</button>
    </div>

    <div class="card-body">
        <div class="table-responsive table-borderless   p-3  ">
            <table id="data_Table" class="table table-borderless align-middle mb-0">
                <thead class="table-light text-center">
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>Email</th>
                        <th>Created At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($subscriptions as $subscription)
                        <tr>
                            <td><input type="checkbox" value="{{ $subscription->id }}"></td>
                            <td>{{ $subscription->email }}</td>
                            <td>{{ $subscription->created_at->format('d-m-Y') }}</td>
                            <td>
                                <div class="dropdown">
                                    <button class="btn btn-sm text-dark rounded shadow-sm"
                                                type="button" data-bs-toggle="dropdown" aria-expanded="false" style="background-color: #c2d6e7;">
                                                ⋮
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <button class="dropdown-item text-danger" type="button" data-bs-toggle="modal" data-bs-target="#deleteModal-{{ $subscription->id }}">
                                                <i class="fas fa-trash-alt me-2"></i>Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>

                        {{-- DELETE MODAL --}}
                        <div class="modal fade" id="deleteModal-{{ $subscription->id }}" tabindex="-1" aria-labelledby="deleteModalLabel-{{ $subscription->id }}" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">

                                    <div class="modal-header border-0">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>

                                    <div class="modal-body p-md-5">
                                        <div class="text-center">
                                            <div class="text-danger">
                                                <i class="fa-solid fa-trash fs-1"></i>
                                            </div>
                                            <div class="mt-4">
                                                <h4 class="mb-1">Are you sure?</h4>
                                                <p class="text-muted mx-3 fs-16 mb-0">
                                                    Do you really want to delete the subscription for<br>
                                                    <strong>{{ $subscription->email }}</strong>?
                                                </p>
                                                <p class="text-muted mt-2 mb-0">
                                                    <small>This action cannot be undone.</small>
                                                </p>
                                            </div>
                                        </div>

                                        <div class="d-flex gap-3 justify-content-center mt-4 mb-2">
                                            <button type="button" class="btn btn-light btn-hover w-sm" data-bs-dismiss="modal">Cancel</button>
                                            <form  action="{{ route('Admin.Subscription.destroy', $subscription->id) }}" method="POST">
                                                @csrf
                                                <button type="submit" data-bs-target="#deleteModal-{{ $subscription->id }}" class="btn btn-danger btn-hover w-sm">Yes, Delete It!</button>
                                            </form>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    @endforeach
                </tbody>
                <tfoot class="">
                            <tr><th rowspan="1" colspan="1"><input type="checkbox" name="" id=""></th><th rowspan="1" colspan="1">Email</th><th rowspan="1" colspan="1">Created At</th><th rowspan="1" colspan="1">Actions</th></tr>
                        </tfoot>
            </table>
        </div>
    </div>
</div>




        
    </div>
</div>



<script>
    setTimeout(function() {
          const alerts = document.querySelectorAll('.alert');
          alerts.forEach(alert => {
              // Use Bootstrap's fade out
              alert.classList.remove('show');
              alert.classList.add('fade');
              // Completely remove from DOM after transition
              setTimeout(() => alert.remove(), 500);
          });
      }, 5000)
</script>