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

                <h4 class="card-title">Services</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-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 ($servicesCards 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="card_title_en">{{$item->card_title_en}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="card_title_ar">{{$item->card_title_ar}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="card_content_en">{{$item->card_content_en}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="card_content_ar">{{$item->card_content_ar}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="card_image"><img src="{{ asset('img/'.$item->card_image)}}" width="200" height="200" 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.cards') }}" 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="card_title_en" name="card_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="card_title_ar" name="card_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="card_content_en" name="card_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="card_content_ar" name="card_content_ar"></textarea>
                    </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="card_image" name="card_image">
                            <label class="custom-file-label" for="card_image">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 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.cards') }}" 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="card_title_enEdit" name="card_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="card_title_arEdit" name="card_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="card_content_enEdit" name="card_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="card_content_arEdit" name="card_content_ar"></textarea>
                    </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="card_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.cards') }}" 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>
       $(document).ready(function () {
        $(".btnEdit").click(function () {
            var row = $(this).closest("tr");
            var id = $(row).find(".id").html();    
            var card_title_en = $(row).find(".card_title_en").html();    
            var card_title_ar = $(row).find(".card_title_ar").html();    
            var card_content_en = $(row).find(".card_content_en").html();    
            var card_content_ar = $(row).find(".card_content_ar").html();    
            $("#id").val(id); 
            $("#card_title_enEdit").val(card_title_en);
            $("#card_title_arEdit").val(card_title_ar);
            $("#card_content_enEdit").val(card_content_en);
            $("#card_content_arEdit").val(card_content_ar);
        });

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