@extends('layouts.frontend')
@section('title', 'My Profile')
@section('content')
<link href="{{ asset('theme/css/style.css') }}" rel="stylesheet" />
            <div class="container">
                <div class="card" id="content" style="margin-top:40px;">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="card-header card-header-success card-header-icon">
                                    <div class="card-icon" style="background:#ffa500; margin-left:-50px; margin-top: -35px;"
                                        id="quiz_show">
                                        <i class="material-icons">assignment</i>
                                    </div>
                                    <h4 class="card-title">My Profile</h4>
                                </div>
                            </div>

                        </div>
                        <div class="container text-right">
                            <a href="profile.html" class="btn btn-primary">Edit Profile </a>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane active show" id="link4">
                                <div class="row">
                                    <div class="col-md-8 col-sm-8 col-xs-8">

                                    </div>
                                    <div class="col-md-4 col-sm-4 col-xs-4">
                                        <div class="participant" style="margin-left:10px">
                                            <div class="row">
                                                <div class="col-md-6 col-sm-6 col-xs-6">
                                                    <h3><Strong>{{ $total_attempted }}</strong>&nbsp;</h3>
                                                    <p class="quiz_attempt">Quiz Attempted</p>
                                                    <!-- <p style="float:right;" ></p> -->
                                                </div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">
                                                    <h3><Strong>{{ $total_score }}</Strong>&nbsp;</h3>
                                                    <p class="quiz_attempt">Total Score</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-4 col-ms-4 col-xs-4">
                                            <div class="row">
                                                <div class="col-md-4 col-sm-4 col-lg-4 col-xs-4">
                                                    <img src="{{ asset('images/default.png') }}" alt="JDQ "
                                                        class="responsive" id="JD-Design">
                                                </div>
                                                <div class="col-md-8  col-sm-8 col-lg-8 col-xs-8">
                                                    <h6><b>{{ auth()->user()->name }}</b></h6>
                                                    <p>{{ auth()->user()->mobile_number }}</p>
                                                    <p style="font-size:12px;">{{ auth()->user()->email }}</p>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-8 col-sm-8 col-xs-8" style="margin-top:-35px;">
                                            <div class="row">
                                                <div class="col-md-3 col-sm-3 col-xs-3">
                                                    <div class="card list">
                                                        <div class="sequence">
                                                            <i class="fa fa-trophy" id="trophy1"></i>
                                                            <h3 class="rank"><strong>{{ $first_rank }}</strong></h3>
                                                            <p>1st Place</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 col-sm-3 col-xs-3">
                                                    <div class="card list">
                                                        <div class="sequence">
                                                            <i class="fa fa-trophy" id="trophy2"></i>
                                                            <h3 class="rank"><strong>{{ $second_rank }}</strong></h3>
                                                            <p>2nd Place</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 col-sm-3 col-xs-3">
                                                    <div class="card list">
                                                        <div class="sequence">
                                                            <i class="fa fa-trophy" id="trophy3"></i>
                                                            <h3 class="rank"><strong>{{ $third_rank }}</strong></h3>
                                                            <p>3rd Place</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 col-sm-3 col-xs-3">
                                                    <div class="card list">
                                                        <div class="sequence">
                                                            <i class="fa fa-trophy" id="trophy4"></i>
                                                            <h3 class="rank"><strong>{{ $participated_rank }}</strong></h3>
                                                            <p>Participated</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                   </div>
                <div class="card">
                    <div class="card-header card-header-success card-header-icon">
                        <div class="card-body">
                            <div class="text">
                                <div class="row">
                                    <div class="col-md-12">

                                        <h4 class="card-title"><b>My Participants</b></h4>
                                    </div>

                                </div>
                            </div>
                          
                        </div>
                        <!---table---->

                        <div class="">
                            <div class="material-datatables">
                                <div id="datatables_wrapper" class="dataTables_wrapper dt-bootstrap4">

                                    <table id="datatables" class="table table-responsive" cellspacing="0"
                                        style="width: 100%; color:black; text-align:center; margin-left:18px;" role="grid"
                                        aria-describedby="datatables_info">
                                        <thead style="background: #e8e8e8; ">
                                            <tr role="row">
                                                <th class="sorting_asc" tabindex="0" aria-controls="datatables"
                                                    rowspan="1" colspan="1" style="width: 236px;"
                                                    aria-sort="ascending"
                                                    aria-label="Name: activate to sort column descending">Quiz Title</th>
                                                <th class="sorting" tabindex="0" aria-controls="datatables"
                                                    rowspan="1" colspan="1" style="width: 236px;"
                                                    aria-label="Position: activate to sort column ascending">Org Name</th>
                                                <th class="sorting" tabindex="0" aria-controls="datatables"
                                                    rowspan="1" colspan="1" style="width: 236px;"
                                                    aria-label="Office: activate to sort column ascending">Score</th>
                                                <th class="" tabindex="0" aria-controls="datatables"
                                                    rowspan="1" colspan="1" style="width: 236px;"
                                                    aria-label="Age: activate to sort column ascending">Ranking</th>
                                                <th tabindex="0" aria-controls="datatables" rowspan="1"
                                                    colspan="1" style="width: 236px;"
                                                    aria-label="Date: activate to sort column ascending">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($my_ranking as $quiz_detail)
                                                <tr role="row" class="odd">
                                                    <td tabindex="0" class="sorting_1">{{ $quiz_detail->quiz->title }}
                                                    </td>
                                                    <td>{{ $quiz_detail->quiz->organization->title }}</td>
                                                    <td>{{ $quiz_detail->score }}</td>
                                                    <td>{{ $quiz_detail->rank }}</td>
                                                    <td><a href="{{ route('frontend.quiz.result.view', [$quiz_detail->quiz->slug, auth()->user()->id]) }}"
                                                            class="responsive">
                                                            <i class="material-icons" style="color:#2d8dc9;">remove_red_eye</i>
                                                            <div class="ripple-container"></div>
                                                            Result </a></td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="5">No Quiz attempted yet.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid d-none">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header card-header-success card-header-icon">
                                <div class="card-icon">
                                    <i class="material-icons"></i>
                                </div>
                                <h4 class="card-title">Quiz</h4>
                            </div>
                            <div class="card-body">
                                <form method="POST" action="{{ route('frontend.profile.update') }}">
                                    @csrf
                                    <div class="form-group">
                                        <label class="required"
                                            for="name">{{ trans('cruds.user.fields.name') }}</label>
                                        <input class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                                            type="text" name="name" id="name"
                                            value="{{ old('name', auth()->user()->name) }}" required>
                                        @if ($errors->has('name'))
                                            <div class="invalid-feedback">
                                                {{ $errors->first('name') }}
                                            </div>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label class="required"
                                            for="title">{{ trans('cruds.user.fields.email') }}</label>
                                        <input class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                                            type="text" name="email" id="email"
                                            value="{{ old('email', auth()->user()->email) }}" required>
                                        @if ($errors->has('email'))
                                            <div class="invalid-feedback">
                                                {{ $errors->first('email') }}
                                            </div>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-danger" type="submit">
                                            {{ trans('global.save') }}
                                        </button>
                                    </div>
                                </form>
                            </div>


                            <div class="card-body">
                                <form method="POST" action="{{ route('frontend.profile.password') }}">
                                    @csrf
                                    <div class="form-group {{ $errors->has('password') ? 'has-error' : '' }}">
                                        <label class="required" for="password">New
                                            {{ trans('cruds.user.fields.password') }}</label>
                                        <input class="form-control" type="password" name="password" id="password"
                                            required>
                                        @if ($errors->has('password'))
                                            <span class="help-block"
                                                role="alert">{{ $errors->first('password') }}</span>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label class="required" for="password_confirmation">Repeat New
                                            {{ trans('cruds.user.fields.password') }}</label>
                                        <input class="form-control" type="password" name="password_confirmation"
                                            id="password_confirmation" required>
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-danger" type="submit">
                                            {{ trans('global.save') }}
                                        </button>
                                    </div>
                                </form>
                            </div>

                            <div class="card-body">
                                <form method="POST" action="{{ route('frontend.profile.destroy') }}"
                                    onsubmit="return prompt('{{ __('global.delete_account_warning') }}') == '{{ auth()->user()->email }}'">
                                    @csrf
                                    <div class="form-group">
                                        <button class="btn btn-danger" type="submit">
                                            {{ trans('global.delete') }}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ---------------------- --}}
    <div class="container d-none">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        {{ trans('global.my_profile') }}
                    </div>

                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        {{ trans('global.change_password') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        {{ trans('global.delete_account') }}
                    </div>

                </div>
            </div>
            @if (Route::has('frontend.profile.toggle-two-factor'))
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            {{ trans('global.two_factor.title') }}
                        </div>

                        <div class="card-body">
                            <form method="POST" action="{{ route('frontend.profile.toggle-two-factor') }}">
                                @csrf
                                <div class="form-group">
                                    <button class="btn btn-danger" type="submit">
                                        {{ auth()->user()->two_factor ? trans('global.two_factor.disable') : trans('global.two_factor.enable') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @endif
          </div>
      </div>
@endsection