@extends('seller.layout.master')
@section('content')

    <div class="blog-content pt60">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12">
                   @if (Session::has('message'))
                        <div class="alert alert-{{Session::get('messageType')}} alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>	
                            <strong>{{Session::get('message')}} </strong>
                        </div>
                    @endif
                </div>
                <div class="col-md-12">
                  <a href="{{route('add-seller-service')}}" class="btn-new btn-custom ctrl-btn">Add Service</a>
                </div>
                <div class="col-md-12">
                     
                   
                    <table id="table_id" class="display">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Description</th>
                                {{-- <th>Duration</th> --}}
                                <th>Price</th>
                                <th>Image</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                          @if(!empty($service) && count($service)>0)
                            @foreach($service as $key => $value)
                                <tr>
                                    <td>{{$value->title}}</td>
                                    <td>{{$value->description}}</td>
                                    {{-- <td>{{$value->duration}}</td> --}}
                                    <td>AED{{$value->price}}</td>
                                    <td>@if(!empty($value->cover_image))<img style="height:50px;width170px" src="{{secure_asset('storage/service_image/'.$value->cover_image)}}">@endif</td>
                                    <td>
                                      {{-- <a href="{{route('editservice',['id'=>$value->id])}}" class="btn btn-primary"><i class="fa fa-pencil"></i></a> --}}
                                      <a href="{{route('deleteService',['id'=>$value->id])}}" class="btn btn-warning">Cancel</a>
                                       {{-- <a data-original-title="view"  class="btn menu-icon vd_bd-green vd_green edit_order"
                                        > <i class="fa fa-pencil"></i></a> --}}
                                    </td>
                                </tr>
                            @endforeach
                          @endif  
                            {{-- <tr>
                                <td>Row 2 Data 1</td>
                                <td>Row 2 Data 2</td>
                            </tr> --}}
                        </tbody>
                    </table>




                </div> <!--  end blog-single -->
            </div>

        </div> <!--  end blog-single -->
    </div>
@endsection
@section('scripts')
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
    <script>
      function imageurl(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#preview').attr('src', e.target.result);
                    $('#preview').show();
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $(document).ready(function() {
            $(document).on('click','.add-btn',function(){
                //var clone = $('.orginaldiv').last().clone().find("input").val("").end();
                var clone = $(this).parents('.orginaldiv').eq(0).clone();
                //var clone = $('.orginaldiv').eq(0).clone();
                    var div_length=$('.clonediv').find('.orginaldiv').length;
                /*clone.find("textarea").val("");*/
                //alert(div_length);
                clone.find("input").val("");
                //clone.find(".del-btn").attr('disabled', false);
                //clone.find(".percent").attr('readonly', false);
                //clone.find('input').each(function(i) {
                // this.name= this.name.replace("[]", "["+div_length+"]");
                //}); 
                $(this).parents('.clonediv').append(clone);
                $('.del-btn').show();
            });

            $(document).on('click','.del-btn',function(){
                if($(this).parents('.clonediv').find('.orginaldiv').length > 1){
                    $(this).parents('.orginaldiv').remove();
                    //$('.orginaldiv').last().remove();
                    $('.add-btn').attr('disabled', false);
                }else{
                    $(this).hide();
                }
            });
        }); 
        $(document).ready( function () {
            $('#table_id').DataTable();
        } ); 
    </script>
       
   
@endsection