@extends('layouts.modal')
@section('content')

<div class="create-user-form">
    <div class="modal-header">
        <div class="usermodal_header">
            <div class="usermodal-left">
                <h1>Add a new 
                    @if (session()->has('selected_role'))
                        {{ App\Helpers\Helper::getUserRoleName() }}
                    @else
                        User
                    @endif
                </h1>
            </div>

            <div class="close float-right" data-bs-dismiss="modal" aria-label="Close">
                <svg class="no-stroke" width="12" height="11" viewBox="0 0 12 11" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M11.3332 1.24128L10.2589 0.166992L5.99984 4.42604L1.74079 0.166992L0.666504 1.24128L4.92555 5.50033L0.666504 9.75937L1.74079 10.8337L5.99984 6.57461L10.2589 10.8337L11.3332 9.75937L7.07412 5.50033L11.3332 1.24128Z"
                        fill="#000000" />
                </svg>
                Close
            </div>
        </div>
    </div>
    <div class="modal-body">
        <form action="{{ route('user.store') }}" class="process-form" method="POST">
            @csrf
            {{-- <div class="admin_title">
                <h5><strong>User Details:</strong></h5>
            </div> --}}
            <div class="create_modal select-role">
                @if (session()->get('selected_role') == "")
                    <div class="row align-items-center">
                        <div class="col-md-5">
                            <div class="mb-15">
                                <label for="exampleInputEmail1" class="form-label">User Type:</label>
                                <select name="type" id="roles" class="bootstrap-select">
                                    <option value="">Select</option>
                                    @foreach ($roles as $key => $val)
                                        <option value="{{ Helper::encryptId($key) }}" data-key="{{$key}}"> @if($key == 3)
                                            Team Member
                                        @elseif($key == 4)
                                            Studio Owner
                                        @else
                                            {{ $val }}
                                        @endif</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                @elseif(auth()->user()->role_id < 3 && session()->get('selected_role') < 3)
                    <div class="tab_content d-none">
                        <div class="row align-items-center">
                            <div class="col-lg-12 tab_inner_content">
                                <div class="editradio-toolbar">
                                    <input type="radio" id="super-admin" name="type" value="{{ Helper::encryptId('1') }}"
                                        checked>
                                    <label for="super-admin">Super Admin</label>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                        <input type="hidden" name="type" value="{{ Helper::encryptId(session()->get('selected_role')) }}">
                @endif

            <div class="row user-form-data">

                <div class="col-md-3 col-sm-12 admin_input">
                    <label for="exampleInputEmail1" class="form-label">First Name</label>
                    <input type="text" name="first_name" id="first_name" class="form-control" placeholder="First Name"
                        value="@if (session()->has('studioOwnerInfo')){{ session()->get('studioOwnerInfo')['first_name'] }} @endif">
                </div>
                <div class="col-md-3 col-sm-12 admin_input">
                    <label for="exampleInputEmail1" class="form-label">Last Name</label>
                    <input type="text" name="last_name" id="last_name" class="form-control" placeholder="Last Name"
                        value="@if (session()->has('studioOwnerInfo')){{ session()->get('studioOwnerInfo')['last_name'] }}@endif">
                </div>
                <div class="col-md-3 col-sm-12 admin_input">
                    <label for="exampleInputEmail1" class="form-label">Email</label>
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email"
                        value="@if (session()->has('studioOwnerInfo')){{ session()->get('studioOwnerInfo')['email'] }} @endif">
                </div>
                <div class="col-md-3 col-sm-12">
                    <label for="exampleInputEmail1" class="form-label">Contact Number</label>
                    <input type="text" name="mobile" id="mobile" class="form-control" placeholder="Contact Number"
                        id="contact-number"
                        value="@if (session()->has('studioOwnerInfo')){{ session()->get('studioOwnerInfo')['mobile'] }}@endif">
                </div>
            </div>
    </div>

   <div class="studio-section {{ (session()->get('selected_role') < 3  || session()->get('selected_role') == 8) ?  'd-none' : '' }}">
       
        <div class="user-form-data">
        <div class="admin_title studio-heading">
          
            @if (session()->has('selected_role') && session()->get('selected_role') > 2)
            @if (session()->get('selected_role') == 4)
                <h5>Select the studios that this user owns:</h5>
            @else
                <h5>Select studios to assign to this user:</h5>
            @endif
            @else
                <h5></h5>
            @endif
        </div>
            <div class="create_modal studio-items">
                <div class="row align-items-center">
                    <div class="col-xl-4 col-md-8 dropdown-toggle-select-new">
                        <label for="exampleInputEmail1" class="form-label">Studio</label>
                        <div class="repeat_task_drp remove_drp">
                            
                            
                            <select name="studio[0]" class="studio_select bootstrap-select" data-live-search="true">
                                <option value="">Select...</option>
                                @foreach ($studios as $key => $studio)
                                <option value="{{ $key }}" @if (session()->has('studioOwnerInfo') &&
                                    isset(session()->get('studioOwnerInfo')['studio_id']))
                                    {{ session()->get('studioOwnerInfo')['studio_id'] == $key ? 'selected' : ''  }}
                                    @endif
                                    >{{ $studio }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                    @if (!session()->get('selected_role') || session()->get('selected_role') == "3")
                    <div class="col-xl-4 col-md-8 permission_field dropdown-toggle-select-new pl-xl-0 mob-mb-8">
                        <label for="exampleInputEmail1" class="form-label">Permissions</label>
                        <select name="permission[]" class="studio_select bootstrap-select" data-live-search="true">
                            <option value="">Select</option>
                            <option value="1">View Only</option>
                            <option value="2">Full Access</option>
                        </select>
                    </div>
                 
                    @endif
                    <div class="col-xl-2 col-md-4 d-none stuio-remove-btn pl-xl-0">
                        <button class="lib_btn float-start mt-sm-12">
                            <img src="{{ asset('images/delete.svg') }}" alt="delete">
                            Remove
                        </button>
                    </div>
                </div>      
            </div>    
            <div class="more-studio"></div>
            <div class="create_modal create_modal_btn_section">
                <div class="row mt-md-3">
                    @if(count($studios) > 1)
                    <div class="col-xl-3 col-md-4">
                        <a class="lib_btn float-start add-more-studio" href="javascript:void(0)">
                            <img src="{{ asset('images/plus_black.svg') }}" alt="plus">
                           <strong> Add Another Studio </strong>
                        </a>
                    </div>
                    @endif
                    {{-- @if (auth()->user()->role_id < 3 && session()->get('selected_role') == '4')
                        <div class="col-xl-3 col-md-4 justify-content-end d-flex pr-0">
                            <a class="lib_btn float-start create-another-studio mr-sm-10" href="javascript:void(0)">
                                <img src="{{ asset('images/plus_black.svg') }}" alt="plus">
                                Add New Studio
                            </a>
                        </div>
                    @endif --}}
                </div>
            </div>
    </div>
    </div>
    <div class="modal-actions d-flex justify-content-between align-items-center">

        <div class="permission-access-text-parent">              
            <div class="permission-access-text tooltip-permission-access-text permission_access ">
                @if (!session()->get('selected_role') || session()->get('selected_role') == "3")
            
                    <span class="permission-access-text-cont">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.00008 0.666504C4.40008 0.666504 0.666748 4.39984 0.666748 8.99984C0.666748 13.5998 4.40008 17.3332 9.00008 17.3332C13.6001 17.3332 17.3334 13.5998 17.3334 8.99984C17.3334 4.39984 13.6001 0.666504 9.00008 0.666504ZM9.83342 14.8332H8.16675V13.1665H9.83342V14.8332ZM11.5584 8.37484L10.8084 9.1415C10.2084 9.74984 9.83342 10.2498 9.83342 11.4998H8.16675V11.0832C8.16675 10.1665 8.54175 9.33317 9.14175 8.72484L10.1751 7.67484C10.4834 7.37484 10.6667 6.95817 10.6667 6.49984C10.6667 5.58317 9.91675 4.83317 9.00008 4.83317C8.08342 4.83317 7.33342 5.58317 7.33342 6.49984H5.66675C5.66675 4.65817 7.15841 3.1665 9.00008 3.1665C10.8417 3.1665 12.3334 4.65817 12.3334 6.49984C12.3334 7.23317 12.0334 7.89984 11.5584 8.37484Z" fill="#AAAAAA"/>
                </svg> Permission Access</span>
                @endif
                <p><strong>Full Access</strong> allows users to view and edit across entire platform. <strong>View Only</strong> users cannot edit forms, can share form links, can view and export form data, can mark submissions as actioned.</p>
            
            </div>
        </div>  

        @include('includes.loader')
        <button class="btn-theme dark btn-small btn-save-data" data-btn_text="Send Invite" data-saved_success_text="Invite Sent">
            <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M4.99993 7.94651L2.37671 5.32329L2.19994 5.14651L2.02316 5.32329L1.08982 6.25662L0.913048 6.4334L1.08982 6.61017L4.82316 10.3435L4.99993 10.5203L5.17671 10.3435L13.1767 2.34351L13.3535 2.16673L13.1767 1.98996L12.2434 1.05662L12.0666 0.879845L11.8898 1.05662L4.99993 7.94651Z"
                    fill="white" stroke="white" stroke-width="0.5" />
            </svg>
            Send Invite
        </button>
    </div>
    </form>
    @include('includes.popup_message')
</div>
@endsection
<div class="create-studio-form d-none">
    @include('settings.edit_studio')
</div>
<script type="text/javascript">
$(document).on('click', '.create-another-studio', function() {
    var studio = $(".studio_select").map(function() {
        if ($(this).val() != "") {
            return $(this).val();
        }

    }).get();
    var data = {
        'first_name': $('#first_name').val(),
        'last_name': $('#last_name').val(),
        'email': $('#email').val(),
        'mobile': $('#contact-number').val(),
        'studio': studio
    };
    $.ajax({
        url: "{{ route('user.create_studio') }}",
        data: data,
        cache: false,
        success: function(html) {
            $('.create-studio-form').removeClass('d-none');
            $('.create-user-form').addClass('d-none')
            $('.popup-error-sucess').remove();
            $('.user-back-btn').removeClass('d-none');
            $('.create-message').html('<div class="edit_content alert d-none"><span></span></div>')
            $('select:not(.multiselect)').selectpicker();
        }
    });
});

$(".modal").on("show.bs.modal", function(event) {
    @if (session()->get('selected_role') == "")
        $(".form-control, .add-more-studio, .btn-save-data, .studio_select").addClass("disabled");
    @endif
 });
 $(document).ready(function () {
        $(".permission-access-text-cont").hover(function () {
            $(this).siblings("p").css("display", "inline-block");
        }, function () {
            $(this).siblings("p").css("display", "none");
        });
    });
</script>