@extends('admin.layouts.admin')
@section('title')
Admin | Professional Service Details
@endsection

@section('styles')
<style type="text/css">
  .d-block.w-100.gal-menu{
    object-fit: cover;
    height: 200px;
    cursor: pointer;
  }
</style>

<link rel="stylesheet" href="{{ asset('plugins/datatables/dataTables.bootstrap4.css') }}">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/custom.button-switch.css') }}">
<style type="text/css">
    #artists-table th:nth-child(1){
        width: 50%!important;
    }
</style>
@endsection

@section('content')
<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Professional Service Details</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="{{ route('admin.services.professional') }}" >Professional Service</a></li>
              <li class="breadcrumb-item active">Show</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <p>&nbsp;</p>
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
        <div class="col-md-10">
        <div class="card card-info">

            @if ($errors->any())            
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

              <div class="card-header">
                <h3 class="card-title">Service Information</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->              
                <div class="card-body">
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-4">
                      <label for="exampleInputEmail1">Approve Status</label></div>
                      <div class="col-md-8">
                        <p class="">
                          @if($recordDetails->is_active == 1)
                            <span class="badge badge-success status">ACTIVE</span>
                          @else                      
                            <span class="badge badge-secondary status">INACTIVE</span>
                          @endif
                        </p>
                      </div>
                    </div>
                  </div>
                  <!--div class="form-group">
                    <div class="row">
                      <div class="col-md-4"><label for="exampleInputPassword1">Category</label></div>
                      <div class="col-md-8"><p class="text-success" style="font-weight: bold;">{{ strtoupper($recordDetails->name) }}</p></div>
                    </div>
                  </div-->
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-4">
                      <label for="exampleInputEmail1">Business name</label></div>
                      <div class="col-md-8">
                      <p class="">{{ $recordDetails->business_name }}</p></div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-4">
                      <label for="exampleInputEmail1">Service Provider Name</label></div>
                      <div class="col-md-8">
                      @if(isset($recordDetails->provider)&&$recordDetails->provider)
                        <span title="Click here to show provider details">
                        <a href="{{ url('admin/user/show/'.$recordDetails->provider->id) }}"><b>{{ $recordDetails->provider->name }}</b></a>&nbsp;&nbsp;
                        <i class="fa fa-hand-o-left text-dark" aria-hidden="true"></i> Click here</span>
                      @else
                        Service Provider not found.
                      @endif
                      </div>
                    </div>
                  </div>                  
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-4">
                      <label for="exampleInputEmail1">Price per Slot</label></div>
                      <div class="col-md-8">
                      <p class="">{{ $recordDetails->price_per_slot }}</p></div>
                    </div>
                  </div>                  
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-4">
                      <label for="exampleInputEmail1">Type</label></div>
                      <div class="col-md-8">
                      <p class="">{{ $recordDetails->name }}</p></div>
                    </div>
                  </div>                                    
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-4">
                      <label for="exampleInputEmail1">Address</label></div>
                      <div class="col-md-8">
                      <p class="" >{{ $recordDetails->address }}</p></div>
                    </div>
                  </div>                                                                  
                </div>                
            </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>        
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
      <p>&nbsp;</p>
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
          <div class="col-md-10">
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Hours Operation</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->              
              <div class="card-body">
                <div class="table-responsive">          
                  <table class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <th class="bg-warning">All Days</th>
                        <th class="bg-warning">From</th>
                        <th class="bg-warning">To</th>
                      </tr>
                    </thead>
                    <tbody>
                      @if(isset($recordDetails->hours) && count($recordDetails->hours)> 0 )
                        @foreach($recordDetails->hours as $key => $hour)
                        <tr>
                          <td>{{ $hour->day }}</td>
                          <td>{{ $hours[$hour->open_time] }}</td>
                          <td>{{ $hours[$hour->end_time]}}</td>
                        </tr>
                        @endforeach
                      @else
                      <tr>
                        <td colspan="3" class="text-center">No record found.</td>
                      </tr>
                      @endif
                    </tbody>
                  </table>
                </div>                            
              </div>
              <!-- /.card-body -->

              <!-- <div class="card-footer">
                <a href="{{ url('admin/services/res-night') }}" class="btn btn-danger">Back</a>&nbsp; -->
                <!-- <button type="submit" class="btn btn-primary">Update</button> -->
              <!-- </div> -->
            </div>
          <!-- /.card -->
          </div>
        <!-- /.col -->
        </div>        
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->

      <p>&nbsp;</p>
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
          <div class="col-md-10">
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Block Date Management</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->      
              <div class="card-body table-responsive">
                <table id="artists-table" class="table table-bordered table-hover" style="width:100%">
                  <thead>
                  <tr>
                      <th>Date</th>                    
                      <th>Slot Time</th>                                                           
                  </tr>
                  </thead>
                  <tbody>                
                  </tbody>                                  
                </table>
              </div>
            <!-- /.card-body -->
            </div>
          <!-- /.card -->
          </div>
        <!-- /.col -->
        </div>
      </div> 
      
      <p>&nbsp;</p>
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
          <div class="col-md-10">
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Availability Management</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->              
              <div class="card-body">                    
                @if(count($recordDetails->serviceSlots) > 0)
                <h5>
                  @foreach($recordDetails->serviceSlots as $keySlot => $slot)
                    <span class="badge badge-pill badge-success status">{{ $slot->slot_start }}</span>
                  @endforeach
                  </h5>
                @else
                No slots found.
                @endif
              </div>
              <!-- /.card-body -->

              <!-- <div class="card-footer">
                <a href="{{ url('admin/services/res-night') }}" class="btn btn-danger">Back</a>&nbsp; -->
                <!-- <button type="submit" class="btn btn-primary">Update</button> -->
              <!-- </div> -->
            </div>
          <!-- /.card -->
          </div>
        <!-- /.col -->
        </div>        
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->

      <p>&nbsp;</p>
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
          <div class="col-md-5">
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Gallery Images</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->              
              <div class="card-body">              
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  @if(count($recordDetails->gallery)>0)
                  <ol class="carousel-indicators gallery">
                    @foreach($recordDetails->gallery as $keyGallery => $gallery)
                      <li data-target="#carouselExampleIndicators" data-slide-to="{{$keyGallery}}" class=""></li>                      
                    @endforeach
                  </ol>                  
                  <div class="carousel-inner">
                    @foreach($recordDetails->gallery as $keyGallery => $gallery)
                      <div class="carousel-item">
                        <img class="d-block w-100 gal-menu" src="{{ asset('storage/images/prof_gallery/web/'.$gallery->image) }}" alt="Gallery image">
                      </div>
                    @endforeach                    
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                  @else
                  <span>No images found.</span>
                  @endif
                </div>
              </div>
              <!-- /.card-body -->
            </div>
          <!-- /.card -->
          </div>

          <div class="col-md-5">
            
          <!-- /.card -->
          </div>
          <div class="col-md-2"></div>
        <!-- /.col -->
        </div>        
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->

      <div class="container-fluid">        
        <div class="row">
          <div class="col-md-10">
            <div class="card card-info">
              <div class="card-footer">
                <a href="{{ url('admin/services/professional') }}" class="btn btn-danger">Back</a>&nbsp;
                
              </div>
            </div>
          <!-- /.card -->
          </div>
          <div class="col-md-2"></div>
        <!-- /.col -->
        </div>        
        <!-- /.row (main row) -->
      </div>
      <!-- modal -->
      <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
          
            <!-- Modal Header -->
            <div class="modal-header">              
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            <!-- Modal body -->
            <div class="modal-body">
              <img class="d-block w-100" src="" alt="Image">
            </div>
            
            <!-- Modal footer -->
            <!-- <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div> -->
            
          </div>
        </div>
      </div>
      <!-- end modal -->

      <button id="scrollTopBtn" class="scrollTopBtn" title="Go to top">Top</button>
    </section>
    <!-- /.content -->
