@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'View Data '])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">View {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            {{-- From --}}
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label for="from" class="form-label">Dari</label>
                                    <select class="form-select text-muted" id="from" disabled>
                                        <option value="" disabled>-- Pilih Dari --</option>
                                        @foreach ($from_list as $from)
                                            <option value="{{ $from->value }}" {{ $hasil->from == $from->value ? 'selected' : '' }}>
                                                {{ $from->label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- To --}}
                                <div class="mb-4">
                                    <label for="to" class="form-label">Untuk</label>
                                    <div class="form-check-list d-flex flex-wrap justify-content-start" style="gap: 15px;">
                                        @foreach ($to_list as $to)
                                            <div class="form-check" style="flex: 0 0 calc(25% - 15px); max-width: calc(25% - 15px);">
                                                <input class="form-check-input" type="checkbox" id="to_{{ $to->value }}" value="{{ $to->label }}"
                                                    {{ in_array($to->label, explode(',', $hasil->to)) ? 'checked' : '' }} disabled>
                                                <label class="form-check-label" for="to_{{ $to->value }}">
                                                    {{ $to->label }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                {{-- Subject --}}
                                <div class="mb-4">
                                    <label for="subject" class="form-label">Subjek</label>
                                    <input type="text" class="form-control" id="subject" value="{{ $hasil->subject }}" disabled>
                                </div>

                                {{-- Tanggal --}}
                                <div class="mb-4">
                                    <label for="tanggal" class="form-label">Tanggal</label>
                                    <input type="date" class="form-control" id="tanggal" value="{{ $hasil->tanggal }}" disabled>
                                </div>

                                {{-- No Surat --}}
                                <div class="mb-4">
                                    <label for="no_surat" class="form-label">Nomor Surat</label>
                                    <input type="text" class="form-control" id="no_surat" value="{{ $hasil->no_surat }}" disabled>
                                </div>

                                {{-- Urgency --}}
                                <div class="mb-4">
                                    <label for="urgency" class="form-label">Urgensi</label>
                                    <div id="selected-urgency-list" class="d-flex flex-wrap gap-2">
                                        @foreach (explode(',', $hasil->urgency) as $urgencyValue)
                                            @php
                                                $urgencyItem = $urgency_list->firstWhere('value', $urgencyValue);
                                                $urgencyLabel = $urgencyItem ? $urgencyItem->label : $urgencyValue;
                                            @endphp
                                            <span class="badge bg-success text-white px-3 py-2 rounded-pill">
                                                {{ $urgencyLabel }}
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            {{-- Deskripsi --}}
                            <div class="col-12">
                                <div class="mb-4">
                                    <label for="deskripsi" class="form-label">Deskripsi</label>
                                    <textarea class="form-control" id="deskripsi" rows="5" disabled>{{ $hasil->deskripsi }}</textarea>
                                    <small class="text-muted">Maksimal 65,535 karakter.</small>
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
<style>
    .badge {
        font-size: 0.875rem;
        font-weight: 500;
    }
</style>
@endpush