@extends('layouts.app')

@section('title', 'Bulletin')

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>{{ $bulletin->subject }}</h2>
                    <ol>
                        <li>
                            <a href="{{ route('home.index') }}">{{ __('Home') }}</a>
                        </li>
                        <li>
                            <a href="{{ route('dashboard.index') }}">{{ $state->name }} {{ __('Dasboard') }}</a>
                        </li>
                        <li>{{ $bulletin->subject }}</li>
                    </ol>
                </div>
            </div>
        </section>

        <section id="blog" class="blog">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 entries">
                        <article class="entry entry-single">
                            @if($bulletin->attachment)
                                @if(in_array($bulletin->attachment_extension, ['jpg', 'png', 'jpeg', 'gif', 'svg']))
                                <img src="{{ $bulletin->getAttachmentUrl() }}" alt="{{ $bulletin->subject }}" class="img-fluid mb-2" />
                                {{-- <div class="entry-img">
                                        <img src="{{ $bulletin->getAttachmentUrl() }}" alt="{{ $bulletin->subject }}" class="img-fluid mb-2" />
                                    </div> --}}
                                @elseif(in_array($bulletin->attachment_extension, ['pdf']))
                                    <p>
                                        Attachment: <a href="{{ $bulletin->getAttachmentUrl() }}">
                                            Download ({{ $bulletin->attachment }})
                                        </a>
                                    </p>
                                    <button type="button" class="btn btn-outline-dark rounded-0 mb-3" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                        <i class="bi bi-binoculars"></i> View PDF Attachment
                                    </button>
                                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h1 class="modal-title fs-5" id="exampleModalLabel">Attachment</h1>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <object data="{{ $bulletin->getAttachmentUrl() }}"
                                                        type="{{ $bulletin->attachment_type }}"
                                                        width="100%"
                                                        height="960px">
                                                        <p>Unable to display attachment. <a href="{{ $bulletin->getAttachmentUrl() }}">Download</a> instead.</p>
                                                    </object>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-outline-dark rounded-0" data-bs-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @elseif(in_array($bulletin->attachment_extension, ['doc', 'docx']))
                                    <p>
                                        Attachment: <a href="{{ $bulletin->getAttachmentUrl() }}">
                                            Download ({{ $bulletin->attachment }})
                                        </a>
                                    </p>
                                    <button type="button" class="btn btn-outline-dark rounded-0 mb-3" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                        <i class="bi bi-binoculars"></i> View Document Attachment
                                    </button>
                                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h1 class="modal-title fs-5" id="exampleModalLabel">Attachment</h1>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <iframe src="https://view.officeapps.live.com/op/embed.aspx?src={{ $bulletin->getAttachmentUrl() }}"
                                                        width="100%"
                                                        height="960px"
                                                        frameborder="0"></iframe>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-outline-dark rounded-0" data-bs-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @else
                                <p>
                                    <small class="text-muted"><em>No Attachment</em></small>
                                </p>
                            @endif
                            {{-- <div class="entry-img">
                                <img src="{{ ($bulletin->photo) ? Storage::url('states/' . $state->slug . '/bulletins/' . $bulletin->id . '/' . $bulletin->photo) : asset('img/placeholder-1024x768.svg') }}" alt="{{ $bulletin->subject }}" class="img-fluid">
                            </div> --}}
                            <h2 class="entry-title">
                                <a href="#">{{ $bulletin->subject }}</a>
                            </h2>
                            <div class="entry-meta">
                                <ul>
                                    <li class="d-flex align-items-center">
                                        <i class="bi bi-clock"></i>
                                        <time datetime="{{ $bulletin->published_at->format('Y-m-d') }}">
                                            {{ $bulletin->published_at->format('M d, Y') }}
                                        </time>
                                    </li>
                                </ul>
                            </div>
                            <div class="entry-content">
                                {!! $bulletin->body !!}
                            </div>
                            <hr />
                            @if(Auth::user()->hasStateOffice(['Governor'], $state->id))
                                <a href="{{ route('bulletins.index') }}" class="btn btn-outline-dark rounded-0 btn-sm">All Bulletins</a>
                            @endif
                            @if(Auth::id() == $bulletin->user_id)
                                <a href="{{ route('bulletins.edit', $bulletin->id) }}" class="btn btn-outline-primary rounded-0 btn-sm">Edit</a>
                                <a href="#" id="{{ $bulletin->id }}" class="btn btn-outline-danger rounded-0 btn-sm deleteButton">Delete</a>
                                <form name="deleteForm{{ $bulletin->id }}" method="POST" action="{{ route('bulletins.destroy', $bulletin->id) }}">
                                    @csrf
                                    @method('delete')
                                </form>
                            @endif
                        </article>
                        <div class="blog-comments"></div>
                    </div>
                    <div class="col-lg-4">
                        <div class="sidebar">
                            <h3 class="sidebar-title">Recent Bulletins</h3>
                            <div class="sidebar-item recent-posts">
                                @foreach($recentBulletins as $recentBulletin)
                                    <div class="post-item clearfix">
                                        <img src="{{ $recentBulletin->getPhotoUrl() }}" alt="{{ $recentBulletin->subject }}">
                                        <h4>
                                            <a href="{{ route('bulletins.show', $recentBulletin->id) }}">
                                                {{ $recentBulletin->subject }}
                                            </a>
                                        </h4>
                                        <time datetime="{{ $recentBulletin->published_at->format('Y-m-d') }}">{{ $recentBulletin->published_at->format('M d, Y') }}</time>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).on('click', '.deleteButton', function(event) {
            event.preventDefault();
            let id = $(this).attr('id');
            Swal.fire({
                title: "Are you sure?",
                text: "Are you sure you want to delete this? You will not be able to revert!",
                icon: "warning",
                buttons: true,
                showCancelButton: true,
            }).then(function(result) {
                if (result.value === true) {
                    $("form[name='deleteForm" + id + "']").submit();
                }
            });
        });
    </script>
@endpush