@if($studios)
    @foreach($studios as $s=>$studio)
        <div class="alert alert-success" id="toastr" style="display:none;"></div>
        <div class="invite_card">
            <div class="invite_inner_item">
                <div class="row d-flex align-items-center">
                    <div class="col-md-2 columns text-center">
                        <img src="{{asset('images/book.svg')}}" alt="book">
                    </div>
                    <div class="col-md-8 columns team-content">
                        <p>Invite another Studio Owner to join {{$studio['name']}}</p>
                    </div>
                    <div class="col-md-2 columns text-center">
                        <img class="add-input" src="{{asset('images/plus.svg')}}" alt="plus">
                    </div>
                </div>  
            </div>
        </div>
        <span class="invite_widget">
        @if(isset($studio['studio_owner']) && count($studio['studio_owner']) > 0)
            @foreach($studio['studio_owner'] as $so=>$studio_owner)
                <div class="invite_card_input inv_widget">
                    <div class="invite_card_input_item">
                        <div class="row d-flex align-items-center">
                            <div class="col-md-2 columns text-center">
                                <img src="{{asset('images/group.svg')}}" alt="group">
                            </div>
                            <div class="col-md-7 columns invite_card_text">
                                <p class="stud_id" style="display:none;">{{$s}}</p>
                                <p class="email_id">{{$studio_owner}}</p>
                            </div>
                            <div class="col-md-1 columns text-center">
                                <img class="edit-btn" src="{{asset('images/edit_blue.svg')}}" alt="edit">
                            </div>
                            <div class="col-md-2 columns text-center">
                                <img class="delete-btn" src="{{asset('images/delete_blue.svg')}}" alt="delete">
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="invite_card_input inv_input" style="display:none;">
                    <div class="invite_card_input_item">
                        <div class="row d-flex align-items-center">
                            <div class="col-md-2 columns text-center">
                                <img src="{{asset('images/group.svg')}}" alt="group">
                            </div>
                            <div class="col-md-8 columns invite_input">
                                <input type="hidden" id="studio_id" value="{{$s}}" name="studio_id">
                                <input type="hidden" id="role_id" name="role_id" value="4">
                                <input type="hidden" id="old_email" name="old_email" value="{{$studio_owner}}">
                                <input type="email" class="form-input" id="email" name="email" value="{{$studio_owner}}" placeholder="Enter Email">
                            </div>
                            <div class="col-md-1 columns text-center">
                                <img class="update-btn" src="{{asset('images/plus.svg')}}" alt="plus">
                            </div>
                        </div>  
                    </div>
                </div>
            @endforeach
        @else
            <div class="invite_card_input">
                <div class="invite_card_input_item">
                    <div class="row d-flex align-items-center">
                        <div class="col-md-2 columns text-center">
                            <img src="{{asset('images/group.svg')}}" alt="group">
                        </div>
                        <div class="col-md-8 columns invite_input">
                            <input type="hidden" id="studio_id" value="{{$s}}" name="studio_id">
                            <input type="hidden" id="role_id" name="role_id" value="4">
                            <input type="email" class="form-input" id="email" name="email" placeholder="Enter Email">
                        </div>
                        <div class="col-md-1 columns text-center">
                            <img class="save-btn" src="{{asset('images/plus.svg')}}" alt="plus">
                        </div>
                    </div>  
                </div>
            </div>
        @endif
        </span>
        <div class="invite_card">
            <div class="invite_inner_item">
                <div class="row d-flex align-items-center">
                    <div class="col-md-2 columns text-center">
                        <img src="{{asset('images/book.svg')}}" alt="book">
                    </div>
                    <div class="col-md-8 columns team-content">
                        <p>Invite a Studio Captain to join {{$studio['name']}}</p>
                    </div>
                    <div class="col-md-2 columns text-center">
                        <img class="add-input" src="{{asset('images/plus.svg')}}" alt="plus">
                    </div>
                </div>  
            </div>
        </div>
        <span class="invite_widget">
        @if(isset($studio['studio_captain']) && count($studio['studio_captain']) > 0)
            @foreach($studio['studio_captain'] as $sc=>$studio_captain)
                <div class="invite_card_input inv_widget">
                    <div class="invite_card_input_item">
                        <div class="row d-flex align-items-center">
                            <div class="col-md-2 columns text-center">
                                <img src="{{asset('images/group.svg')}}" alt="group">
                            </div>
                            <div class="col-md-7 columns invite_card_text">
                                <p class="stud_id" style="display:none;">{{$s}}</p>
                                <p class="email_id">{{$studio_captain}}</p>
                            </div>
                            <div class="col-md-1 columns text-center">
                                <img class="edit-btn" src="{{asset('images/edit_blue.svg')}}" alt="edit">
                            </div>
                            <div class="col-md-2 columns text-center">
                                <img class="delete-btn" src="{{asset('images/delete_blue.svg')}}" alt="delete">
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="invite_card_input inv_input" style="display:none;">
                    <div class="invite_card_input_item">
                        <div class="row d-flex align-items-center">
                            <div class="col-md-2 columns text-center">
                                <img src="{{asset('images/group.svg')}}" alt="group">
                            </div>
                            <div class="col-md-8 columns invite_input">
                                <input type="hidden" id="studio_id" value="{{$s}}" name="studio_id">
                                <input type="hidden" id="role_id" name="role_id" value="6">
                                <input type="hidden" id="old_email" name="old_email" value="{{$studio_captain}}">
                                <input type="email" class="form-input" id="email" name="email" value="{{$studio_captain}}" placeholder="Enter Email">
                            </div>
                            <div class="col-md-1 columns text-center">
                                <img class="update-btn" src="{{asset('images/plus.svg')}}" alt="plus">
                            </div>
                        </div>  
                    </div>
                </div>
            @endforeach
        @else
            <div class="invite_card_input">
                <div class="invite_card_input_item">
                    <div class="row d-flex align-items-center">
                        <div class="col-md-2 columns text-center">
                            <img src="{{asset('images/group.svg')}}" alt="group">
                        </div>
                        <div class="col-md-8 columns invite_input">
                            <input type="hidden" id="studio_id" value="{{$s}}" name="studio_id">
                            <input type="hidden" id="role_id" name="role_id" value="6">
                            <input type="email" class="form-input" id="email" name="email" placeholder="Enter Email">
                        </div>
                        <div class="col-md-1 columns text-center">
                            <img class="save-btn" src="{{asset('images/plus.svg')}}" alt="plus">
                        </div>
                    </div>  
                </div>
        </div>
        @endif
        </span>
        <div class="invite_card">
            <div class="invite_inner_item">
                <div class="row d-flex align-items-center">
                    <div class="col-md-2 columns text-center">
                        <img src="{{asset('images/book.svg')}}" alt="book">
                    </div>
                    <div class="col-md-8 columns team-content">
                        <p>Invite Training Staff to join {{$studio['name']}}</p>
                    </div>
                    <div class="col-md-2 columns text-center">
                        <img class="add-input" src="{{asset('images/plus.svg')}}" alt="plus">
                    </div>
                </div>  
            </div>
        </div>
        <span class="invite_widget">
        @if(isset($studio['training_staff']) && count($studio['training_staff']) > 0)
            @foreach($studio['training_staff'] as $ts=>$training_staff)
                <div class="invite_card_input inv_widget">
                    <div class="invite_card_input_item">
                        <div class="row d-flex align-items-center">
                            <div class="col-md-2 columns text-center">
                                <img src="{{asset('images/group.svg')}}" alt="group">
                            </div>
                            <div class="col-md-7 columns invite_card_text">
                                <p class="stud_id" style="display:none;">{{$s}}</p>
                                <p class="email_id">{{$training_staff}}</p>
                            </div>
                            <div class="col-md-1 columns text-center">
                                <img class="edit-btn" src="{{asset('images/edit_blue.svg')}}" alt="edit">
                            </div>
                            <div class="col-md-2 columns text-center">
                                <img class="delete-btn" src="{{asset('images/delete_blue.svg')}}" alt="delete">
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="invite_card_input inv_input" style="display:none;">
                    <div class="invite_card_input_item">
                        <div class="row d-flex align-items-center">
                            <div class="col-md-2 columns text-center">
                                <img src="{{asset('images/group.svg')}}" alt="group">
                            </div>
                            <div class="col-md-8 columns invite_input">
                                <input type="hidden" id="studio_id" value="{{$s}}" name="studio_id">
                                <input type="hidden" id="role_id" name="role_id" value="7">
                                <input type="hidden" id="old_email" name="old_email" value="{{$training_staff}}">
                                <input type="email" class="form-input" id="email" name="email" value="{{$training_staff}}" placeholder="Enter Email">
                            </div>
                            <div class="col-md-1 columns text-center">
                                <img class="update-btn" src="{{asset('images/plus.svg')}}" alt="plus">
                            </div>
                        </div>  
                    </div>
                </div>
                
            @endforeach
        @else
            <div class="invite_card_input">
                <div class="invite_card_input_item">
                    <div class="row d-flex align-items-center">
                        <div class="col-md-2 columns text-center">
                            <img src="{{asset('images/group.svg')}}" alt="group">
                        </div>
                        <div class="col-md-8 columns invite_input">
                            <input type="hidden" id="studio_id" value="{{$s}}" name="studio_id">
                            <input type="hidden" id="role_id" name="role_id" value="7">
                            <input type="email" class="form-input" id="email" name="email" placeholder="Enter Email">
                        </div>
                        <div class="col-md-1 columns text-center">
                            <img class="save-btn" src="{{asset('images/plus.svg')}}" alt="plus">
                        </div>
                    </div>  
                </div>
            </div>
        @endif
        </span>
    @endforeach
@endif

<div class="invite_card_input inv_card" style="display:none;">
    <div class="invite_card_input_item">
        <div class="row d-flex align-items-center">
            <div class="col-md-2 columns text-center">
                <img src="{{asset('images/group.svg')}}" alt="group">
            </div>
            <div class="col-md-8 columns invite_input">
                <input type="hidden" id="studio_id" value="{{$s}}" name="studio_id">
                <input type="hidden" id="role_id" name="role_id" value="4">
                <input type="email" class="form-input" id="email" name="email" placeholder="Enter Email">
            </div>
            <div class="col-md-1 columns text-center">
                <img class="save-btn" src="{{asset('images/plus.svg')}}" alt="plus">
            </div>
        </div>  
    </div>
</div>