@extends('layouts.master')

@section('title', 'Agro Pro - Team')

@section('content')
    <div id="page">

        <div class="card cardi card-style" style="position: fixed !important; top: 50px; left: 0; right: 0; z-index: 50;margin: 0px 0px 0px 0px; border-radius: 0px;backdrop-filter: saturate(180%) blur(20px);">
            <div class="content" style="margin-top:5px;">
                <div class="search-box search-dark bg-theme rounded-s mt-3 mb-0">
                    <i class="fa fa-search"></i>
                    <input type="text" class="border-0" placeholder="Search all contacts... ">
                </div>
                <div class="row" style="margin-bottom: 0px;!important;">
                    <div class="col-7 text-center">
                        <a data-menu="inviteUser" href="#" class="btn btn-full gradient-grass font-13 btn-m font-600 mt-3 rounded-s"><i class="fa fa-user-alt"></i>  INVITE USER</a>
                    </div>
                    <div class="col-5 text-center">
                        <a data-menu="createSpace" href="#" class="btn btn-full gradient-orange font-13 btn-m font-600 mt-3 rounded-s"><i class="fa fa-filter"></i>  FILTER</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="header header-auto-sho header-fixed header-logo-center">
            <a href="#" class="header-title">Team</a>
            <a href="#" data-back-button class="header-icon header-icon-1"><i class="fas fa-chevron-left"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-dark"><i class="fas fa-sun"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-light"><i class="fas fa-moon"></i></a>
            <a href="#" data-menu="menu-main" class="header-icon header-icon-4"><i class="fas fa-bars"></i></a>
        </div>

        <div class="page-title-clear"></div>
        <div class="page-content">

            <div class="job-content">
                <div class="card card-style rounded-s" style="@if( $invitees == 0) display:none; @else margin-top: 130px; @endif">
                    <div class="content mb-2" style="">
                        <h5 class="font-14 opacity-0">INVITEES<span class="float-end badge font-10 bg-highlight">{{$invitees}}</span></h5>
                        <div class="divider mb-3"></div>
                        @foreach($invitedUsers as $invitedUser)
                            <a href="#">
                                <h5><i class="fa fa-id-badge" style="margin-right: 10px;"></i>{{$invitedUser->invitee_name}}</h5>
                                <p style="margin-bottom: 5px">+{{$invitedUser->phone}}</p>
                                <div class="divider mb-2"></div>
                            </a>
                        @endforeach
                    </div>
                </div>
                <div class="card card-style rounded-s" style="@if( $users->count() == 0) display:none; @elseif($invitees == 0) margin-top:130px; @else margin-top:-10px; @endif">
                    <div class="content mb-2" style="">
                        <h5 class="font-14 opacity-0">TEAM<span class="float-end badge font-10 bg-highlight">{{$users->count()}}</span></h5>
                        <div class="divider mb-3"></div>
                        @foreach($users as $user)
                            <a href="#" @if($farm_user->user_type == 'owner' || $farm_user->user_type == 'admin') id="data" data-id="{{$user->id}}" data-menu="UserActions" class="user_button"@endif>
                                <h5><i class="fa fa-id-badge"style="margin-right: 10px;"></i> {{$user->name}}</h5>
                                <p style="margin-bottom: 5px">+{{$user->phone}}</p>
                                <div class="divider mb-2"></div>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>

        <div id="menu-main" class="menu menu-box-left rounded-0" data-menu-load="{{url('menu-main')}}" data-menu-width="280" data-menu-active="nav-pages"></div>

        <div id="menu-share" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-share')}}" data-menu-height="370"></div>

        <div id="menu-colors" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-colors')}}" data-menu-height="480"></div>

    </div>

    <div id="UserActions" class="menu menu-box-bottom rounded-m bg-theme" style="min-width:95%; max-height:98%" !important ;>
        <div class="menu-title">
            <p class="color-highlight">Actions on</p>
            <h4 class="font-800" style="padding: 20px 0 0px 15px;">User</h4>
            <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
        </div>
        <div class="content">
            <div class="divider mt-n2"></div>
            @if($farm_user->user_type == 'owner' || $farm_user->user_type == 'admin')
                <a href="#" data-menu="assignTodo" data-id="" style="width:-webkit-fill-available !important;" class="mb-3 btn btn-full gradient-yellow font-13 btn-m font-600 mt-1 rounded-sm assign_todo">ASSIGN JOB</a>
            @endif
            <a href="" value="" name="job_url" data-id="" style="width:-webkit-fill-available !important;" class="mb-5 btn btn-full gradient-orange font-13 btn-m font-600 mt-3 rounded-sm start_todo">DISMISS USER</a>

        </div>
    </div>

    <form id="assignTodoForm">
        @csrf
        <div id="assignTodo" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Assign</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">TODO</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content">

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

    <form id="inviteUserForm">
        @csrf
        <div id="inviteUser" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Invite</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">USER</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>

            <div class="content">
                <div class="divider mt-n2"></div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders mb-4">
                        <input type="text" class="form-control validate-name" id="invitee_name" name="invitee_name" value="" required="" autofocus="" placeholder="TYPE INVITEE NAME">
                        <label for="invitee_name" class="color-highlight">Invitee Name</label>
                        <em>(required)</em>
                    </div>
                </div>

                <div class="input-style input-style-always-active has-borders validate-field">
                    <div class="row" style="margin-bottom: -15px; !important;">
                        <div class = "col-5 input-style input-style-always-active" style="margin-bottom: 0px; !important;">
                            <select id="countrycode" name="countrycode" required>
                                <option value="234">NG (+234)</option>
                                @foreach($countries as $country)
                                    <option value="{{$country->phonecode}}">{{$country->iso}}                    (+{{$country->phonecode}})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class = "col-7 input-style-always-active" style="margin-bottom: 0px; !important;">
                            <input type="number" class="form-control validate-email" id="phone" name="phone" value="{{ old('phone') }}" required autocomplete="phone" placeholder="812359749">
                            <i class="fa fa-times disabled invalid color-red-dark"></i>
                            <i class="fa fa-check disabled valid color-green-dark"></i>
                            <em>(required)</em>
                        </div>
                    </div>
                    <label for="phone" class="color-highlight">Phone Number</label>
                    <i class="fa fa-times disabled invalid color-red-dark"></i>
                    <i class="fa fa-check disabled valid color-green-dark"></i>
                </div>


                <button type="submit" style="width:-webkit-fill-available !important;" class="mb-4 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">INVITE USER</button>

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

