@extends('master')

@section('content')
      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-md-12 grid-margin">
              <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                  <h3 class="font-weight-bold">All Services</h3>
                  <h6 class="font-weight-normal mb-0"></h6>
                </div>
                <div align="right" class="col-12 col-xl-4 justify-content-end">
                    <a href="#add" class="btn btn-primary px-2 rounded" data-toggle="modal"> Add Service </a>
                </div>
              </div>
            </div>
          </div>

                <div class="modal" tabindex="-1" role="dialog" id="add">
                    <div class="modal-dialog modal-md" role="document">
                      <div class="modal-content" style="background-image:url('{{url('/')}}/images/carousel/banner_4.jpg');background-repeat:no-repeat;background-size:cover;">
                        <div class="modal-header">
                          <h4 class="modal-title text-white">Add new Service</h4>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <form method="post" action="{{route('service.add')}}" enctype="multipart/form-data">
                              @csrf
                              <div class="form-group">
                                <input type="text" class="form-control form-control-lg" name="name" id="exampleInputEmail1" placeholder="Name of Service">
                              </div>
                              <div class="form-group">
                                <input type="text" class="form-control form-control-lg" name="description" id="exampleInputEmail1" placeholder="Description of service">
                              </div>
                                
                              <div class="form-group">
                                <input type="file" class="form-control form-control-lg" name="image" id="exampleInputEmail1" placeholder="IImage of item">
                              </div>
                              
                              
                        </div>
                        <div class="modal-footer">
                          <button type="submit" class="btn btn-primary">Add Service</button>
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                        </form>
                      </div>
                    </div>
                  </div>

          <div class="row">
          <div class="col-md-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <p class="card-title mb-0">All Services</p>
                  <div class="table-responsive">
                    <table class="table table-striped table-borderless">
                      <thead>
                        <tr>
                        <th> Title</th>
                        <th> Description</th>
                        <th>Image</th>
                          <th>Actions</th>
                          
                        </tr>  
                      </thead>
                      <tbody>
                        @if(count($dept) > 0)
                          @foreach($dept as $vel)
                            
                        <tr>
                        <td>{{$vel->name}} </td>
                        <td>{{$vel->description}} </td>
                        <td><img src="{{url('/')}}/{{$vel->image}}" class="rounded-circle" style="height:50px;width:50px;"></td>
                          <td class="font-weight-medium">
                            <a href="{{route('service.del', $vel->id)}}" class="btn btn-danger rounded"> Delete </a>
                            <a href="#edit{{$vel->id}}" data-toggle="modal" class="btn btn-primary rounded"> Edit </a>
                            </td>
                            
                        </tr>
                       @endforeach
                        @else
                        <tr><td colspan="5"> No Service record </td></tr>
                      @endif
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          @if(count($dept)>0)
            @foreach($dept as $vol)
            <div class="modal" tabindex="-1" role="dialog" id="edit{{$vol->id}}">
                    <div class="modal-dialog modal-md" role="document">
                      <div class="modal-content" style="background-image:url('{{url('/')}}/images/carousel/banner_4.jpg');background-repeat:no-repeat;background-size:cover;">
                        <div class="modal-header">
                          <h4 class="modal-title text-white">Edit Service</h4>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <form method="post" action="{{route('service.update')}}" enctype="multipart/form-data">
                              @csrf
                              <div class="form-group">
                                <input type="text" class="form-control form-control-lg" name="name" value="{{ $vol->name }}" id="exampleInputEmail1" placeholder="Name of Department">
                              </div>
                              
                              <div class="form-group">
                                <input type="file" class="form-control form-control-lg" name="image" id="exampleInputEmail1" placeholder="Image of item">
                              </div>
                              
                              <input type="hidden" name="sid" value="{{$vol->id}}">
                        </div>
                        <div class="modal-footer">
                          <button type="submit" class="btn btn-primary">Update Service</button>
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                        </form>
                      </div>
                    </div>
                  </div>
                  @endforeach
                @endif

        
                  
                
        <!-- content-wrapper ends -->
        <!-- partial:partials/_footer.html -->
@stop