@extends('layouts.app')

@section('styles')

    <!-- Data table css -->
    <link href="{{URL::asset('assets/plugins/datatable/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css')}}"  rel="stylesheet">
    <link href="{{URL::asset('assets/plugins/datatable/responsivebootstrap4.min.css')}}" rel="stylesheet" />

    <!-- Select2 css -->
    <link href="{{URL::asset('assets/plugins/select2/select2.min.css')}}" rel="stylesheet" />

    <style type="text/css">
        
        table tbody td {
          word-break: break-word; word-break: break-all; white-space: normal;
        }

        .loading {
            cursor: progress; 
            pointer-events: none; 
            opacity: 0.6;        
        }

        .overlay {
            display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.5);
            z-index: 9999;
        }

        .loader {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #d62825;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }
    
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

    </style>
@endsection

@section('content')

    <div class="overlay">
        <div class="loader"></div>
    </div>

    <!-- page-header -->
    <div class="page-header">
        <ol class="breadcrumb"><!-- breadcrumb -->
            <li class="breadcrumb-item active" aria-current="page">Members</li>
        </ol><!-- End breadcrumb -->
        <div class="ml-auto">

            <div class="input-group">

                <a href="{{ route('admin.members.members.add') }}" class="btn btn-success text-white mr-2 btn-sm" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Add new member">
                        <i class="fa fa-plus" aria-hidden="true"></i> Add new member
                </a>

            </div>

        </div>
    </div>
    <!-- End page-header -->

    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <!-- <div class="card-title">File export Datatable</div> -->
                </div>
                <div class="card-body pt-0">
                    
                    <form id="table_filter" name="table_filter" method="GET" enctype="multipart/form-data" class="datatable_custom_filter" onsubmit="setSessionFilter(); return false ;" >
                        <!-- @csrf -->
                        <div class="row">
                            <div class="col-md-2 col-lg-2">
                                <div class="form-group ">
                                    <label class="form-label">Type</label>
                                    <select name="type"  id="type" class="form-control" data-placeholder="Type" tabindex="-1" aria-hidden="true">
                                        <option value="">-- All --</option>
                                        <option value="1" {{ Session::get('members_type') == 1 ? 'selected' : '' }}>Individual</option>
                                        <option value="2" {{ Session::get('members_type') == 2 ? 'selected' : '' }}>Company</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-2 col-lg-2">
                                <div class="form-group ">
                                    <label class="form-label">Have Email</label>
                                    <select name="have_email"  id="have_email" class="form-control" data-placeholder="Have Email" tabindex="-1" aria-hidden="true">
                                        <option value="">-- All --</option>
                                        <option value="1" {{ Session::get('members_have_email') == 1 ? 'selected' : '' }}>Have Email Only</option>
                                        <option value="2" {{ Session::get('members_have_email') == 2 ? 'selected' : '' }}>No Email Only</option>
                                    </select>
                                </div>
                            </div>


                            <div class="col-md-1 col-lg-4">
                                <div class="form-group ">
                                    <label class="form-label"></label>
                                    <br><button type="submit" class="btn btn-primary"><i class="fa fa fa-search"></i>Search</button><button class="btn btn-default" onclick="reset_filter()" style="margin-left:5px;">Show All</button>
                                </div>
                                
                            </div>
                        </div>

                    </form>

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

    <!-- row opened -->
    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Members List</div>
                </div>
                <div class="card-body pt-0">

                    <div class=""> <!-- table-responsive -->
                        <table id="members-datatable" class="table table-bordered key-buttons"> <!-- text-nowrap -->
                            <thead>
                            <tr style="background: #FFFFCC;">
                                <th class="border-bottom-0" width="5%" style="width:10%;">#ID</th>
                                <!-- <th class="border-bottom-0" width="">จำนวนรายการ</th> -->
                                <th class="border-bottom-0" width="10%" style="width:10%;">Phone</th>
                                <th class="border-bottom-0" width="25%" style="width:20%;">Detail</th>
                                <th class="border-bottom-0" width="15%" style="width:15%;">Updated At</th>
                                <th class="border-bottom-0" width="10%" style="width:15%;">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <div class="">
                        <div class="footer br-bl-7 br-br-7">
                            <div class="container">
                                <div class="row align-items-center text-center">
                                    <div class="col-lg-6 col-md-12 d-none d-lg-block ">
                                        
                                    </div>
                                    <div class="col-lg-6 col-md-12 text-right privacy">

                                        <a href="{{ route('admin.members.members.add') }}" class="btn btn-success text-white mr-2 btn-sm" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Add new member">
                                            <i class="fa fa-plus" aria-hidden="true"></i> Add new member
                                        </a>

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

                    
                    <div class="input-group">


                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <!-- row closed -->

@endsection('content')

@section('scripts')

    <!--Jquery Sparkline js-->
    <script src="{{URL::asset('assets/plugins/vendors/jquery.sparkline.min.js')}}"></script>

    <!-- Chart Circle js-->
    <script src="{{URL::asset('assets/plugins/vendors/circle-progress.min.js')}}"></script>

    <!--Time Counter js-->
    <script src="{{URL::asset('assets/plugins/counters/jquery.missofis-countdown.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/counters/counter.js')}}"></script>

    <!-- INTERNAL Data tables -->
    <script src="{{URL::asset('assets/plugins/datatable/js/jquery.dataTables.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/dataTables.buttons.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.bootstrap4.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/jszip.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/pdfmake.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/vfs_fonts.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.html5.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.print.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.colVis.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/dataTables.responsive.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/responsive.bootstrap4.min.js')}}"></script>
    <!-- <script src="{{URL::asset('assets/plugins/datatable/datatable-2.js')}}"></script> -->

    <!-- Notifications js -->
    <link href="{{URL::asset('assets/plugins/notify-growl/css/jquery.growl.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('assets/plugins/notify-growl/css/notifIt.css')}}" rel="stylesheet" />
    <script src="{{URL::asset('assets/plugins/bootbox/bootbox.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/notify-growl/js/rainbow.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/notify-growl/js/jquery.growl.js')}}"></script>

    <!--Select2 js -->
    <script src="{{URL::asset('assets/plugins/select2/select2.full.min.js')}}"></script>

    <!-- mwz master js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js')  }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/members.css') }}">
    <script src="{{ mix('js/members.js')  }}"></script>

    <script type="text/javascript">
        reset_filter = function(){
            document.getElementById("table_filter").reset();
            $('#type').val('');
            $('#have_email').val('');
            $.ajax({
                url: "/admin/members/clear_session_filter",
                type: "POST",
                data: {},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (resp) {
                    setClearDataTable();
                },
            });
        }
        setSessionFilter = function(){

            var type = $('#type').val();
            var have_email = $('#have_email').val();

            $.ajax({
                url: "/admin/members/set_session_filter",
                type: "POST",
                data: {
                    type: type,
                    have_email: have_email
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (resp) {
                    setReloadDataTable('members-datatable');
                },
            });

        }
    </script>

@endsection