@endsection

@section('footer-links')
    <script>
        function close_modal(){
            $(".modal").modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        }
        $(function () {

            $('.selectpicker').select2();

            let user_id;

            $(".page-content").on("click", ".user_button", function (e) {

                var element = document.getElementById("UserActions");
                element.classList.add("menu-active");
                var element = document.getElementById("logger");
                element.classList.add("menu-active");

                user_id = $(this).data("id");
                console.log(user_id);
            });

            $(".assign_todo").on("click", function (e) {
                $.ajax({
                    type: "GET",
                    url: "view_user_todo",
                    dataType: "json",
                    data: {
                        user_id: user_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $("#assignTodo .content").html(response.body);

                        } else{
                            swal("Cancelled!", response.msg, "error")

                        }
                    }
                });
            })

            $("#assignTodoForm").submit(function(e){
                e.preventDefault();
                var error = false;

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Jobs will be assigned to user!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#assignTodoForm").ajaxSubmit({
                                type: "POST",
                                url: "assign_user_todo",
                                dataType: "json",
                                data: {
                                    user_id: user_id
                                },
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", response.msg, "success");

                                        $(".job-content").load(location.href+(' .job-content'));
                                        $('#assignTodoForm').resetForm();
                                        $("#filtered_date").load(location.href+(' #filtered_date'));
                                        var element = document.getElementById("assignTodo");
                                        element.classList.remove("menu-active");
                                        var element = document.getElementById("logger");
                                        element.classList.remove("menu-active");

                                    } else{
                                        swal("Cancelled!", response.msg, "error")

                                    }
                                }
                            });
                        });

                }
            });

            $("#inviteUserForm").submit(function(e){
                e.preventDefault();
                var error = false;

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Invitation will be sent!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#inviteUserForm").ajaxSubmit({
                                type: "POST",
                                url: "invite_user",
                                dataType: "json",
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", "Invitation Sent", "success");

                                        $(".job-content").load(location.href+(' .job-content'));
                                        $('#inviteUserForm').resetForm();
                                        $("#filtered_date").load(location.href+(' #filtered_date'));
                                        var element = document.getElementById("inviteUser");
                                        element.classList.remove("menu-active");
                                        var element = document.getElementById("logger");
                                        element.classList.remove("menu-active");

                                    } else{
                                        swal("Cancelled!", response.msg, "error")

                                    }
                                }
                            });
                        });

                }
            });

        });
    </script>

    </body>
    </html>
@endsection