@extends('layout.master')

@section('css')
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
    <link href="{{ asset('css/fileinput.css') }}" rel="stylesheet" />
    <style>
        .file-drop-zone,
        .file-preview {
            border: none;
            padding: 0;
        }

        .krajee-default.file-preview-frame .kv-file-content {
            max-width: 100%;
        }

        .krajee-default.file-preview-frame {
            width: 100%;
        }

    </style>
@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" style="background: #9abe2a">
                            <ul data-tabs="tabs" class="nav nav-tabs pull-right">
                                <li class="nav-item">
                                    <a class="nav-link active" href="{{ url()->previous() }}">
                                        <i class="material-icons">arrow_back</i> Back
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                            </ul>
                            <h4 class="card-title text-white">{{ 'Trainer Details' }}</h4>
                        </div>

                        <div class="card-body">
                            @if($trainer->trashed())
                            <div class="row">
                                <div class="alert alert-danger w-100 d-flex align-items-center">
                                    <i class="material-icons text-light mr-3">warning</i>
                                    Trainer has been deleted
                                </div>
                            </div>
                            @endif
                            <div class="row">

                                <div class="col-md-8 col-sm-12 ">

                                    <div class="row">

                                        <label class="col-sm-4 col-form-label"> Name</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                                {{ $trainer->username }}
                                            </div>
                                        </div>

                                        <label class="col-sm-4 col-form-label"> Email</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                                {{ $trainer->email }}
                                            </div>
                                        </div>

                                        <label class="col-sm-4 col-form-label">Mobile Number</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                                +{{ $trainer->get_trainer_details->phone_code }}
                                                {{ $trainer->get_trainer_details->mobile_number }}

                                            </div>
                                        </div>
                                        <label class="col-sm-4 col-form-label">Trainer Type</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">

                                                @if ($trainer->get_trainer_details->trainer_type != '')
                                                    {{ $trainer->get_trainer_details->trainer_type }}
                                                @else
                                                    {{ 'Company' }}
                                                @endif
                                            </div>
                                        </div>
                                        @if ($assosiate != '')

                                            <label class="col-sm-4 col-form-label">Associate With</label>
                                            <div class="col-sm-8">
                                                <div class="form-group bmd-form-group">
                                                    {{ $assosiate }} {{ '(' . $type . ')' }}

                                                </div>
                                            </div>
                                        @endif

                                        <label class="col-sm-4 col-form-label">Country</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                                {{ ucfirst($trainer->get_trainer_details->country) }}

                                            </div>
                                        </div>

                                        <label class="col-sm-4 col-form-label">City</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                                {{ $trainer->get_trainer_details->city }}

                                            </div>
                                        </div>

                                        @if($trainer->het_trainer_details!=null)
                                        <label class="col-sm-4 col-form-label">Per PIN Price</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">

                                                {{ $trainer->get_trainer_details->pin_price }}

                                            </div>
                                        </div>
                                        @endif


                                    <label class="col-sm-4 col-form-label">Photo Id Approval </label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group d-flex align-items-center">
                                                
                                                @if (empty($trainer->get_trainer_details) || $trainer->get_trainer_details->photo_id_is_approved == 'Pending')
                                                <div class="mt-0 d-flex justify-content-center align-items-center text-warning">
                                                    <b>Pending</b>
                                                 <i class="bi bi-clock text-secondary ml-2"></i>
                                                </div>
        
        
                                            @elseif($trainer->get_trainer_details->photo_id_is_approved=="Rejected")
                                                <div class="mt-0 d-flex justify-content-center align-items-center text-danger">
                                                    <b>Rejected</b> 
                                                    <i class="bi bi-x fa-2x text-danger ml-2"></i>
                                                </div>
                                           
                                            @else
                                                <div class="mt-0 mb-2 d-flex justify-content-center align-items-center text-success">
                                                    <b>Success </b> <i class="bi bi-check fa-3x text-success"></i>
                                                </div>
                                            @endif
                                            </div>
                                        </div>




                                        <label class="col-sm-4 col-form-label">Status</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">
                                                @if ($trainer->status == 1)
                                                    <div class="text-success"><b>{{ 'Active' }}</b></div>
                                                @else
                                                    <div class="text-danger"><b>{{ 'Deactive' }}</b></div>
                                                @endif
                                            </div>
                                        </div>


                                        <label class="col-sm-4 col-form-label">Created At</label>
                                        <div class="col-sm-8">
                                            <div class="form-group bmd-form-group">

                                                {{ date(config('app.date_format_date_time'), strtotime($trainer->get_trainer_details->created_at)) }}

                                            </div>
                                        </div>
                                    
                                    @if ($trainer->role_id != 5)
                                    
                                        <label class="col-sm-4 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 current_trainer_details"  data-id="{{$trainer->id}}" data-used-pins="{{ $used_pins }}" data-un-used-pins="{{ $un_used_pins }}"  title="Pins History" href="javascript:void(0);"  data-url="{{route('pins.history.assosiated_pins_hostory', $trainer->id) }}"> <i class="material-icons">remove_red_eye</i> </a>
                                                
                                            </div>
                                        </div>
                                    
                                    @endif

                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-12">


                                    <label class="col-form-label" style="margin-left: 45px;">Profile Picture</label>

                                    <div class="d-flex justify-content-center">
                                        <input type="file" id='profile_picture_link'>
                                    </div>

                                    <label class="col-form-label" style="margin-left: 45px;">Photo Id</label>
                                    <div class="d-flex justify-content-center">
                                        <input type="file" id='photo_id_link'>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
                        
            @if ($trainer->role_id != 5)
            <!-- 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>
                </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 ( <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 ( <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>
                                        <th style="width:18%">Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- associate pins history::end -->
            @endif
            
            
        </div>
    </div>
@stop
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
    </script>
    <script src="{{ asset('js/image/fileinput.js') }}" type="text/javascript"></script>
    <script>
        $("#profile_picture_link").fileinput({
            overwriteInitial: true,

            @if ($trainer->profile_picture != null)
                initialPreview : "{{ $trainer->profile_picture_url }}",
            @else
                initialPreview : "{{ asset('images') . '/default.png' }}",
            @endif
            initialPreviewAsData: true,
            validateInitialCount: true,
            showUpload: false,
            showPreview: true,
            showBrowse: false,
            showRemove: false,
            showCaption: false,
            showUploadStats: true,
            removeFromPreviewOnError: true,
            initialPreviewConfig: [
                @if ($trainer->profile_picture != '')
                    {
                    showRemove:false,
                    showDrag:false,
                    caption: "{{ $trainer->profile_picture }}",
                    width: '120px',
                    url: "{{ $trainer->profile_picture_url }}",
                },@else
                    {
                    showRemove:false,
                    showDrag:false,
                    caption: "No profile picture",
                    width: '120px',
                    url: "{{ asset('images') . '/default.png' }}",
                    },
                @endif
            ],
            uploadUrl: '/file-upload-batch/2',
            maxFilePreviewSize: 10240
        });
        $("#photo_id_link").fileinput({
            overwriteInitial: true,

            @if ($trainer->get_trainer_details->photo_id != null)
                initialPreview :"{{ $trainer->photoid_url }}",
            @else
                initialPreview : "{{ asset('images') . '/default.png' }}",
            @endif
            initialPreviewAsData: true,
            validateInitialCount: true,
            showUpload: false,
            showPreview: true,
            showBrowse: false,
            showRemove: false,
            showCaption: false,
            showUploadStats: true,
            removeFromPreviewOnError: true,
            initialPreviewConfig: [
                @if ($trainer->get_trainer_details->photo_id != '')
                    {
                    showRemove:false,
                    showDrag:false,
                    caption: "{{ $trainer->get_trainer_details->photo_id }}",
                    width: '120px',
                    url: "{{ $trainer->photoid_url }}",
                },@else
                    {
                    showRemove:false,
                    showDrag:false,
                    caption: "No photoid available",
                    width: '120px',
                    url: "{{ asset('images') . '/default.png' }}",
                    },
                @endif
            ],
            uploadUrl: '/file-upload-batch/2',
            maxFilePreviewSize: 10240
        });

        var associate_url = "{{ route('pins.history.associated_users_lists') }}",  
            assosiated_user_url="{{route('pins.history.single_associated_users_lists')}}",
            id = "{{ $trainer->id }}",
            assosiated_pins_hostory = "{{ route('pins.history.assosiated_pins_hostory') }}",
            user_details = "{{ $trainer }}",
            delete_unused_pin_url = "{{ route('trainers.delete_unused_pin') }}";
    
            var temp='';
            @if(is_null($trainer->get_trainer_details->trainer_type))
                temp+= "Trainer";
            @else
                temp+= "{{ $trainer->get_trainer_details->trainer_type }}";
            @endif
                temp+= ": {{ $trainer->username }} ({{ $trainer->email }})";
           var trainer_details = temp;
           
    </script>
    <script src="{{ asset('js/trainer/detail.js') }}" type="text/javascript"></script>
@stop