@extends('layouts.app', ['redirectPage' => 'users'])
@section('PageHeading', 'Studio & User Management')
@section('bodyClass', 'user-management')
@section('sidebar', 'true')
@section('content')
<div class="container_fluid">
<div class="box_content">
    <div class="box_overlayout">
        <div class="box_innerlayout">
            {{-- <div class="task_card admin_total_card">
                <div class="row align-items-center">
                    <div class="col-md-4 col-lg-3 columns vrline">
                        <div class="task_card_title">
                            @if (!empty($studio) && request()->get('role') != 'super-admin' &&  request()->get('role') != 'f45-corporate')
                                <div class="training_img">
                                    <img class="rounded-circle" src="{{Helper::getStudioLogo($studio->logo)}}"
                                            alt="{{$studio->name}}">
                                </div>
                                <div class="task_card_header">
                                    <h5>{{ $studio->name }}</h5>
                                    <p class="d-none d-md-block">{{$studio->address}}</p>
                                </div>
                            @else
                                <div class="task_card_header">
                                    <h5>{{ Helper::getHeadingCommonText() }} </h5>
                                    <p>{{ App\Helpers\Helper::getUserRoleName() }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-4 columns">
                        <div class="d-flex">
                            <div class="strategy_count columns">
                                <div class="admin_count_header">
                                    <h5>{{ $activeUsers->total() + $inActiveUsers->total() }}</h5>
                                    <p>Total</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if(request()->get('role') != 'super-admin')
                        <div class="col-md-4 columns col-lg-5 text-end">
                            <div class=" d-none d-md-block">
                                <div class="btn-group">
                                    <button class="studio_btn stud-btn">
                                        <img src="{{ asset('images/pipe.svg') }}" alt="pipe">@if(empty($studio))
                                            Filter @else Change @endif Studio
                                    </button>
                                </div>
                                @if(!empty($studio))
                                    <div class="btn-group">
                                        <a class="studio_btn"
                                            href="{{ route('user.index', ['role' => request()->get('role')]) }}"
                                            class="studio_btn">
                                            <img src="{{ asset('images/arrows.svg') }}" alt="arrows">
                                            Show All Studios
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div> --}}
            @include('users.roles_filter')
            <div class="tab_content">
                <div class="row align-items-center">
                    @csrf
                    <div class="col-md-8 col-lg-10">
                        <form method="get" action="{{ route('user.index') }}">
                            <div class="search-bar-form">
                                <input type="text" name="keyword" id="search-bar" type="text"
                                        placeholder="Search....." autocomplete="off"
                                        value="{{ Session::get('search_keyword') }}"/>
                                @if (request()->get('role'))
                                    <input type="hidden" name="role" id="role"
                                            value="{{ request()->get('role') }}">
                                @endif
                                @if (request()->get('other'))
                                    <input type="hidden" name="other" id="other"
                                            value="{{ request()->get('other') }}">
                                @endif
                                <div class="task_btn float-end btn-left">

                                </div>
                            </div>
                        </form>
                        @if(session()->has('error'))
                            <div class="alert alert-danger ">{{ session()->get('error') }}</div>
                        @endif
                    </div>

                    <div class="col-md-4 col-lg-2">
                        <div class="task_btn float-end mobile-btn adduser">
                            @if (Helper::userAccessPermission('add'))
                                    <button class="create_btn  btn-action"
                                        onclick="getModalPopup('{{ route('user.create') }}');"
                                    >
                                    <img src="{{ asset('images/plus_white.svg') }}" alt="plus">
                                    Add User
                                </button>
                            @endif
                           
                        </div>
                    </div>
                </div>
            </div>
            @include('users.active_inactive_user')
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
    $(document).on("click", ".add-more-studio", function () {
        $('.selectpicker').selectpicker();
        $(".studio_select:first .dropdown-menu").removeClass("show");
        var $clone = $(".studio-items:first").clone();
        $clone.find('select').val('');
        $clone.find('.has-error').remove();
        $clone.find('.dropdown-toggle, .check-pcontact, .form-check-label').remove();
        $clone.find('.check-pcontact').prop('checked', false);
        $clone.appendTo(".more-studio");
        $(".studio-items").find('select').each(function (i, e) {
            this.name = this.name.replace('[0]', '[' + i + ']');
            $('select').selectpicker('refresh');
        });
        $(".stuio-remove-btn").not(':first').removeClass('d-none');
        $('.selectpicker').selectpicker('refresh');
    });

    $(document).on("change", "#roles", function () {

        var role = $(this).find('option:selected').data('key');
        if (role > 0) {
            $(".form-control, .add-more-studio, .btn-save-data, .studio_select").removeClass("disabled");
        } else {
            $(".form-control, .add-more-studio, .btn-save-data, .studio_select").addClass("disabled");
        }
        $(".studio_select").selectpicker('refresh');

        // if (role > 2 && role < 8) {
        //    // alert("if");
        //     $('.studio-section').removeClass('d-none');
        //     $('.permission_field').removeClass('d-none');
            
        //     if ($('#user_id').val() > 0) {
        //         getUserTaskMessage(role);
        //     }
        // } else {
        //    //alert("else");
        //     $('.studio-section').addClass('d-none');
        //     $('.permission_field').addClass('d-none');
        // }


        if (role === 3) {
                $('.studio-section').removeClass('d-none');
                $('.permission_field').removeClass('d-none');
                $('.permission_access').removeClass('d-none');
                
            } else if (role > 2 && role < 8) {
                $('.studio-section').removeClass('d-none');
                $('.permission_field').addClass('d-none');
                $('.permission_access').addClass('d-none');
                if ($('#user_id').val() > 0) {
                    getUserTaskMessage(role);
                }
            } else {
                $('.studio-section').addClass('d-none');
                $('.permission_field').addClass('d-none');
                $('.permission_access').addClass('d-none');
            }

        if (role == 4) {
            $('.studio-heading h5').html('Select the studios that this user owns:')
        } else {
            $('.studio-heading h5').html('Select studios to assign to this user:')
        }
    });

    function getUserTaskMessage(role) {
        var postData =  {
                            role: role,
                            user_id: $('#user_id').val(),
                            _token: '{{ csrf_token() }}',
                        };
        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: postData,
            url: "{{ route('user.check_user_tasks')}}",
            success: function(data) {
                if (data.status) {
                    $('#uncheck_studio_msg').show();
                    $('#uncheck_studio_msg').html(data.html);
                    $('.btn-continue').removeClass('d-none');
                    $('.btn-save-data').addClass('d-none');
                } else {
                    $('#uncheck_studio_msg').hide();
                    $('.btn-continue').addClass('d-none');
                    $('.btn-save-data').removeClass('d-none');
                }
            }
        });
    }


    $(document).on("click", ".stuio-remove-btn", function () {
        var studioItems = $('.studio-items');
        
        if (studioItems.length > 1) {
            // Allow removal if more than one item
            $(this).parents('.studio-items').remove();
        } else {
            // Optionally show a message or handle the case when only one item is left
            $('.admin_title h5').after('<span class="error-label" style="color:red;">Studio field is required</span>');
            return false;
        }
        //$(this).parents('.studio-items').remove();
    });

    $(document).on('keyup', '#search-bar', function () {
        getUsers();
    });

    $(document).on('click', '.active-user-pagination .pagination a', function (event) {
        
        event.preventDefault();
        var active = $(this).attr('href').split('active=')[1];
        var inactive = $(this).attr('href').split('inactive=')[1];
        window.location.href = event.target.href; 
        getUsers(active, inactive);
    });

    $(document).on('click', '.inactive-user-pagination .pagination a', function (event) {
        event.preventDefault();
        var active = $(this).attr('href').split('active=')[1];
        var inactive = $(this).attr('href').split('inactive=')[1];
        window.location.href = event.target.href;
        getUsers(active, inactive);
    });

    function getUsers(active = null, inactive = null) {
        var query = $('#search-bar').val();
        var role = $('#role').val();
        var other = $('#other').val();
        var studio = '{{$studio->uuid ?? " "}}';
        var queryParams = "?role=" + role + (other != null ? "&other=" + other : '') + "&studio=" + studio + "&keyword=" + query + (active !=
        null ? "&active=" + active : '') + (inactive != null ? "&inactive=" + inactive : '');
        $.ajax({
            url: "{{ route('user.index') }}" + queryParams,
            success: function (data) {
                $('#all-users-list').html(data);
            }
        })
    }
    $(document).on('change', '.user-studios', function() {
        $(this).parents('.row').find('.check-pcontact').val($(this).find('option:selected').val());
    });

    $(document).on('change', '.check-pcontact', function() {
        $('#uncheck-studio-msg').hide();
        var studioId = $(this).parents('.row').find('select option:selected').val();
        var $checkbox = $(this);
        var $uncheckStudioMsg = $('#uncheck-studio-msg');
        if (this.checked && studioId) {
            var postData =  {
                                user_id: $('#user_id').val(),
                                studio: studioId,
                                _token: '{{ csrf_token() }}',
                            };
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: postData,
                url: "{{ route('user.check_primary_contact_left')}}",
                success: function(data) {
                    if (data.status) {
                        $('#uncheck_studio_msg').html(data.html);
                        $checkbox.prop('checked', false);
                        setTimeout(function() {
                            $('#uncheck-studio-msg_'+studioId).hide();
                        },30000);
                    } else {
                        $uncheckStudioMsg.hide();
                    }
                }
            });
        }
    });

    $(document).on("hidden.bs.modal", ".common-modal", function () {
        if ($('.new-user-registered').length > 0) {
            location.reload();
        }
    });

    $(document).on("hidden.bs.modal", ".confirm-modal", function () {
        $(".common-modal").modal('hide');
        $(".confirm-modal").modal('hide');
    });

</script>
<style type="text/css">
    .user-edit-action-btns a {
        margin: 0px 9px;
    }
    .studio-items {
        margin-bottom: 21px !important;
    }
    .studio-items {
        margin-bottom: 22px !important;
    }
</style>

@endpush