@extends('dashboard.partials.main')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                <h4 class="card-title">Our Services Section</h4>
                {{-- <p class="card-title-desc">This is an experimental awesome solution for responsive tables with complex data.</p> --}}

                <div class="table-rep-plugin">
                    <div class="table-wrapper"><div class="btn-toolbar">

                  <button style="margin-bottom: 10px" type="button" class="btn btn-primary waves-effect waves-light"  data-toggle="modal"  data-target="#exampleModalScrollable">Create</button>

                    <table id="tech-companies-1" class="table table-striped display-all">
                        <thead>
                            <tr>
                                <th id="tech-companies-1-col-0-clone">Title En</th>
                                <th data-priority="1" id="tech-companies-1-col-1-clone">Title Ar</th>
                                <th data-priority="3" id="tech-companies-1-col-2-clone">Content En</th>
                                <th data-priority="1" id="tech-companies-1-col-3-clone">Content Ar</th>
                                <th data-priority="3" id="tech-companies-1-col-4-clone">Platforms</th>
                                <th data-priority="3" id="tech-companies-1-col-5-clone">Image</th>
                                <th data-priority="3" id="tech-companies-1-col-6-clone">Edit</th>
                                <th data-priority="3" id="tech-companies-1-col-7-clone">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($ourServices as $item)
                            <tr>
                                <td class="id" hidden>{{$item->id}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_title_en">{{$item->service_title_en}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_title_ar">{{$item->service_title_ar}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_content_en">{{$item->service_content_en}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_content_ar">{{$item->service_content_ar}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_platforms">{{$item->service_platforms}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_image"><img src="{{ asset('img/'.$item->service_image)}}" width="300" height="300" class="img-thumbnail"/></td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" ><button class="btn btn-warning btnEdit"  data-toggle="modal"  data-target="#editModal">Edit</button></td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" ><button class="btn btn-danger btnDelete"  data-toggle="modal"  data-target="#deleteModal">Delete</button></td>
                            </tr>  
                            @endforeach
                          
                    
                        </tbody>
                    </table>

                </div>

                </div>

            </div>
        </div>
    </div>
    <!-- end col -->
</div>
<!-- end row -->



<!--create-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" style="display: none;" aria-modal="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="exampleModalScrollableTitle">Create</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
          
            <div class="modal-body">
                <form action="{{ route('create.services') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Title En</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text"  id="service_title_en" name="service_title_en">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Title Ar</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text"  id="service_title_ar" name="service_title_ar">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Content En</label>
                    <div class="col-md-10">
                        <textarea required="" class="form-control" rows="5" id="service_content_en" name="service_content_en"></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Content Ar</label>
                    <div class="col-md-10">
                        <textarea required="" class="form-control" rows="5" id="service_content_ar" name="service_content_ar"></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Platforms</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text"  id="service_platforms" name="service_platforms">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Image</label>
                    <div class="col-md-10">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="service_image" name="service_image">
                            <label class="custom-file-label" for="service_image">Choose file</label>
                        </div>
                    </div>
                </div>
                <hr/>
                <!--icons-->
           {{-- <div class="outer-repeater">
            <div data-repeater-list="outer-group" class="outer">
                <div data-repeater-item="" class="outer">
                <div class="inner-repeater mb-4">
                    <div data-repeater-list="inner-group" class="inner form-group mb-0 row">
                        <label class="col-form-label col-lg-2">Icon</label>
                        
                    <div data-repeater-item="" class="inner col-lg-10 ml-md-auto" style="">
                            <div class="mb-3 row align-items-center">
                                <div class="col-md-4">
                                    <div class="mt-4 mt-md-0">
                                        <input type="file" class="form-control-file">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mt-2 mt-md-0">
                                        <input data-repeater-delete="" type="button" class="btn btn-primary btn-block inner" value="Delete">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-end">
                        <div class="col-lg-10">
                            <input data-repeater-create="" type="button" class="btn btn-success inner" value="Add Number">
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div> --}}
                <!--end icons-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <input type="submit" class="btn btn-primary" value="Save"/>
            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--end create-->

<!--edit-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" style="display: none;" aria-modal="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="exampleModalScrollableTitle">Edit</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
          
            <div class="modal-body">
                <form action="{{ route('update.services') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="id" name="id"/>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Title En</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text"  id="service_title_enEdit" name="service_title_en">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Title Ar</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text"  id="service_title_arEdit" name="service_title_ar">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Content En</label>
                    <div class="col-md-10">
                        <textarea required="" class="form-control" rows="5" id="service_content_enEdit" name="service_content_en"></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Content Ar</label>
                    <div class="col-md-10">
                        <textarea required="" class="form-control" rows="5" id="service_content_arEdit" name="service_content_ar"></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Platforms</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text"  id="service_platformsEdit" name="service_platforms">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Image</label>
                    <div class="col-md-10">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="customFile" name="service_image">
                            <label class="custom-file-label" for="customFile">Choose file</label>
                        </div>
                    </div>
                </div>
          
           
            </div>
    
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <input type="submit" class="btn btn-primary" value="Save"/>
            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--end edit-->

<!--delete-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" style="display: none;" aria-modal="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="exampleModalScrollableTitle">Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
          
            <div class="modal-body">
                <form action="{{ route('delete.services') }}" method="POST">
                    @csrf
                    <input type="hidden" id="idDelete" name="id"/>
                <div class="form-group row">
                    <label class="col-form-label">Are you sure to delete ?</label>
                    <div class="col-md-10" id="deleteLabel">
                    </div>
                </div>           
            </div>
    
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <input type="submit" class="btn btn-danger" value="Confirm Delete"/>
            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--end delete-->

@endsection

@section('scripts')
<script src="{{asset('libs/summernote/summernote-bs4.min.js')}}"></script>
<script src="{{asset('libs/jquery.repeater/jquery.repeater.min.js')}}"></script>
<script src="{{asset('js/pages/task-create.init.js')}}"></script>
<script>
       $(document).ready(function () {
        $(".btnEdit").click(function () {
            var row = $(this).closest("tr");
            var id = $(row).find(".id").html();    
            var service_title_en = $(row).find(".service_title_en").html();    
            var service_title_ar = $(row).find(".service_title_ar").html();    
            var service_content_en = $(row).find(".service_content_en").html();    
            var service_content_ar = $(row).find(".service_content_ar").html();    
            var service_platforms = $(row).find(".service_platforms").html();   
            $("#id").val(id); 
            $("#service_title_enEdit").val(service_title_en);
            $("#service_title_arEdit").val(service_title_ar);
            $("#service_content_enEdit").val(service_content_en);
            $("#service_content_arEdit").val(service_content_ar);
            $("#service_platformsEdit").val(service_platforms);
        });

        $(".btnDelete").click(function () {
            var row = $(this).closest("tr");
            var id = $(row).find(".id").html();    
            var service_title_en = $(row).find(".service_title_en").html();    
            $("#idDelete").val(id); 
            $("#deleteLabel").html(service_title_en);   
        });
    });
</script>
@endsection