@use('Illuminate\Support\Facades\Storage')
<x-layout.app title="Detail Notifikasi" activeMenu="notifikasi.show" :withError="true">
     <div class="container my-5">
        <x-breadcrumb title="Detail Notifikasi" :breadcrumbs="[
            ['label' => 'Dashboard', 'url' => url('/')],
            ['label' => 'Notifikasi', 'url' => route('notifikasi.index')],
            ['label' => 'Detail Notifikasi'],
        ]" />

        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between">
                    <a href="{{ route('notifikasi.index') }}" class="btn btn-sm btn-secondary">
                        <i class="bx bx-arrow-back me-1"></i>Kembali
                    </a>

                    <div>
                        @can('notifikasi view')
                        <a href="{{ route('notifikasi.create') }}"
                            class="btn btn-sm btn-info">
                            <i class="bx bx-plus me-1"></i>Baru
                        </a>
                        @endcan
                        @can('notifikasi edit')
                        <a href="{{ route('notifikasi.edit', $notifikasi) }}"
                            class="btn btn-sm btn-primary">
                            <i class="bx bx-pencil me-1"></i>Edit
                        </a>
                        @endcan
                        @can('notifikasi delete')
                            <form action="{{ route('notifikasi.destroy', $notifikasi) }}"
                                method="POST" class="d-inline">
                                @csrf @method('DELETE')
                                <x-input.confirm-button text="Data notifikasi ini akan dihapus!"
                                    positive="Ya, hapus!" icon="info"
                                    class="btn btn-danger btn-sm"
                                    data-bs-toggle="tooltip"
                                    data-bs-title="Hapus"
                                    data-bs-placement="top">
                                    <i class="bx bx-trash me-1"></i>Hapus
                                </x-input.confirm-button>
                            </form>
                        @endcan
                    </div>
                </div>
            </div>
            <div class="card-body">
                <form class="row g-3">
                    
                                <div class="col-md-4">
                                    <label for="first-name-horizontal">Penerima</label>
                                </div>
                                <div class="col-md-8 form-group">: {{ $notifikasi->users->name }}</div>
                                <div class="col-md-4">
                                    <label for="first-name-horizontal">Judul</label>
                                </div>
                                <div class="col-md-8 form-group">: {{ $notifikasi->judul }}</div>
                                <div class="col-md-4">
                                    <label for="first-name-horizontal">Pesan</label>
                                </div>
                                <div class="col-md-8 form-group">: {{ $notifikasi->pesan }}</div>
                                <div class="col-md-4">
                                    <label for="first-name-horizontal">Pengirim</label>
                                </div>
                                <div class="col-md-8 form-group">: {{ $notifikasi->pengirim }}</div>

                                @if ($notifikasi->foto)
                                    <div class="col-md-4">
                                        <label>Foto</label>
                                    </div>
                                    <div class="col-md-8 form-group">
                                        <a href="{{ Storage::disk('uploads')->url($notifikasi->foto) }}" target="_blank">
                                            <img src="{{ Storage::disk('uploads')->url($notifikasi->foto) }}"
                                                alt="Foto Notifikasi"
                                                class="img-thumbnail"
                                                style="max-height:200px; max-width:100%;">
                                        </a>
                                    </div>
                                @endif
                </form>
            </div>
        </div>
    </div>
</x-layout.app>