@extends('../admin/admin_layout.app')

@section('content')
    <div class="page_right">
        <!-- Beardcrumbs -->
        <div class="breadcrumbs">
            <a href="{{ route('management.index') }}">Dashboard</a><span>/{{ ucfirst(Route::current()->getName()) }}</span>
        </div>
        <section class="notification mt-2">
            <div class="row w-100">
                <div class="col-12">
                    <h4>Nov 13 2021</h4>
                </div>
            </div>
            <div class="row w-100">
                <div class="col-12 text-md-end">
                    <span class="p-3 bg-light rounded-pill"><button type="button" class="border-0 bg-transparent"
                            data-bs-toggle="modal" data-bs-target="#addannouncement"><i
                                class="fa-solid fa-plus rounded-circle text-light me-2 p-2"></i>Add
                            Announcement</button></span>
                </div>
            </div>
            <div class="row w-100">
                <div class="col-md-2 col-6 align-self-center">
                    <span><i class="fa-solid fa-circle"></i></span>
                    <span>Notification</span>
                </div>
                <div class="col-md-5 col-6">
                    <div class="rounded-pill bg-light">
                        <span class="me-2"><i class="fa-solid fa-magnifying-glass"></i></span>
                        <input type="text" class="border-0 bg-transparent" id="notification_search" placeholder="Search">
                    </div>
                </div>
            </div>
            <div class="row w-100 mb-3">
                <div class="col-md-7 col-12 p-0">
                    <div class="nav flex-column nav-pills row mx-0 w-100 p-3 bg-light mb-1 border-bottom" id="v-pills-tab"
                        role="tablist" aria-orientation="vertical" data-tabs="tabs">
                        @foreach ($announcements as $index => $announcement)
                            <a href="#v-pills-notification-{{ $index }}"
                                class="mb-4  id="v-pills-notification-{{ $index }}" data-toggle="tab" role="tab"
                                aria-controls="v-pills-notification-{{ $index }}"
                                {{ $index == 0 ? 'aria-selected="true"' : '' }}>
                                <div class="row mx-0 w-100 p-0 ms-2">
                                    <div class="col-xl-1 col-sm-2 col-3 p-0 align-self-center text-center">
                                        <i class="fa-solid fa-check p-2 rounded-circle"></i>
                                    </div>
                                    <div class="col-xl-11 col-sm-10 col-6 p-0">
                                        <h6>{{ $announcement->title }}</h6>
                                        <p>{{ substr($announcement->description, 0, 50) }}.</p>
                                        <span>{{ $announcement->send_at }}</span>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>

                </div>
                <div class="col-md-5 col-12">
                    <div class="tab-content ">
                        @foreach ($announcements as $index => $announcement)
                            <div class="tab-pane fade {{ $index == 0 ? 'show active' : '' }}"
                                id="v-pills-notification-{{ $index }}" role="tabpanel"
                                aria-labelledby="v-pills-notification-{{ $index }}-tab">

                                <h4 class="text-center my-3">{{ $announcement->title }}</h4>
                                <p>{{ $announcement->description }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>

            </div>

        </section>
        <!-- Modal -->
        <div class="modal fade" id="addannouncement" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="addannouncementLabel" aria-hidden="true">
            <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <h4 class="text-start">
                            <span>Add </span>
                            <span>Announcement</span>
                        </h4>
                        <form action="{{ route('management.notifications') }}" method="POST">
                            @csrf
                            <div class="mb-4 mt-5">
                                <input type="text" name="title" class="form-control" id="title"
                                    placeholder="Add Title">
                            </div>
                            <div class="mb-4">
                                <textarea type="text" name="description" class="form-control" id="description" placeholder="Description"></textarea>
                            </div>
                            <div class="mb-5">
                                <select name="type" id="announcement_type" class="form-control">
                                    <option value="" disabled>Choose Type</option>
                                    <option value="system_wide">System Wide</option>
                                    <option value="user_group">User Group</option>
                                    <option value="individual">Individual</option>
                                </select>
                            </div>
                            {{-- <div class="mb-5 text-start px-2">
                                <span class="me-3"><i class="fa-solid fa-user-group"></i></span>
                                <span class="me-3">sc</span>
                                <span><i class="fa-solid fa-plus"></i></span>
                            </div> --}}
                            <div id="individuals" class="mb-4 d-none">
                                <select name="individual" id="individual" class="form-control">
                                    <option value="" disabled>Choose User</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}">
                                            {{ $user->first_name . ' ' . $user->last_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div id="user_groups" class="mb-4 d-none">
                                <select name="user_group" id="user_group" class="form-control">
                                    <option value="" disabled>Choose Groups</option>
                                    <option value="admin">Admins</option>
                                    <option value="screenwriter">Screenwriter</option>
                                    <option value="producer">Producers</option>
                                    <option value="analyst">Analysts</option>
                                    <option value="team">Team</option>
                                </select>
                            </div>
                            <div class="mt-5 mb-3 text-end">
                                <button type="button" class="border-0" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="border-0" data-bs-dismiss="modal">Send</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection