@extends('layouts.header')
@section('content')
<div class="ob-mian-content">
            @include('layouts.navbar')
            <div class="ob-mian-container">
                <div class="section-head">
                    <!-- <a href="#" class="back-btn"><img src="images/back-btn.svg" alt="back" width="6" height="12"> Back to Category</a> -->
                    <h2 class="h2-head">Select a Category</h2>
                    <p>Hover over any options below to learn more about each type of service available. Click to make a selection and see available services.</p>
                </div>
                <div class="ob-mian-container-inner">
                    <div class="service-category">
                        <div class="service-category-list">
                           
                             @if(isset($categories) && !empty($categories))
                               @foreach($categories as $key=>$category)
                            <button type="button" class="service-category-list-item {{ ($category['program_id']==session('program_id')) ?'active':''}}" data-programid="{{ $category['program_id'] }}" data-id="{{ $category['id'] }}">
                                

                                <img src="{{ $category['category_image'] ? $category['category_image'] : asset('images/default_logo.png') }}" alt="{{ $category['name'] }}" width="80" height="80"  >
                                <span>{{ $category['name'] }}</span>
                            </button>
                            @endforeach
                            @endif
                        </div>
                        <div class="service-category-list-desc">
                            @if(isset($categories) && !empty($categories))
                               @foreach($categories as $key=>$category)
                            <div class="service-category-list-desc-in" id="{{ $category['id'] }}">
                                <p>{!! ($category['category_desc'])?? "" !!}</p>
                                
                            </div>
                             @endforeach
                            @endif
                        </div>

                        <div class="mt-3 service-next-btn">
                            <input type="hidden" name="programid" id="programid">
                            <a href="javascript:" id="m_service_catgories" disabled="disabled" style="max-width: 400px;" class="btn btn-primary py-1 line-height-1 w-100 find-Availability">Next</a>
                        </div>
                    </div>
                </div>


            </div>

        </div>
@endsection