@extends('admin.layout.index')
@php
    $isActivePage = isset($mode) && $mode === 'active';
@endphp

{{-- ===========  meta Title  =================== --}}
@section('title')
    @if(!$isOrgan)
    نمایندگی ها
    @else
    سازمان ها
    @endif
@endsection
{{-- ===========  My Css Style  =================== --}}
@section('style')
    <style>
        #users {
            border: 1px solid #eeeeee;
            height: auto;
            max-height: 120px;
            overflow: auto;
            display: none;
            position: absolute;
            z-index: 999;
            width: 100%;
            top: 48px;
            background-color: white;
        }


        .user {
            margin-bottom: 0;
            padding: 0.5rem;
        }

        .user:hover {
            background-color: #afb6ff;
            color: white;
            cursor: pointer;
        }
    </style>
@endsection
{{-- ===========  My JavaScript  =================== --}}

@section('script')

    <script>
        $('#userNameSearch').on('keypress', function (e) {
            if (e.which === 13) {
                e.preventDefault();
                filter();
            }
        });
        $(document).ready(function () {
            //get localStorage
            let users = JSON.parse(localStorage.getItem("users"));
            let userNameSearch = localStorage.getItem('userNameSearch');
            if (users != null) {
                $('#userNameSearch').val(userNameSearch);
                filter();
            }
        });

        function removeModal(user_id) {
            let modal = $('#remove_modal');
            modal.modal('show');
            $('#user_id').val(user_id);
        }

        function RemoveUser() {
            let user_id = $('#user_id').val();
            let modal_alert = $('#modal_alert');
            $.ajax({
                url: "{{ route('admin.user.destroy') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    user_id: user_id,
                },
                dataType: "json",
                type: 'POST',
                beforeSend: function () {

                },
                success: function (msg) {
                    if (msg) {
                        let message = msg[1];
                        if (msg[0] === 0) {
                            swal({
                                title: 'خطا',
                                text: message,
                                icon: 'error',
                                buttons: 'ok',
                            })
                        }
                        if (msg[0] === 1) {
                            swal({
                                title: 'باتشکر',
                                text: message,
                                icon: 'success',
                                timer: 3000,
                            })
                            let users = JSON.parse(localStorage.getItem("users"));
                            if (users != null) {
                                filter();
                            } else {
                                setInterval(function () {
                                    window.location.reload();
                                }, 3000)
                            }
                        }
                    }
                },
            })
        }

        function filter() {
            let name = $('#userNameSearch').val();
            let expert = $('#expert').val();
            let status;
            @if($isActivePage)
             status = null;
             @else
                 status = $('#status').val();
            @endif

            let url = "{{ $isActivePage ? route('admin.representation.getActive') : route('admin.representation.get') }}";

            $.ajax({
                url: url,
                data: {
                    _token: "{{ csrf_token() }}",
                    name: name,
                    expert: expert,
                    status: status,
                },
                dataType: "json",
                type: "POST",
                beforeSend: function () {
                    $("#overlay").fadeIn();
                },
                success: function (msg) {
                    if (msg[0] == 1) {
                        console.log(msg);
                        $('#insertRow').html(msg[1]);
                        $('.paginate').hide();
                        //clear localStorage
                        localStorage.removeItem('users');
                        localStorage.removeItem('userNameSearch');
                        //save in localStorage
                        localStorage.setItem("users", JSON.stringify(msg[1]));
                        localStorage.setItem("userNameSearch", name);
                    } else {
                        console.error(msg);
                    }
                },
                fail: function (error) {
                    console.log(error);
                }
            })
        }

        $('#clearFactorBtn').click(function () {
            //clear localStorage
            localStorage.removeItem('users');
            localStorage.removeItem('userNameSearch');
            window.location.reload();
        })

        {{--function custom_pagination(tag) {--}}
        {{--    let per_page = $(tag).val();--}}
        {{--    let url = '{{ route('admin.users.pagination',['show_per_page'=>':per_page']) }}';--}}
        {{--    url = url.replace(':per_page', per_page);--}}
        {{--    window.location.href = url;--}}
        {{--}--}}
    </script>
