@extends('layouts.app')

@section('content')

<div class="container">
    @if(session('success'))
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1050;">
        <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" autohide="false">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('success') }}
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    @endif

    @include('layouts.subnav')

    <div class="mb-4"></div>
    @if(auth()->user()->name === 'admin')
    <table id="example" class="table table-striped" style="width:100%">
        <thead class="bg-light">
            <tr>
                <th class="text-center">#</th>
                <th class="text-center">User Name</th>
                <th class="text-center">Status</th>
                <th class="text-center">Plan Name</th>
                <th class="text-center">Start At</th>
                <th class="text-center">Ends At</th>
                <th class="text-center">Plan Duration</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($users as $index => $user)
            <tr>
                <th scope="row" class="text-center">{{ $index + 1 }}</th>
                <td class="text-center">
                    <p class="fw-bold fs-6">
                        {{ $user->user->name}}
                    </p>
                </td>
                
                <td class="text-center">
                    @if (\Carbon\Carbon::parse($user->end_at)->isFuture())
                    <span class="badge bg-success rounded-pill fs-6">Active</span>
                    @else
                    <span class="badge bg-danger rounded-pill fs-6">Inactive</span>
                    @endif
                </td>

                <td class="text-center">
                    <p class="fw-bold fs-6">
                        {{ $user->plan->name}}
                    </p>
                </td>
                <td class="text-center">
                    <p class="fw-bold fs-6">
                        {{ \Carbon\Carbon::parse($user->start_at)->format('d-m-Y') }}
                    </p>
                </td>
                <td class="text-center">
                    <p class="fw-bold fs-6">
                        {{ \Carbon\Carbon::parse($user->end_at)->format('d-m-Y') }}
                    </p>
                </td>
                <td class="text-center">
                    <p class="fw-bold fs-6">
                        {{ $user->plan->duration}}
                    </p>
                </td>
                <td class="text-center">
                    <a class="btn btn-info text-white" data-bs-toggle="modal" style="background: #00ACCD;" href="#exampleModalToggle" data-bs-target="#exampleModalToggle-{{ $user->user_id }}" role="button">
                        Send Announcment
                    </a>
                </td>
            </tr>
            @endforeach
        </tbody>
        <tfoot class="bg-light">
            <tr>
                <th class="text-center">#</th>
                <th class="text-center">User Name</th>
                <th class="text-center">Status</th>
                <th class="text-center">Plan Name</th>
                <th class="text-center">Start At</th>
                <th class="text-center">Ends At</th>
                <th class="text-center">Plan Duration</th>
                <th class="text-center">Action</th>
            </tr>
        </tfoot>
    </table>
    @else
    <div class="mt-5"></div>
    <span class="alert alert-danger fw-bold fs-6 rounded-pill">
        You don't have permission
    </span>
    @endif

</div>

@foreach ($users as $user)
<div class="modal fade" id="exampleModalToggle-{{ $user->user_id }}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel-{{ $user->user_id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel-{{ $user->user_id }}">Send Announcement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form action="{{ route('send.announcment') }}" method="POST">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ $user->user_id }}">

                    <div class="mb-3">
                        <label for="announcement-{{ $user->user_id }}" class="form-label">Choose Announcement:</label>
                        <select name="announcement" id="announcement-{{ $user->user_id }}" class="form-select">
                            <option value="#" disabled selected>Choose Announcement:</option>
                            <option value="your plan is expired">Your Plan Is Expired</option>
                            <option value="your content is vulgar">Your Content Is Vulgar</option>
                        </select>
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-info text-white" style="background: #00ACCD;">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endforeach
<!-- @include('layouts.scripts') -->
@endsection