@extends('layouts.admin')
<style>
    #table-clients td {
        text-align: left !important;
        padding: 8px !important;
    }

    #table-clients th {
        padding: 8px !important;
    }

</style>
@php
    $pageLimit = $searchData['pageLimit'];
    $account_status = $searchData['account_status'];
    $search_value = $searchData['search_value'];
    $payment_status = $searchData['payment_status'];
@endphp
@section('content')
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row" style="padding-left: 20px;padding-right: 15px">
                        <h3 class="pull-left">Client List</h3>
                        @if(isShowContent('client.create'))
                            <a  href="{{route('client.create')}}" class="btn btn2 btn-success btn-flat pull-right">
                                <i class="fa fa-user" aria-hidden="true"></i>
                                Add Client
                            </a>
                        @endif
                    </div>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="x_panel">
                                <div class="x_content">

                                    <form action="{{route('get.clients')}}" method="get" role="search">
                                        <div class="row">
                                        <div class="col-md-2 col-xs-12">
                                                <div class="form-group">
                                                    <label>Show</label>
                                                <select name="pageLimit" id="pagination" class="form-control"
                                                        onchange="this.form.submit()">
                                                    <option value="10" @if($pageLimit == 10) selected @endif>10</option>
                                                    <option value="20" @if($pageLimit == 20) selected @endif>20</option>
                                                    <option value="50" @if($pageLimit == 50) selected @endif>50</option>
                                                    <option value="100" @if($pageLimit == 100) selected @endif>100</option>
                                                    <option value="500" @if($pageLimit == 500) selected @endif>500</option>
                                                </select>
                                                </div>
                                         </div>
                                        <div class="col-md-2 col-xs-12">
                                            <div class="form-group">
                                                <label>Account Status</label>
                                                <select name="account_status" id="account_status" class="form-control">
                                                    <option value="">All</option>
                                                    @foreach(config('constant.ACCOUNT_STATUS') as $key => $obj )
                                                        <option value="{{$obj}}"
                                                                @if ($obj==$searchData['account_status'])
                                                                    selected="selected"
                                                                @endif
                                                        >{{$key}}</option>
                                                    @endforeach

                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2 col-xs-12">
                                            <div class="form-group">
                                                <label>Payment Status</label>
                                                <select name="payment_status" id="payment_status" class="form-control">
                                                    <option value="">All</option>
                                                    @if(!empty(config('constant.PAYMENT_STATUS')))
                                                        @foreach(config('constant.PAYMENT_STATUS') as $key => $obj )
                                                            <option value="{{$key}}"
                                                                    @if ($key == $searchData['payment_status'])
                                                                        selected="selected"
                                                                    @endif
                                                            >{{$obj}}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-xs-12">
                                            <div class="form-group">
                                                <label>Client Name/Email/Phone</label>
                                                <input id="search_value"
                                                       type="text"
                                                       value="{{$searchData['search_value']}}"
                                                       placeholder="Search By Client Name/Email/Phone"
                                                       class="form-control" name="search_value" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-2 col-xs-12">
                                            <div class="form-group" style="margin-top: 25px;">
                                                <button class="btn btn-primary btn-outline-primary"  style="width:100%" type="submit">Search</button>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2">
                                                @if(isShowContent('admin.ajax.process'))
                                                <button style="margin-top: 15px;" onclick="return multipleClientDelete()" type="button"
                                                        class="btn btn-danger pull-left" style="margin-left: 10px"
                                                        id="btnDeleteMultipleClient" disabled>Delete Client
                                                </button>
                                                @endif
                                            </div>
                                        </div>
                                     </form>
                                <div class="table-responsive py-5">
                                    <table id="table-clients" class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox" name="allChecked" value="all"
                                                       onclick="common_helper.allChecked(this,'checkedBoxClient')"></th>
                                            <th>Client Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Address</th>
                                            <th> Account Status</th>
                                            <th> Account Cancel Date</th>
                                            <th>Created At</th>
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(!empty($users['data']))
                                            @foreach ($users['data'] as $key => $obj)
                                                @php
                                                    $user_info = json_encode([$obj->id,$obj->email]);
                                                    $action = 'DELETE_CLIENT';
                                                @endphp
                                                <tr class="tr-height">
                                                    <td><input type="checkbox" name="checkedBoxClient"
                                                               value="{{ $user_info }}" onclick="checkedornot(this)"></td>
                                                    <td>{{$obj->first_name.' '.$obj->last_name}}</td>
                                                    <td>{{ $obj->email}}</td>
                                                    <td>{{ $obj->phone }}</td>
                                                    <td>{{ $obj->street_no.', '.$obj->street_name.', '.$obj->city }}</td>
                                                    <td> @php echo  getAccountStatus($obj->subscription_status,$obj->status) @endphp</td>
                                                    <td>{{ ($obj->account_cancel_datetime !=null)? getStringToDateTime($obj->account_cancel_datetime,'m/d/Y h:i:s a'):'' }}</td>
                                                    <td>{{ getStringToDateTime($obj->created_at,'m/d/Y h:i:s a') }}</td>
                                                    <td>
                                                        @if(isShowContent('get.client.info'))
                                                        <a href="{{route('get.client.info',$obj->id)}}"
                                                           class="btn btn-success" style="padding: 5px;"> <span
                                                                class="glyphicon glyphicon-pencil" title="Edit"></span></a>
                                                        @endif
                                                        @if(isShowContent('admin.ajax.process'))
                                                            <button onclick="return clientDelete({{$user_info}},'{{$action}}')"
                                                                    class="btn btn-danger" style="padding: 5px;"><span
                                                                    class="glyphicon glyphicon-trash" title="Delete"></span>
                                                            </button>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                        </tbody>
                                    </table>

                                </div>
                                <div id="pagination_panel">
                                    {{ $users['data']->appends(compact('pageLimit' ,'account_status','payment_status', 'search_value')) ->links('basic.pagination') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

@endsection
@push('script')
    <script>
        const multipleClientDelete = () => {
            let action = 'DELETE_MULTIPLE_CLIENT';
            let checkedData = $("[name='checkedBoxClient']");
            let clientId = [];
            for (let checkbox of checkedData) {
                if (checkbox.checked)
                    clientId.push(checkbox.value);
            }
            if (clientId.length > 0) {
                clientDelete(clientId,action);
            }
        }

        const clientDelete = (userData,action) => {
            let html_content = `<h4>Are you sure you want to delete client?</h4>`;
            const swalresponse = common_helper.swalAleart(html_content, 'warning', 450, true, '', true, true, 'Yes');
            swalresponse.then(async function (result) {
                if (result.isConfirmed) {
                    let response = await common_helper.globalAjaxRequest('{{route('admin.ajax.process')}}', 'POST', {
                        action: action,
                        userData: userData,
                        _token: "{{ csrf_token() }}"
                    });
                    if (response.status) {
                        Swal.fire({icon: response.type, title: response.message, width: 450,closeOnConfirm: true});
                        window.location = `{{route('get.clients')}}`;
                    } else {
                        Swal.fire({icon: response.type, title: response.message, width: 450,closeOnConfirm: true});
                    }
                }
            })
        }

        const checkedornot = (e) => {

            let allData = $("[name='checkedBoxClient']");

            let checkedData = $("[name='checkedBoxClient']:checked");

            let allChecked = false;
            let alldelete = false;

            if(allData.length === checkedData.length){
                allChecked = true;
            }

            if(checkedData.length === 0){
                alldelete = true;
            }

            $("[name='allChecked']").prop('checked', allChecked);

            $('#btnDeleteMultipleClient').prop('disabled', alldelete);

        }

        const paymentStatusOnChange = (e) => {
            let status = $('#payment_status').val();

        }
    </script>

@endpush