@extends('admin.layouts.main')

@section('title')
{{ trans('calendar.calendar') }}
@endsection

@section('content')

<main>

    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a
                            href="{{ route('admin.calendar.index',['session' => session('panel') ]) }}">{{ @trans('calendar.calendar') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('calendar.reminder') }}</li>
                </ol>
            </nav>

            <div class="bg-white profile-header">
                <div class="top-bar d-flex justify-content-between align-items-center">
                    <h2>{{ trans('calendar.reminder') }}</h2>
                </div>
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab"
                            href="#detail">{{ @trans('calendar.details') }}</a>
                    </li>
                </ul>
            </div>

            <div class="detail-content mt-4">
                <!-- Nav tabs -->
                

                <!-- Tab panes -->
                <div class="tab-content box">
                    <div id="detail" class="tab-pane fade show active">
                        <div class="row">
                            <div class="col-lg-12">

                                @permission('calendar-write')
                                @if($reminder->status == 'Pending')
                                <div class="btn-group-em float-right mt-3" role="group">
                                    <a href="{{route('admin.calender.create_reminder',['id' => $reminder->id,'session' => session('panel')])}}"
                                        class="btn btn-bordered btn-sm">{{ @trans('calendar.edit_reminder') }}</a>
                                </div>
                                @endif
                                @endif
                                <h3 class="detail-heading">{{ $reminder->title }}</h3>
                                <div class="info">
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('calendar.reminder_date') }}</label>
                                        <p class="display-info">{{ $reminder->date_formatted }}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('calendar.reminder_time') }}</label>
                                        <p class="display-info">{{ $reminder->time_formatted }}</p>
                                    </div>
                                </div>
                                <div class="info">
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('calendar.status') }}</label>
                                        <p class="display-info">{{ $reminder->status }}</p>
                                    </div>
                                    <div class="form-group w-50">
                                        <label class="control-label">{{ @trans('calendar.internal_staff_members') }}</label>
                                        <p class="display-info">{{ $reminder->membersList }}</p>
                                    </div>
                                </div>
                                <div class="info">
                                    <div class="form-group w-100">
                                        <label class="control-label">{{ @trans('calendar.description') }}</label>
                                        <p class="display-info" style="word-break: break-all;">{{ $reminder->description }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>
@endsection