@extends('layouts.admin')

@section('title', 'Bulletin')

@section('content')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Bulletin</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            @if($bulletin->published_at)
                <a href="#" class="btn btn-sm btn-outline-dark" id="unpublishButton">Un-Publish</a>
            @else
                <a href="#" class="btn btn-sm btn-outline-dark" id="publishButton">Publish</a>
            @endif
            <a href="{{ route('admin.bulletins.edit', $bulletin->id) }}" class="btn btn-sm btn-outline-success mx-1">Edit</a>
            <a href="#" class="btn btn-sm btn-outline-danger" id="deleteButton">Delete</a>
        </div>
    </div>

    <form name="publishForm" action="{{ route('admin.bulletins.publish') }}" method="post" class="d-none">
        @csrf
        @method('put')
        <input type="hidden" name="bulletin_id" value="{{ $bulletin->id }}" />
    </form>
    <form name="unpublishForm" action="{{ route('admin.bulletins.unPublish') }}" method="post" class="d-none">
        @csrf
        @method('put')
        <input type="hidden" name="bulletin_id" value="{{ $bulletin->id }}" />
    </form>
    <form name="deleteForm" action="{{ route('admin.bulletins.destroy', $bulletin->id) }}" method="post" class="d-none">
        @csrf
        @method('delete')
        <input type="hidden" name="bulletin_id" value="{{ $bulletin->id }}" />
    </form>

    <div class="container">
        <div class="row">
            <div class="col">
                <table class="table">
                    <tr>
                        <th>ID</th>
                        <td>{{ $bulletin->id }}</td>
                    </tr>
                    <tr>
                        <th>State</th>
                        <td>{{ $bulletin->state->name ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>User</th>
                        <td>{{ $bulletin->user->first_name ?? '' }} {{ $bulletin->user->last_name ?? '' }}</td>
                    </tr>
                    <tr>
                        <th>Subject</th>
                        <td>{{ $bulletin->subject ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <th>Body</th>
                        <td>{!! $bulletin->body !!}</td>
                    </tr>
                    <tr>
                        <th>Photo</th>
                        <td>
                            @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
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col"></div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(document).on('click', '#publishButton', function(event) {
        event.preventDefault();
        Swal.fire({
            title: "Are you sure?",
            text: "Are you sure you want to publish this bulletin?",
            icon: "warning",
            buttons: true,
            showCancelButton: true,
        }).then(function(result) {
            if (result.value === true) {
                $('form[name="publishForm"]').submit();
            }
        });
    });

    $(document).on('click', '#unpublishButton', function(event) {
        event.preventDefault();
        Swal.fire({
            title: "Are you sure?",
            text: "Are you sure you want to un-publish this bulletin?",
            icon: "warning",
            buttons: true,
            showCancelButton: true,
        }).then(function(result) {
            if (result.value === true) {
                $('form[name="unpublishForm"]').submit();
            }
        });
    });

    $(document).on('click', '#deleteButton', function(event) {
        event.preventDefault();
        Swal.fire({
            title: "Are you sure?",
            text: "Are you sure you want to delete this bulletin?",
            icon: "warning",
            buttons: true,
            showCancelButton: true,
        }).then(function(result) {
            if (result.value === true) {
                $('form[name="deleteForm"]').submit();
            }
        });
    });
</script>
@endpush