@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.team_codes') }} </h3>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active" aria-current="page"> {{ trans('main-sidebar.team_codes') }} </li>
                </ol>
            </nav>
        </div>
        <div class="row">
            <div class="col-12">

                <div class="card">
                    <div class="card-body">
                        <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.status') }}</th>
                                        <th>{{ trans('main-sidebar.testings_details') }}</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></button> <input type="text" disabled value="{{ $code->code }}" id="copyInput{{ $loop->index }}"></td>
                                        <td><span class="badge @if($code->status == 'available') badge-success @else badge-danger @endif">{{ $code->status }}</span></td>
                                        <td>
                                            @if($code->status == 'expired')
                                                <a href="{{ route('team.exam.details', ['exam_code' => $code->code]) }}" class="btn btn-primary btn-rounded btn-icon" style="line-height: 40px;">
                                                    <i class="mdi mdi-eye"></i>
                                                </a>
                                            @endif
                                        </td>
                                    </tr>
                                    
                                    
                                    <script>
                                        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: "#fd2953",
                                                            },
                                                            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')

@endpush