@endsection
{{-- ===========      CONTENT      =================== --}}
@section('content')
    <div class="row d-lg-flex justify-content-between align-items-center mb-3">
        <div class="col-12 d-flex align-items-center align-items-end">
            <div class="input-group input-group-md d-flex flex-row-reverse border-radius" style="width: 500px">
                <input type="text" class="form-control form-control-sm"
                       aria-label="Sizing example input"
                       aria-describedby="inputGroup-sizing-lg" placeholder="جست و جوی کاربر..."
                       id="userNameSearch" autocomplete="off">
                <div class="input-group-prepend border-radius">
                    <span class="input-group-text" id="basic-addon2"><i class="fa fa-search"
                                                                        aria-hidden="true"></i></span>
                </div>
            </div>
            @if(!$isOrgan)
            <div style="width: 400px;margin-right: 5px" class="d-flex mr-5">
                <label style="width: 120px;margin-bottom: 0 !important;display: flex;align-items: center">
                    کارشناس فروش:
                </label>
                <select id="expert" class="form form-control">
                    <option value="all">همه</option>
                    <option value="0">هیچ</option>
                    @foreach($experts as $expert)
                        <option value="{{ $expert->id }}">{{ $expert->first_name.' '.$expert->last_name }}</option>
                    @endforeach

                </select>
            </div>
            @endif
            @if(!$isOrgan)
            @if(!$isActivePage)
            <div style="width: 400px;margin-right: 5px" class="d-flex mr-5">
                <label style="width: 55px;margin-bottom: 0 !important;display: flex;align-items: center">
                    وضعیت:
                </label>
                <select id="status" class="form form-control">
                    <option value="all">همه</option>

                                            <option value="0">در انتظار تایید ناظر</option>
                    <option value="1">در انتظار  ویرایش</option>
                    <option value="5">در انتظار تایید ناظر</option>
                    <option value="3">   رد شده</option>
                    <option value="4">امضای قرار داد   </option>


                </select>
            </div>
            @endif
            @endif
            <div>
                <div class="d-flex">
                    <button type="button" onclick="filter()" class="btn btn-sm mx-4 btn-danger mr-3">فیلتر</button>
                    <button type="button" id="clearFactorBtn" class="btn btn-sm btn-primary mr-1">پاکسازی</button>


                </div>


            </div>


        </div>
        @if(!$isOrgan)
        @if(!$isActivePage)
        <div class="text-left m-4">
            <a href="{{ route('admin.representation.export') }}" class="btn btn-success mb-3">
                خروجی اکسل نمایندگان
            </a>
        </div>
        @else
            <div class="text-left m-4">
                <a href="{{ route('admin.representation.export.active') }}" class="btn btn-success mb-3">
                    خروجی اکسل نمایندگان
                </a>
            </div>
        @endif
        @else
            <div class="text-left m-4">
                <a href="{{ route('admin.organization.create') }}" class="btn btn-primary mb-3">
                    ایجاد سازمان
                </a>
            </div>
        @endif
    </div>
    @if(count($items)>0)
        <div class="row">
            <div class="col-12">
                <form
                    id="groupDelete"
                    action="#"
                    method="POST">
                    @method('delete')
                    @csrf
                    <table class="table table-bordered text-center table-striped">
                        <thead>
                        @if(!$isOrgan)
                        <tr>
                            <th>ردیف</th>
                            <th>نام و نام خانوادگی</th>
                            <th>کد ملی</th>
                            <th>شماره همراه</th>
                            <th>کارشناس فروش</th>
                            <th>وضعیت</th>
                            <th>جزئیات</th>
                        </tr>
                        @else
                            <tr>
                                <th>ردیف</th>
                                <th>نام و نام خانوادگی مسئول سازمان</th>
                                <th>کد ملی مسئول سازمان</th>
                                <th>شماره همراه مسئول سازمان</th>
                                <th> نام سازمان</th>
                                <th>شناسه سازمان</th>
                                <th>جزئیات</th>
                            </tr>
                        @endif
                        </thead>
                        <tbody id="insertRow">
                        @include('admin.sellers.row')
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
        <div class="row paginate">
            <div class="col-12">
                <div class="row justify-content-center">
                    {{ $items->render() }}
                </div>
            </div>
        </div>
    @else
        <div class="row d-sm-flex align-items-center justify-content-between mt-4 noneDisplay">
            <div class="col-12">
                <hr>
            </div>
            <div class="col-12">
                <div class="alert alert-info text-center">
                    کاربری برای نمایش موجود نیست
                </div>
            </div>
        </div>
    @endif
    @include('admin.users.modal')
@endsection