@extends('backend.layout.main')

@section('title')
    Services
@endsection

@section('styles')
    
@endsection

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                 <h1 class="m-0">Our Services</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Starter Page</li>
                </ol>
            </div>
        </div>
    </div>
</div>


<div class="content">
    <div class="container-fluid">
        <div class="row">
        
            <div class="col-md-12">
                <div class="card">
                <div class="card-header">
                <h3 class="card-title">Our Services</h3>
                <a href="{{route('services.create')}}" class="btn btn-primary float-right"><i class="fa fa-plus"></i> Add</a>
                </div>
                
                <div class="card-body">
                    @include('backend.layout.alert')
                <table class="table table-bordered">
                <thead>
                <tr>

                <th style="width: 10px">#</th>
                <th>Page Picture</th>
                <th>Page Banner</th>
                <th>Title</th>
                <th>Content</th>               
                </tr>
                </thead>
                <tbody> 

                    @if ($services)
                        @foreach ($services as $item)
                        <tr>
                            <td>  
                                <a href="javacript::" class="btn btn-sm selector" uid="{{ $item->id }}" style="padding:0%;" uname="{{ $item->title }}"  data-toggle="modal" data-target="#confirm-modal">
                                    <i class="fa fa-trash"></i> </a></td>
                            <td>{{$item->id}}</td>
                                       
                            <td><img src="{{asset('images/'.$item->picture_small)}}" alt="" width="40%"></td>
                            <td><img src="{{asset('images/'.$item->picture_large)}}" alt="" width="40%"></td>
                            <td>{{ $item->title }}</td>
                            <td>{!!$item->description!!}</td>   
                            </tr>
                        @endforeach                        
                    @endif
               
                </tbody>
                </table>
                </div>
               
                </div>
                
               
                
                </div>
                <div class="modal fade text-left" id="confirm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel10" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <form method="post" action="{{ route('services.destroy',0) }}">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}
                        <div class="modal-header bg-danger white">
                          <h4 class="modal-title"><i class="fa fa-warning"></i> <span id="focustitle"></span></h4>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="focusid" id="focusid">
                            <p>Are you sure want to delete this Service?</p>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-outline-danger">Delete</button>
                        </div>
                        </form>
                      </div>
                    </div>
                </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    @if(session()->get('status') == 'true')
  swal("Success Message",
      "Company added successfully",
      "success");
  @elseif(session()->get('status') == 'false')
  swal("Error Message",
           "Please Try Again!!!",
           "error");
  @endif 


  $(document).on('click', '.selector', function(){
            var name = $(this).attr('uname');
            var id = $(this).attr('uid');
            
            $('#focusid').val(id);
            $('#focustitle').html(name);

        });
</script>
@endsection