@extends('layout.master')

@section('css')

@stop

@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="card">
                        <div class="card-header card-header-warning">
                            <ul data-tabs="tabs" class="nav nav-tabs pull-right">
                                <li class="nav-item">
                                    <a class="nav-link active" href="{{ route('trainer.pinshistory') }}">
                                        <i class="material-icons">arrow_back</i> Back
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                            </ul>
                            <h4 class="card-title text-white">{{ 'PIN Report Details' }}</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8 col-sm-8">
                                    <div class="row">
                                        <label class="col-sm-3 col-form-label">Name</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group" id="username">
                                                {{ $user->username }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-sm-3 col-form-label">Email</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group" id="email">
                                                {{ $user->email }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-sm-3 col-form-label">Mobile Number</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                                @if ($user->role_id == 2)
                                                    {{ '+' . $user->get_doctor_details->phone_code ?? '' }}
                                                    {{ $user->get_doctor_details->mobile_number ?? '' }}
                                                @elseif($user->role_id==3)
                                                    {{ '+' . $user->get_trainer_details->phone_code ?? '' }}
                                                    {{ $user->get_trainer_details->mobile_number ?? '' }}
                                                @elseif($user->role_id==4)
                                                    {{ '+' . $user->getFrenchiseCategory->phone_code ?? '' }}
                                                    {{ $user->getFrenchiseCategory->mobile_number ?? '' }}
                                                @else
                                                    {{ '+' . $user->get_patient_details->phone_code ?? '' }}
                                                    {{ $user->get_patient_details->mobile_number ?? '' }}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-sm-3 col-form-label">Country</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                                @if ($user->role_id == 1)
                                                    {{ '- - -' }}

                                                @elseif($user->role_id==2)

                                                    {{ $user->get_doctor_details->country ?? '' }}
                                                @elseif($user->role_id==3)

                                                    {{ $user->get_trainer_details->country ?? '' }}
                                                @elseif($user->role_id==4)

                                                    {{ $user->getFrenchiseCategory->country ?? '' }}
                                                @else

                                                    {{ $user->get_patient_details->country ?? '' }}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-sm-3 col-form-label">User Role</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group" id="user_role">
                                                @if ($user->role_id == 2)
                                                    {{ 'Doctor' }}
                                                @elseif($user->role_id==3)
                                                    {{ 'Trainer' }}
                                                @elseif($user->role_id==4)
                                                    {{ 'Frenchise' }}
                                                @else
                                                    {{ 'Patient' }}
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <label class="col-sm-3 col-form-label">View Pins</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                                
                                                <a class="btn btn-info assosiated_pins_hostory btn-sm"  data-id="{{$user->id}}" data-used-pins="{{ $used_pins }}" data-un-used-pins="{{ $un_used_pins }}" title="Pins History" href="javascript:void(0);"  data-url="{{route('trainerpins.history.assosiated_pins_hostory', $user->id) }}"> <i class="material-icons">remove_red_eye</i> </a>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-4">

                                    <label class="col-form-label">Profile Picture</label>
                                    <div>
                                        <div class="form-group bmd-form-group">
                                            @if (Storage::disk('s3')->has('users/' . $user->id . '/profile_picture/' . $user->profile_picture) && !empty($user->profile_picture))
                                                <img src="{{ $user->profile_picture_url }}" style="width:200px">
                                            @else
                                                <img src="{{ asset('images/default.png') }}" style="width:200px">
                                            @endif
                                        </div>
                                    </div>
                                </div>

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


            <!-- associate::start -->
            <div class="row mt-3">
                <div class="col-lg-12 col-md-12">
                    <div class="card">
                        <div class="card-header card-header-warning">

                            <h4 class="card-title text-white">{{ 'Association' }}</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table" id="dataTableAssociateList" width="100%">
                                    <thead class=" text-info">
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Mobile Number</th>
                                            <th>Used PINs</th>
                                            <th>Number of Associations</th>
                                            <th>Role</th>
                                            <th>#Associations</th>
                                            <th>id</th>  
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- associate::end -->
            
            <!-- associate modal::start -->
            <div class="modal fade" id="AssosiationUserModal" role="dialog"
                aria-labelledby="Ass" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Assosiated List</h5>
                            <button type="button" class="close closeAssosiationModal" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="d-flex  justify-content-center font-weight-bold">
                                <span id="assosiation_purchaser_name" class="font-weight-bold"></span>
                            </div>
                            <table class="table" id="dataTableAssociateUserList" width="100%">
                                <thead class=" text-info">
                                    <tr>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Mobile Number</th>
                                        <th>Used PINs</th>
                                        <th>Number of Associations</th>
                                        <th>Role</th>
                                        <th>id</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="modal-footer">
                          
                        </div>
                    </div>
                </div>
            </div>
            <!--associate modal::end -->
            
            <!-- associate pins history::start -->
            <div class="modal fade" id="AssosiationUserPinHistoryModal" role="dialog" aria-labelledby="Ass" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="AssosiationUserPinHistoryModalLabel">Pins List</h5>
                            <button type="button" class="close closeAssosiationUserPinHistoryModal" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        
                        <div class="modal-body">
                            <div class="d-flex  justify-content-center font-weight-bold">
                                <span id="purchaser_name" class="font-weight-bold"></span>
                            </div>
                            <div class="d-flex  justify-content-center">
                                <div class="d-flex m-2">
                                    <div
                                        style="width:20px; height:20px;border-radius:50%; background:#6633ff; margin-right:8px;">
                                    </div> 
                                    <!--<strong>Used Activation Code</strong>-->
                                    <strong>Used Activation Code ( <span id="used_pins"></span> )</strong>
                                </div>
                                <div class="d-flex m-2">
                                    <div
                                        style="width:20px; height:20px;border-radius:50%; background:green; margin-right:8px;">
                                    </div> 
                                    <!--<strong>Unused Activation Code</strong>-->
                             <strong>Unused Activation Code ( <span id="un_used_pins"></span> )</strong>
                                </div>
                            </div>
                            
                            <table class="table" id="dataTableAssociateUserPinsList" width="100%">
                                <thead class=" text-info">
                                    <tr>
                                        <th style="width:10%">#</th>
                                        <th style="width:17%">Pin</th>
                                        <th style="width:18%">Patient Name</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="modal-footer">
                          
                        </div>
                    </div>
                </div>
            </div>
            <!-- associate pins history::end -->
            


        </div>
    </div>
@stop
@section('script')
    <script>
    var associate_url = "{{ route('trainerpins.history.associated_users_lists') }}",  
        assosiated_user_url="{{route('trainerpins.history.single_associated_users_lists')}}",
        id = "{{ $user->id }}",
        assosiated_pins_hostory = "{{ route('trainerpins.history.assosiated_pins_hostory') }}",
        user_details = "{{ $user }}";
        ;
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
    </script>
    <script src="{{ asset('js/trainers/pinshistory/associate_list.js') }}" type="text/javascript"></script>
    <style>
        .table-responsive {
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }

    </style>
@stop