@extends('layouts.app')
@section('PageHeading', 'Studio & User Management')
@section('content')
<div class="container_fluid">
    <div class="box_content">
        <div class="box_overlayout">
            <div class="box_innerlayout">
                <div class="task_card active">
                    <div class="row align-items-center">
                        <div class="col-md-6 col-lg-7 d-flex align-items-center">
                            @if ($studio)
                            <div class="training_img">
                                <img class="rounded-circle" src="{{ Helper::getStudioLogo($studio->logo) }}" alt="logo">
                            </div>
                            @endif
                            <div class="task_card_header view_studio">
                                @if ($studio->name)
                                <h5>{{$studio->name}}</h5>
                                @endif
                                @if ($studio->address)
                                <p class="d-none d-md-block">{{$studio->address}}</p>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-4 col-lg-5">
                            <div class="task_card_wrap d-none d-md-block">
                                <div class="btn-group">
                                    <a href="{{ url()->previous() }}" class="change_btn stud-btn">
                                        <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M11.3337 4.83317H3.22033L6.94699 1.1065L6.00033 0.166504L0.666992 5.49984L6.00033 10.8332L6.94033 9.89317L3.22033 6.1665H11.3337V4.83317Z" fill="#000000"/>
                                        </svg>
                                        
                                            Back to Studios
                                        </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab_content">
                    <div class="table-responsive">
				<!-- style="background-color: #fff;min-height: 380px;border-radius: 15px;" -->
                <table summary="Invoice List" class="table-theme" id="users_table">
                    <thead id="invoiceListHeader">
                        <tr id="invoiceListHeaderCol">
                            <th scope="col">User Type</th>
                            <th scope="col">Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">Contact No.</th>
                            <th scope="col">Date Joined</th>
                        </tr>
                    </thead>
                    @foreach ($users->users as $user)
                    <tr id="invoiceListRow">
                        <td>
                            <strong>{{$user->role->name}}</strong>
                        </td>
                        <td>
                            {{$user->first_name}} {{$user->last_name}}
                        </td>
                        <td>
                             <a  href="mailto:{{ $user->email }}" class="autopay_links">
                                 {{$user->email}}
                            </a>
                        </td>
                        <td>
                            <a   href="tel:{{ $user->mobile }}"  class="autopay_links">
                                {{$user->mobile}}
                             </a>
                        </td>
                        <td>
                            {{(date('d M Y',strtotime($user->joined_date)))}}
                        </td>
                    </tr>
                    @endforeach
                </table>
                </div>
                    
                </div>
            </div>

            <!-- Modal -->
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        oTable = $('#users_table').DataTable({
            fixedHeader: true,
            //scrollY: 300,
            //scrollCollapse: true,
            paging: false,
            info: false,
            lengthChange: false,
            searching: true,
            columnDefs: [{
                    "targets": -1,
                    "orderable": false
                }]
        });
    });
</script>
<style>
    #users_table_filter{
        display:none;
    }
	.tab_content {
		background-color: #fff;
		box-shadow: 0px 10px 12px 8px rgba(23, 16, 62, 0.06);
		border-radius: 20px;
		min-height: calc(100vh - 250px);
	}
	.dataTables_wrapper {
		box-shadow: none !important;
	}
</style>

@endsection