@extends('frontend.layouts.app')
<style>
    .form-check {
        margin: 0 auto 20px 0!important;
    }
</style>
@section('frontend-content')

    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title"> {{ trans('main-sidebar.my_codes') }} </h3>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active" aria-current="page"> {{ trans('main-sidebar.my_codes') }} </li>
                </ol>
            </nav>
        </div>
        
        <div class="row">
                    <div class="col-md-3 stretch-card grid-margin">
                        <div class="card bg-gradient-danger card-img-holder text-white">
                            <div class="card-body">
                                <img src="{{asset('assets/images/dashboard/circle.svg')}}" class="card-img-absolute" alt="circle-image" />
                                <h4 class="font-weight-normal mb-3">{{ trans('main-sidebar.my_codes') }} <i class="mdi mdi-chart-line mdi-24px float-right"></i>
                                </h4>
                                <h2 class="mb-5">{{ \App\Models\Code::where('customer_id', \Illuminate\Support\Facades\Auth::id())->count() }}</h2>
                                <div class="d-flex justify-content-between">
                                    <p>{{ trans('main-sidebar.available') }} : {{ \App\Models\Code::where([['customer_id', \Illuminate\Support\Facades\Auth::id()], ['status', 'available']])->count() }}</p>
                                    <p>{{ trans('main-sidebar.expired') }} : {{ \App\Models\Code::where([['customer_id', \Illuminate\Support\Facades\Auth::id()], ['status', 'expired']])->count() }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 stretch-card grid-margin">
                        <div class="card bg-gradient-info card-img-holder text-white">
                            <div class="card-body">
                                <img src="{{ asset('assets/images/dashboard/circle.svg') }}" class="card-img-absolute" alt="circle-image" />
                                <h4 class="font-weight-normal mb-3">{{ trans('main-sidebar.my_testings') }} <i class="mdi mdi-bookmark-outline mdi-24px float-right"></i>
                                </h4>
                                <h2 class="mb-5">{{ \App\Models\Exam::where('user_id', \Illuminate\Support\Facades\Auth::id())->count() }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 stretch-card grid-margin">
                        <div class="card bg-gradient-success card-img-holder text-white">
                            <div class="card-body">
                                <img src="{{ asset('assets/images/dashboard/circle.svg') }}" class="card-img-absolute" alt="circle-image" />
                                <h4 class="font-weight-normal mb-3">{{ trans('main-sidebar.my_teams') }} <i class="mdi mdi-diamond mdi-24px float-right"></i>
                                </h4>
                                <h2 class="mb-5">{{ \App\Models\TeamWork::where('user_id', \Illuminate\Support\Facades\Auth::id())->count() }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 stretch-card grid-margin">
                        <div class="card bg-gradient-warning card-img-holder text-white">
                            <div class="card-body">
                                <img src="{{ asset('assets/images/dashboard/circle.svg') }}" class="card-img-absolute" alt="circle-image" />
                                <h4 class="font-weight-normal mb-3">{{ trans('main-sidebar.my_employees') }} <i class="mdi mdi-diamond mdi-24px float-right"></i>
                                </h4>
                                <h2 class="mb-5">{{ \App\Models\TeamWork::where('user_id', \Illuminate\Support\Facades\Auth::id())->sum('number_of_exams') }}</h2>
                            </div>
                        </div>
                    </div>
                </div>
                
        <div class="row">
            <div class="col-12">

                <div class="card">
                    <div class="card-body">
                        <div class="card-header">
                           <a href="{{ route('payment.buy_codes') }}" class="btn btn-dark">{{ trans('main-sidebar.press_to_buy') }} (${{ \App\Models\BookingPrice::find(1)->herman_price }})</a>
                           
                            <a href="{{ route('codes.export', ['customer_id' => \Illuminate\Support\Facades\Auth::id()]) }}" class="btn btn-success btn-rounded">
                                                <i class="mdi mdi-file-excel"></i>
                                                {{ trans('main-sidebar.Export_Excel') }}</a>
                        </div>
                        <div class="mt-4 border-top border-bottom">
                            <table class="table">
                                <thead>
                                <tr style="background-color: #67e0e1;color: #fff;">
                                    <th>#</th>
                                    <th>{{ trans('main-sidebar.code') }}</th>
                                    <th>{{ trans('main-sidebar.link') }}</th>
                                    <th>{{ trans('main-sidebar.status') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($codes as $code)
                                    <tr>
                                        <td>{{ $loop->index +1 }}</td>
                                        
                                        <td>
                                            <button class="btn btn-dark btn-rounded" style="padding: 10px;" onclick="copy{{ $loop->index }}()">
                                                <i class="mdi mdi-clipboard"></i>
                                                copy code
                                                </button>
                                            <input type="text" disabled value="{{ $code->code }}" id="copyInput{{ $loop->index }}">
                                        </td>
                                        <td>
                                            <button class="btn btn-dark btn-rounded" style="padding: 10px;" onclick="copyLink{{ $loop->index }}()">
                                                <i class="mdi mdi-clipboard"></i>
                                                copy code & link
                                                </button>
                                            <input type="hidden" disabled value="Code: {{ $code->code }} , Link: {{url('/')}}/team-exam" id="copyInputLink{{ $loop->index }}">
                                        </td>
                                         
                                        <td><span class="badge @if($code->status == 'available') badge-success @else badge-danger @endif">{{ $code->status }}</span></td>
                                    </tr>
                                    
                                    <script>
                                        function copyLink{{ $loop->index }}() {
                                              /* Get the text field */
                                              var copyText{{ $loop->index }} = document.getElementById("copyInputLink{{ $loop->index }}");
                                            
                                              /* Select the text field */
                                              copyText{{ $loop->index }}.select();
                                              copyText{{ $loop->index }}.setSelectionRange(0, 99999); /* For mobile devices */
                                            
                                               /* Copy the text inside the text field */
                                              navigator.clipboard.writeText(copyText{{ $loop->index }}.value);
                                            
                                              /* Alert the copied text */
                                              Toastify({
                                                            text: "Copied the code: " + copyText{{ $loop->index }}.value,
                                                            duration: 3000,
                                                            newWindow: true,
                                                            close: true,
                                                            gravity: "top", // `top` or `bottom`
                                                            position: "left", // `left`, `center` or `right`
                                                            stopOnFocus: true, // Prevents dismissing of toast on hover
                                                            style: {
                                                                background: "linear-gradient(to right, #00b09b, #96c93d)",
                                                            },
                                                            onClick: function(){} // Callback after click
                                                        }).showToast();
                                            }
                                            
                                            
                                        function copy{{ $loop->index }}() {
                                              /* Get the text field */
                                              var copyText{{ $loop->index }} = document.getElementById("copyInput{{ $loop->index }}");
                                            
                                              /* Select the text field */
                                              copyText{{ $loop->index }}.select();
                                              copyText{{ $loop->index }}.setSelectionRange(0, 99999); /* For mobile devices */
                                            
                                               /* Copy the text inside the text field */
                                              navigator.clipboard.writeText(copyText{{ $loop->index }}.value);
                                            
                                              /* Alert the copied text */
                                              Toastify({
                                                            text: "Copied the code: " + copyText{{ $loop->index }}.value,
                                                            duration: 3000,
                                                            newWindow: true,
                                                            close: true,
                                                            gravity: "top", // `top` or `bottom`
                                                            position: "left", // `left`, `center` or `right`
                                                            stopOnFocus: true, // Prevents dismissing of toast on hover
                                                            style: {
                                                                background: "linear-gradient(to right, #00b09b, #96c93d)",
                                                            },
                                                            onClick: function(){} // Callback after click
                                                        }).showToast();
                                            }
                                    </script>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- content-wrapper ends -->
    <!-- partial:partials/_footer.html -->

    <!-- partial -->
@endsection

@push('frontend-script')
    @if(session()->has('message'))
        <script>
            Toastify({
                text: '{{  session()->get('message') }}',
                duration: 3000,
                newWindow: true,
                close: true,
                gravity: "top", // `top` or `bottom`
                position: "left", // `left`, `center` or `right`
                stopOnFocus: true, // Prevents dismissing of toast on hover
                style: {
                    background: "linear-gradient(to right, #00b09b, #96c93d)",
                },
                onClick: function(){} // Callback after click
            }).showToast();
        </script>
    @endif
@endpush