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

                <h4 class="card-title">Clients 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 type="button" class="btn btn-primary waves-effect waves-light"  data-toggle="modal"  data-target="#exampleModalScrollable">Scrollable modal</button>
                    <table id="tech-companies-1" class="table table-striped display-all">
                        <thead>
                            <tr>
                                <th id="tech-companies-1-col-0-clone">Project Name</th>
                                <th data-priority="1" id="tech-companies-1-col-1-clone">Service Type</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 ($clients 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="client_name">{{$item->client_name}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_type">{{$item->service_type}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="client_image">{{$item->client_image}}</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.clients') }}" method="POST">
                    @csrf
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Project Name</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text"  id="client_name" name="client_name">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Service Type</label>
                    <div class="col-md-10">
                        <select class="form-control select2" name="service_type">
                                <option value="Web Development">Web Development
                                </option>
                                <option value="Mobile Development">Mobile Development
                                </option>
                                <option value="Design">Design
                                </option>
                        </select> 
                    </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">
                            <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 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.clients') }}" method="POST">
                    @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">Project Name</label>
                    <div class="col-md-10">
                        <input class="form-control" type="text"  id="client_nameEdit" name="client_name">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-md-2 col-form-label">Service Type</label>
                    <div class="col-md-10">
                        <select class="form-control select2" name="service_type" id="service_typeEdit">
                                <option value="Web Development">Web Development
                                </option>
                                <option value="Mobile Development">Mobile Development
                                </option>
                                <option value="Design">Design
                                </option>
                        </select> 
                    </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">
                            <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.clients') }}" 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 client_name = $(row).find(".client_name").html();    
            var service_type = $(row).find(".service_type").html();    
            $("#id").val(id); 
            $("#client_nameEdit").val(client_name);
            $("#service_typeEdit").val(service_type);
        });

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