@extends('front.layout.app')
@section('content')

<style>
header {
    background: #011452;
    padding: 0;
}
.pro-bg {
    margin-top: 142px;
}
.pro-bg::before{
    content: unset !important;
}
.cat-bg-img {
    position: absolute;
    object-fit: cover;
    z-index: -1;
    height: 100%;
    width: 100%;
    top: 0;
}
</style>
<main>
    @if(isset($department))
        <section class="pro-bg">
            <img src="https://custom.democlientlink.com/wisezone/public/assets/front/images/pro-bg.png" class="img-fluid cat-bg-img" alt="">
            <h3 class="mb-5 pb-3 pt-5">{{ $department->department_name }}</h3>
        </section>
        @if(isset($proByCat))
            @if(count($proByCat) > 0)
            <section class="services org mt-5">
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-10">
                            <div class="row gx-5 gy-5">
                                
                                @foreach($proByCat as $project)
                                <div class="col-12 col-lg-3 col-md-4 panel">
                                    <div class="card h-100">
                                        <div class="height"><img class="card-img-top" src="{{ asset($project->image) }}" alt="Card image cap">
                                        </div>
                                        <div class="padd">
                                            <div class="card-body">
                                                <a href="{{ route('project_detail', $project->slug) }}">
                                                    <h5 class="card-title">{{ $project->department->department_name }}</h5>
        
                                                    <p class="card-text">{{ \Illuminate\Support\Str::limit($project->title, 45, '...') }}</p>
                                                </a>
                                            </div>
                                            <hr>
                                            <div class="card-body d-flex justify-content-between">
                                                <a href="#" class="card-link"><img src="{{ asset($project->procurement->image) }}" class="img-fluid">
                                                    <span class="user">{{ $project->procurement->name }}</span></a>
                                                <a href="#" class="card-link strt">Starting at: <span
                                                        class="start">${{ $project->budget }}</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
        
                        </div>
                    </div>
                    @if(count($proByCat) > 6)
                    <div class="btn-div text-center mt-5 pt-3">
                        <button class="btn" onclick="location.href = '{{ route("project-zone") }}'">
                            View All </button>
                    </div>
                    @endif
                </div>
            </section>
            @else
            <div class="text-center my-5 py-5">
                <h2 class="text-dark">No Projects in this category</h2>
            </div>
            @endif
        @elseif(isset($procurements))
            @if(count($procurements) > 0)
            <section class="services org mt-5">
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-10">
                            <div class="row gx-5 gy-5">
                                @foreach($procurements as $procurement)
                                <div class="col-12 col-lg-3 col-md-4 panel">
                                    <div class="card h-100">
                                        <div class="height"><img class="card-img-top" src="{{ asset($procurement->image) }}" alt="Card image cap">
                                        </div>
                                        <div class="padd">
                                            <div class="card-body">
                                                <a href="{{ route('organization_show', $procurement->id) }}">
                                                    <!--<h5 class="card-title">{{ $department->department_name }}</h5>-->
                                                    <h5 class="card-title">{{ $procurement->name }}</h5>
                                                    <p class="card-text">{{ \Illuminate\Support\Str::limit($procurement->desc, 65, '...') }}</p>
                                                </a>
                                            </div>
                                            <hr>
                                            <!--<div class="card-body d-flex justify-content-between">-->
                                            <!--    <a href="{{ route('org-pro-profile', $procurement->id) }}" class="card-link"><img src="{{ asset($procurement->image) }}" class="img-fluid">-->
                                            <!--        <span class="user">{{ $procurement->name }}</span></a>-->
                                            <!--</div>-->
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                
                            </div>
        
                        </div>
                    </div>
                </div>
            </section>
            @else
            <div class="text-center my-5 pt-3">
                <h2 class="text-dark">No Services in this category</h2>
            </div>
            @endif
        @elseif(isset($orgByCat))
            @if(count($orgByCat) > 0)
            <section class="services org mt-5">
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-10">
                            <div class="row gx-5 gy-5">
                                @foreach($orgByCat as $org)
                                <div class="col-12 col-lg-3 col-md-4 panel">
                                    <div class="card h-100">
                                        <div class="height"><img class="card-img-top" src="{{ asset($org->image) }}" alt="Card image cap">
                                        </div>
                                        <div class="padd">
                                            <div class="card-body">
                                                <a href="{{ route('organization_show', $org->id) }}">
                                                    <h5 class="card-title">{{ $org->department->department_name }}</h5>
        
                                                    <p class="card-text">{{ \Illuminate\Support\Str::limit($org->service_description, 45, '...') }}</p>
                                                </a>
                                            </div>
                                            <hr>
                                            <div class="card-body d-flex justify-content-between">
                                                <a href="#" class="card-link"><img src="{{ asset($org->procurement->image) }}" class="img-fluid">
                                                    <span class="user">{{ $org->procurement->name }}</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
        
                        </div>
                    </div>
                    @if(count($orgByCat) > 6)
                    <div class="btn-div text-center mt-5 py-5">
                        <button class="btn" onclick="location.href = '{{ route("organization-zone") }}'">
                            View All </button>
                    </div>
                    @endif
                </div>
            </section>
            @else
            <div class="text-center my-5 pt-3">
                <h2 class="text-dark">No Services in this category</h2>
            </div>
            @endif
        @endif
    @endif
</main>

@endsection