@extends('admin.layout.layout')

@section('title') Programs List @endsection

@section('content')

<div class="page-content">
                    <div class="container-fluid">

                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h4 class="mb-sm-0 font-size-18">Programs</h4>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                                            <li class="breadcrumb-item active">Programs</li>
                                        </ol>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end page title -->
						
						
						<div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
									
                                        <div class="d-flex align-items-center  mb-3">
                                            <h5 class="mb-0 card-title flex-grow-1">Programs Lists</h5>
                                            <div class="flex-shrink-0">
                                                <a href="{{ route('admin.programs.create') }}" class="btn btn-primary">Add New</a>
                                                <a href="javascript:void(0)" class="btn btn-light" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><i class="bx bx-filter-alt"></i> Filter</a>
                                                
                                            </div>
                                        </div>
										
                                        <div class="table-responsive">
                                            <table class="table align-middle table-nowrap mb-0">
                                                <thead class="table-light">
                                                    <tr>
                                                       <th class="align-middle" style="width:120px;">Image</th>
                                                        <th class="align-middle">Name</th>
                                                        <th class="align-middle">Status</th>
                                                        <th class="align-middle">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
												@if(!empty($list) && $list->count())
												@foreach($list as $key => $value)
                                                    <tr>
                                                       <td> <img style="width:100px;" src="{{asset('storage')}}/{{$value->image}}" />
														</td>
                                                        <td>{{ $value->name }}
														</td>
                                                        <td>
													<span class="badge {{ $value->status == 'active' ? 'bg-success' : 'bg-danger' }}">
    {{ ucfirst($value->status) }}
</span></td>
                         <td>
<a href="{{ route('admin.programs.edit', $value->id) }}" class="btn btn-primary" style="padding-top: 4px;
    padding-bottom: 4px;"> 
                                               <i class="mdi mdi-pencil-box-outline"></i> Edit
                                            </a>						 
                         </td>                               
                                                    </tr>
@endforeach
                                @else<tr>
                                  <td colspan="3">There are no data.</td>
                              </tr>
                          @endif
                                                  </tbody>
                                            </table>
                                        </div>
                                        <!-- end table-responsive -->
										
										<div class="d-flex justify-content-center mt-3">
    {{ $list->withQueryString()->links('pagination::bootstrap-5') }}
</div>
										
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                    </div> <!-- container-fluid -->
                </div>
				
				
				<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Search Filter</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body" style="padding-top:0">
 
		<form method="GET" action="{{ route('admin.programs.index') }}" accept-charset="UTF-8">
   <div class="mb-3">
                                                    <label class="form-label">Name</label>
                                                    <input class="form-control" placeholder="Enter Name" name="name" type="text" value="{{ request('name') }}">
                                                </div>

												
												
												<div class="mb-3">
                                                    <label  class="form-label">Status</label>
                                                     <select class="form-select" name="status">
                                                         <option value="">Choose...</option>
            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
            <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
        </select>

                                                        </select>
                                                </div>
												
												<div class="mb-3">
												<div class="d-grid">
												<button type="submit" class="btn btn-primary btn-block bg-gradient waves-effect waves-light">Search</button>
												</div>
												</div>
												<div class="mb-3">
												<div class="d-grid">
												<a href="{{ route('admin.programs.index') }}" class="btn btn-outline-primary waves-effect waves-light shadow-none">Remove Filter</a>
												</div>
												</div>
	   </form>										
												
  </div>
</div>

@endsection
@section('script')

@endsection