@endsection

@section('scripts')
<script type='text/javascript' src="{{asset('plugins/datatables/jquery.dataTables.js') }}"></script> 
<script type='text/javascript' src="{{asset('plugins/datatables/dataTables.bootstrap4.js') }}"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript">
    var oTable = '';
    $(document).ready(function () {

        oTable = $('#artists-table').DataTable({
            "lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",
                //"info": "Showing page _PAGE_ of _PAGES_",
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            searching: false,
            paging: true,
            processing: true,
            serverSide: true,
            ajax: {
                "url": baseUrl + 'admin/services/blockDates',
                "type": "GET",
                "data": function(d){
                    d.service_id = {{ Request::segment(5) }};
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            },           
            columns: [
                { data: 'stop_date', name: 'stop_date', render: function(data, type, row) {
                   return moment(row.stop_date).format("dddd, DD MMM, YYYY");
                }},
                { data: null, name: 'stop_date', render: function(data, type, row) {
                  return row.slot_start+" - "+row.slot_end;
                }}
            ],
            'columnDefs': [ {
                'targets': [1], /* column index */
                'orderable': false, /* true or false */
            },            
            {
                "targets": [ 1 ],
                "searchable": false
            }],
            'aaSorting': [ 0, 'DESC']
        });

        $("select[name=active_status], select[name=type]").on("change", function(){
            filterButton();
            oTable.draw();
        });

        $(".filter-clear-button").on("click", function(){
            $(".filter-button").each(function(){  
                $(this).val('');
            });
            $(".filter-clear-button").hide();
            oTable.draw();
        });

    });
</script>


<script type="text/javascript">

// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

$('.carousel-indicators.gallery li, .carousel-indicators.menu li').eq(0).addClass("active");
$('.carousel-item').eq(0).addClass("active");

$(".card-body.menu").find('.carousel-item').eq(0).addClass("active");

$(".d-block.w-100").on("click", function(){
  console.log($(this).attr("src"));
  var url = $(this).attr("src");
  $("#myModal .modal-body img").attr("src", url);
  $("#myModal").modal('show');
});
</script>

@endsection