@extends('frontend.layouts.app')
@push('style')
    <style>
        .organization-card-hover:hover {
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .organization-logo {
            width: 100%;
            height: 160px;
            object-fit: contain;
            background: #f8f9fa;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            padding: 10px;
        }

        .card-title {
            font-size: 1.2rem;
        }

        .card-text {
            font-size: 0.9rem;
        }

        @media (max-width: 576px) {
            .organization-logo {
                height: 140px;
            }

            .card-title {
                font-size: 1rem;
            }
        }

        .no-data-message {
            padding: 60px 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 0.5rem;
            color: #6c757d;
        }

        .no-data-message h5 {
            font-weight: 600;
            font-size: 1.5rem;
        }

        .no-data-message p {
            font-size: 0.9rem;
            color: #868e96;
            margin-top: 0;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid page-header-modern py-4 bg-light border-bottom">
        <div class="container">
            <h1 class="display-5 fw-bold mb-1">Organizations</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb breadcrumb-modern mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Organizations</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="container py-5">
        <div class="row g-4">
            @forelse($items as $organizer)
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card h-100 border-0 organization-card-hover" style="box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);">
                        @if ($organizer->logo)
                            <img src="{{ asset('storage/' . $organizer->logo) }}" alt="Organization Logo"
                                class="organization-logo">
                        @else
                            <img src="{{ asset('images/default-organization.png') }}" alt="Default Logo"
                                class="organization-logo">
                        @endif
                        <div class="card-body d-flex flex-column justify-content-between">
                            <div>
                                <h5 class="card-title text-dark fw-semibold mb-2">
                                    {{ $organizer->organization_name }}
                                </h5>
                                <p class="text-muted mb-1 small">
                                    <i class="fa fa-id-card me-1 text-secondary"></i>
                                    Reg: {{ $organizer->registration_number ?? 'N/A' }}
                                </p>
                                <p class="text-muted mb-1 small">
                                    <i class="fa fa-calendar me-1 text-secondary"></i>
                                    Established:
                                    {{ $organizer->est_date ? \Carbon\Carbon::parse($organizer->est_date)->format('M Y') : 'N/A' }}
                                </p>
                                <p class="text-muted mb-1 small">
                                    <i class="fa fa-check-circle me-1 text-secondary"></i>
                                    Status: {{ ucfirst($organizer->status ?? 'pending') }}
                                </p>
                                <p class="text-muted small mb-0">
                                    <i class="fa fa-user me-1 text-secondary"></i>
                                    Representative: {{ $organizer->full_name }}
                                </p>
                            </div>
                            <a href="{{ route('aprroved-organization.details', $organizer->organize_id) }}"
                                class="btn btn-sm btn-outline-primary mt-3 w-100 custom-btn">
                                <i class="fa fa-eye me-1"></i> View Details
                            </a>
                            
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center no-data-message">
                    <h5 class="mb-3">No organizations found</h5>
                    <p class="small">Please check back later or register a new organization.</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection