@extends('admin.layout.app')
@push('headerscript')
    <!-- DataTables -->
    <link href="{{ asset('skote/layouts/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
    <link href="{{ asset('skote/layouts/assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
    <!-- Responsive datatable examples -->
    <link href="{{ asset('skote/layouts/assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
@endpush
@section('content')
    <div class="page-content" style="padding-top:3% !important">
        <div class="row">
            <div class="flash-message">
                @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                    @if (Session::has('alert-' . $msg))
                        <section>
                            <div class="row">
                                <div class="col-sm-12 col-lg-12">
                                    <center>
                                        <div data-example-id="simple-alerts" class="bs-example">
                                            <div role="alert" class="alert alert-success">
                                                <strong>
                                                    Services Create successfully
                                                </strong>
                                            </div>
                                        </div>
                                    </center>
                                </div>
                            </div>
                        </section>
                    @endif
                @endforeach
            </div> <!-- end .flash-message -->
        </div>
    </div>
    <div class="">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h2 class="card-title text-center">All Contact</h2>
                            {{-- <a href="{{ route('contactdetail.create') }}" class="btn btn-primary btn-sm pull-right"><i
                                class="fa fa-plus"></i> Add Contact</a> --}}
                            <hr>
                            <table id="datatable-buttons" class="table table-bordered dt-responsive nowrap w-100">
                                <!-- <input type="button" name="check" value="Deselect All" class="btn btn-primary" onclick='deSelect()'> -->
                                <thead>
                                    <tr>
                                        <th>S.No.</th>
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">Mobile No. 1</th>
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">Mobile No. 2</th>
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">What's App No. 1</th>
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">What's App No. 2</th>
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">Email</th>
                                        <th style="text-align: center">Action</th> 
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($contactdetail as $r)
                                    <tr>
                                        <th>{{ $loop->iteration }}</th>
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">{{ $r->mobile_1 }}</th> 
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">{{ $r->mobile_2 }}</th> 
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">{{ $r->whatsapp_1 }}</th> 
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">{{ $r->whatsapp_2 }}</th> 
                                        <th style="width: 350px; max-width:350px; white-space: inherit;">{{ $r->email }}</th> 
                                        <td class="product-remove text-center"><a href="{{ route('contactdetail.edit',$r->unique_id) }}"><i class="fa fa-edit"></i></a>
                                         </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->
        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
@endsection
@push('footerscript')
    <script src="{{ asset('skote/layouts/assets/js/pages/form-validation.init.js') }}"></script>
    <!-- Required datatable js -->
    <script src="{{ asset('skote/layouts/assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('skote/layouts/assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Buttons examples -->
    <script src="{{ asset('skote/layouts/assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('skote/layouts/assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}">
    </script>
    <script src="{{ asset('skote/layouts/assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('skote/layouts/assets/libs/pdfmake/build/pdfmake.min.js') }}"></script>
    <script src="{{ asset('skote/layouts/assets/libs/pdfmake/build/vfs_fonts.js') }}"></script>
    <script src="{{ asset('skote/layouts/assets/libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('skote/layouts/assets/libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('skote/layouts/assets/libs/datatables.net-buttons/js/buttons.colVis.min.js') }}"></script>
    <!-- Responsive examples -->
    <script src="{{ asset('skote/layouts/assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}">
    </script>
    <script src="{{ asset('skote/layouts/assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}">
    </script>
    <!-- Datatable init js -->
    <script src="{{ asset('skote/layouts/assets/js/pages/datatables.init.js') }}"></script>
    <script>
        $('.number').keyup(function(e) {
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            }
        });
            function selects(){  
                var ele=document.getElementsByName('chk');  
                for(var i=0; i<ele.length; i++){  
                    if(ele[i].type=='checkbox')  
                        ele[i].checked=true;  
                }  
            }  
            function deSelect(){  
                var ele=document.getElementsByName('chk');  
                for(var i=0; i<ele.length; i++){  
                    if(ele[i].type=='checkbox')  
                        ele[i].checked=false;  
                      
                }  
            }             
    </script>
@endpush