@extends( 'backend.layouts.app' )

@section('title', $moduleProperties['longModuleName'])

@section('CSSLibraries')
{{--    <link href="{{ backend_asset('plugins/colorbox/colorbox.css') }}" rel="stylesheet">--}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

    <style>
        .table {
            background-color: white;
        }
    </style>
@endsection

@section('JSLibraries')
{{--    <script src="{{ backend_asset('plugins/colorbox/jquery.colorbox-min.js') }}"></script>--}}
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
{{--    <script src="{{ backend_asset('dist/js/loader.js') }}"></script>--}}

@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>{{ $moduleProperties['longModuleName'] }}
                <a href="{{ backend_url($moduleProperties['controller'].'/edit/'.$record->id) }}" type="button"
                   class="pull-right btn btn-primary btn-flat">Edit {{ str_singular($moduleProperties['shortModuleName']) }}</a>
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">

            <div class="row">

                @include( 'backend.layouts.notification_message' )

                <div class="col-md-3">
                    <!-- Profile Image -->
                    <div class="box box-primary">
                        <div class="box-body box-profile">
{{--                            <button id="profile-pic" class="btn btn-success">Click Here</button>--}}
                            <img id="profile-pic" class="profile-user-img img-responsive img-circle"
                                 src="{{ $record->profile_picture_auto }}" alt="User profile picture">

                            <h3 class="profile-username text-center">{{ $record->full_name }}</h3>

                            <p class="text-muted text-center">{{ $record->email }}</p>

                            <ul class="list-group list-group-unbordered">
                                <li class="list-group-item">
                                    <b>Status</b> <span class="pull-right">{!! $record->active_text_formatted !!}</span>
                                </li>
                                <li class="list-group-item">
                                    <b>Verified</b> <span
                                            class="pull-right">{!! $record->verified_text_formatted !!}</span>
                                </li>
                                <li class="list-group-item">
                                    <b>Blocked</b> <span class="pull-right">{!! $record->block_text_formatted !!}</span>
                                </li>
                                <li class="list-group-item">
                                    <b>Profile Status</b> <span class="pull-right">{!! $record->profile_complete_text_formatted !!}</span>
                                </li>
                                <li class="list-group-item">
                                    <b>Cafe Visits</b> <span class="pull-right">{!! $record->cafe_visits !!}</span>
                                </li>
                                <li class="list-group-item">
                                    <b>Movie Visits</b> <span class="pull-right">{!! $record->movie_visits !!}</span>
                                </li>
                                <li class="list-group-item">
                                    <b>Total Fans</b> <span class="pull-right">{!! $record->fans_count !!}</span>
                                </li>
                            </ul>
                        </div>
                        <!-- /.box-body -->
                    </div>

                </div>

                <div class="col-md-9">
                    <div class="box box-primary">
                        <div class="box-body box-profile">
                            <h3 class="profile-username text-center">{{ $record->full_name }} Information</h3>

                            <div class="col-md-6">
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <th scope="row">Email</th>
                                        <td>{{ $record->email }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Username</th>
                                        <td>{{ $record->username }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">First Name</th>
                                        <td>{{ $record->first_name }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Level</th>
                                        <td>{{ $record->level }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Remaining Autographs</th>
                                        <td>{{ $record->autograph }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Points</th>
                                        <td>{{ $record->points }}</td>
                                    </tr>

                                    <tr>
                                        <th scope="row">Education</th>
                                        <td>{{ $record->education_auto }}</td>
                                    </tr>

                                    <tr>
                                        <th scope="row">Catchphrase</th>
                                        <td>{{ $record->catchphrase_auto }}</td>
                                    </tr>

                                    <tr>
                                        <th scope="row">About</th>
                                        <td>{{ $record->about }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="col-md-6">
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <th scope="row">Phone</th>
                                        <td>{{ $record->phone_formatted }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Birth Date (M/D/Y)</th>
                                        <td>{{ $record->dob_auto }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Last Name</th>
                                        <td>{{ $record->last_name }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Gender</th>
                                        <td>{{ $record->gender_auto }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Total Ghosts</th>
                                        <td>{{ $record->ghost_count }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Fav Movie</th>
                                        <td>{{ $record->movie_auto }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Fav Movie Why?</th>
                                        <td>{{ $record->movie_reason }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Autographs Sent</th>
                                        <td>{{ $record->autographs_sent_count }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Autographs Received</th>
                                        <td>{{ $record->autographs_received_count }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box-body box-profile">
                            <h3 class="profile-username text-center">Friends/ Dates Configuration</h3>

                            <div class="col-md-6">
                                <h2><u>Date</u></h2>
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <th scope="row">Gender</th>
                                        <td>{{ $record->date_gender_text }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Invite Availability</th>
                                        <td>{{ $record->date_invite_text }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Age Between</th>
                                        <td>{{ $record->date_age_text }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Education</th>
                                        <td>{{ $record->date_education_text }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="col-md-6">
                                <h2><u>Friend</u></h2>
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <th scope="row">Gender</th>
                                        <td>{{ $record->friend_gender_text }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Invite Availability</th>
                                        <td>{{ $record->friend_invite_text }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Age Between</th>
                                        <td>{{ $record->friend_age_text }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Education</th>
                                        <td>{{ $record->friend_education_text }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('inlineJS')
    <script>
        jQuery(document).ready(function () {
            jQuery("#profile-pic").on('click', function () {
                jQuery.ajax({
                    type: 'GET',
                    url: '{{ route('backend.images', $record->id) }}',
                    dataType: 'json',
                    beforeSend : ajax_loader.show(),
                    success: function (data) {
                        ajax_loader.hide();
                        jQuery.fancybox.open(data);
                    },
                });
            });
        });
    </script>
@endsection