@extends('layouts.app')

@section('title', 'Month Item | PairingPal')

@section('content')
    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-2 mb-3">
        <h1 class="h4 mb-0">{{ $monthPackage->name }}</h1>
        <div class="d-flex flex-column flex-sm-row gap-2">
            <a href="{{ route('month-packages.edit', $monthPackage) }}" class="btn btn-outline-primary material-btn">Edit</a>
            <form method="POST" action="{{ route('month-packages.destroy', $monthPackage) }}">
                @csrf @method('DELETE')
                <button class="btn btn-outline-danger material-btn w-100" onclick="return confirm('Delete this record?')">Delete</button>
            </form>
        </div>
    </div>

    <div class="card material-card">
        <div class="card-body">
            <dl class="row mb-0">
                <dt class="col-sm-3">Month</dt><dd class="col-sm-9">{{ $monthPackage->month_label?->label() }}</dd>
                <dt class="col-sm-3">Affixed Date</dt><dd class="col-sm-9">{{ $monthPackage->affixed_at?->format('Y-m-d') }}</dd>
                <dt class="col-sm-3">Owner</dt><dd class="col-sm-9">{{ $monthPackage->user?->username }}</dd>
                <dt class="col-sm-3">Document</dt>
                <dd class="col-sm-9">@if($monthPackage->document_path)<a href="{{ asset('storage/'.$monthPackage->document_path) }}" target="_blank">{{ $monthPackage->document_name }}</a>@endif</dd>
                <dt class="col-sm-3">Notes</dt><dd class="col-sm-9">{{ $monthPackage->notes ?: '—' }}</dd>
            </dl>
        </div>
    </div>
@endsection