@extends('admin.admin_master')
@section('content-header', $page_header)
@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Staff</li>
                        </ol>
                    </div>
                    <div class="col-sm-6">
                        <span class="float-right"><a href="{{ route($link . '.create') }}"
                                class="btn btn-sm btn-fill btn-primary">{!! ADD_ICON !!}</a></span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Main content -->
        <section class="content">



            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-body">
                            <table class="table table-bordered table-sm table-striped table-borderless" id="mytable">
                                <thead class="bg-primary">
                                    <tr>
                                        <th>S.No</th>
                                        <th style="width: 250px;">Name</th>
                                        <th>Designation</th>
                                        <th>Phone</th>
                                        <th>Email</th>

                                        <th class="text-center">Show in Homepage</th>
                                        <th class="text-center">Sequence No</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="table-body">

                                    @if (!empty($list))
                                        @foreach ($list as $item)
                                            <tr>
                                                <td></td>
                                                <td style="font-size: 13px;">{{ $item->title_en }} <span class="d-block"> {{ $item->title_np }}</span></td>
                                                    <td style="font-size: 13px;">{{$item->designations }}</td>



                                                <td>{{ $item->phone_no }}</td>
                                                <td>{{ $item->email }}</td>

                                                <td class="text-center">
                                                    @if ($item->show_on_homepage == '1')
                                                        Yes
                                                    @else
                                                        No
                                                    @endif
                                                </td>
                                                <td class="text-center">{{ $item->sort_order }}</td>
                                                <td class="text-center">
                                                    @if ($item->status == '1')
                                                        {!! ACTIVE_STATUS !!}
                                                    @else
                                                        {!! INACTIVE_STATUS !!}
                                                    @endif
                                                </td>
                                                <td class="text-center">
                                                    <a
                                                        href="{{ route($link . '.edit', $item->id) }}" class="btn btn-primary btn-sm">{!! EDIT_ICON !!}</a>
                                                    <a href="{{ route($link . '.delete', $item->id) }}"
                                                        class="resetbtn btn btn-danger btn-sm">{!! DELETE_ICON !!} </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="5">{!! NO_RECORD !!}</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <div id="pagination">
                            {{-- {!! $list->links() !!} --}}
                        </div>
                        <div id="paginate">

                        </div>
                    </div>
                </div>
            </div>

        </section>
        <!-- /.content -->
    </div>
    @push('script')

        <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
        <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#mytable').DataTable();
            });
        // $(document).ready(function(){
        //     sortlist();
        //     });
        function sort(){

            var lang = $('#lang').val();
            $.ajax({
                type : "GET",
                data : {
                    lang  : lang
                },
                url : "{{route('sortlist')}}",
                success : function(data){
                    if(data.success){
                        console.log(data);
                            li = "<option value=''>Select designation</option>";
                            $.each(data[0],function(key,cat){
                                    li += "<option value= '"+cat.id+"'>"+cat.title+"</option>"
                                    // console.log(li)
                                })
                            $("#designation").empty();
                            $("#designation").append(li);
                    }

                }
            })
        }
        var page = '';
        $(document).on('click','#paginate a', function(e){
                e.preventDefault();
                page = $(this).attr('href');
                // console.log(page)
                fetch_data();

            })

            $(document).on('click','#btn',function(){

                $('#btn').prop('disabled',true)
                fetch_data()
            })


        function fetch_data(){
            if(page == ''){
                url = "{{route('sorttable')}}";
            }else{

                url = page;
            }

            var designation = $('#designation').val();
            var title = $('#title').val();
            var lang = $('#lang').val();

            // console.log(title,designation,lang)
            $.ajax({
                type : "GET",
                data : {
                    id : designation,
                    title : title,
                    lang  : lang
                },
                url : url,
                success : function(data){
                    if(data.success){
                        // console.log(data)
                        ol = '';
                        var edit ='';
                        $('#pagination').hide();
                        if(!jQuery.isEmptyObject(data.tabledata)){
                            var count =( data.tabledata.current_page - 1 )* 10;
                            var c = 0;
                            var id = ''
                            $.each(data.tabledata.data,function(key,item){
                                // console.log(item);
                                // var count =( data.tabledata.current_page - 1 )* 10;
                                if(item.email == null){
                                    item.email = ''
                                }
                                var title = item.designation.title;
                                var edit_url = "{{route($link.'.edit','id')}}";
                                var del_url = "{{ route($link . '.delete', 'id')}}"
                                edit_url = edit_url.replace('id',item.id);
                                del_url = del_url.replace('id',item.id);
                                edit = "<a href="+edit_url+"><i class='far fa-edit'></i></a>&nbsp;";
                                del = "<a href="+del_url+"><i class='fas fa-trash-alt'></i></a>&nbsp;";
                                // console.log(url2);

                                    if(item.lang == 'np'){
                                         var lang = 'Nepali'
                                    }
                                    else{
                                        var lang = 'English'
                                    }
                                    if(item.show_on_homepage == 1){
                                        var show_on_homepage = 'Active'
                                    }
                                    else{
                                        var show_on_homepage = 'InActive'
                                    }
                                    if(item.status == 1){
                                        var status = 'Active'
                                    }
                                    else{
                                        var status = 'InActive'
                                    }
                                    c = c+1;
                                    count = count+1;
                                        ol += "<tr>"
                                            +"<td>"+(count)+"</td>"
                                            +"<td>"+title+"</td>"
                                            +"<td>"+item.name+"</td>"
                                            +"<td>"+item.phone_no+"</td>"
                                            +"<td>"+item.email+"</td>"
                                            +"<td>"+lang+"</td>"
                                            +"<td>"+show_on_homepage+"</td>"
                                            +"<td>"+item.sort_order+"</td>"
                                            +"<td>"+status+"</td>"
                                            +"<td class = 'text-center'>"+edit+""+del+"</td>"+
                                            "</tr>"
                                        })
                                        // console.log(ol)

                        }else{

                            ol += "<tr>"
                                +"<td colspan='10' class ='text-center'>No Record..</td>"+
                                "</tr>"
                        }
                        // console.log(data)
                        $("#table-body").empty();
                        $("#table-body").append(ol);
                        $('#paginate').html(data['pagination']);
                        // window.history.pushState({}, null, url);
                        $('#btn').prop('disabled',false)

                    }
                }
            })
           }
        </script>
    @endpush
@endsection