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

                <h4 class="card-title">Emails</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">

                    <table id="tech-companies-1" class="table table-striped display-all">
                        <thead>
                            <tr>
                                <th id="tech-companies-1-col-0-clone">Name</th>
                                <th data-priority="1" id="tech-companies-1-col-1-clone">Email</th>
                                <th data-priority="3" id="tech-companies-1-col-2-clone">Subject</th>
                                <th data-priority="1" id="tech-companies-1-col-3-clone">Service Type</th>
                                <th data-priority="3" id="tech-companies-1-col-4-clone">Message</th>
                                <th data-priority="3" id="tech-companies-1-col-7-clone">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($emails 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->name}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_title_ar">{{$item->email}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_content_en">{{$item->subject}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_content_ar">{{$item->service_type}}</td>
                                <td data-org-colspan="1" data-priority="6" data-columns="tech-companies-1-col-8" class="service_platforms">{{$item->message}}</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 -->


<!--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.email') }}" 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 () {

        $(".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