{{-- <div class="row">
    @foreach ($phases as $phase)
        <p class="col-md-6"><a><span
                        class="badge badge-danger">{{$phase->total}}</span> {{$phase->type->Name}}
                - Job #{{$phase->job->id}} - {{$phase->job->name()}}
                - {{$phase->job->_fullAddress()}}</a></p>
    @endforeach
</div> --}}
<div class="row">
    @foreach ($phases as $phase)
        <div class="col-md-6 mt-1">
            <div class="border rounded-3 p-3 shadow-sm hover-shadow-sm transition-all bg-white">
                <div class="d-flex align-items-center mb-1 mr_l">
                    <span class="badge bg-danger me-2 fs-6">{{ $phase->total ?? ''}}</span>
                    <h6 class="mb-0 fw-semibold text-dark">{{$phase?->type?->Name ?? ''}}</h6>
                </div>
                <div class="mt-1 mr_l">
                    <a href="#" class="text-primary fw-semibold text-decoration-none">
                        Job #{{$phase?->job?->id ?? ''}}
                    </a>
                    <span class="text-dark">{{$phase?->job?->name()}}</span>
                </div>
                <div class="text-muted small mt-1 mr_l">
                    {{$phase?->job?->_fullAddress()}}
                </div>
            </div>
        </div>
    @endforeach
</div>

@push('styles')
<style>
.hover-shadow-sm {
    border:2px solid #dee2e6 !important; 
}
.mr_l{
    margin-left: 5px;
}
.hover-shadow-sm:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-color: #0d6efd !important;
}

.transition-all {
    transition: all 0.2s ease-in-out;
}
</style>
@endpush