@extends('admin.layouts.master')
@section('title', 'Activation Pin')
@section('content')

    <!-- Start: Body-Content -->
    <div class="body-content">
        <!-- mobile title -->
        <h1 class="page-title-sm">@yield('title')</h1>

        <div class="border-bottom row mb-3">
            <div class="col-sm-10">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('Label.Dashboard') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Activation Pin
                    </li>
                </ol>
            </div>
            <div class="col-sm-2 d-flex align-items-center">
                <a href="{{ route('activationAdd') }}" class="btn btn-default mw-130" style="margin-top: -14px;">
                    Generate Activation Pin
                </a>
            </div>
            <div class="col-sm-2 d-flex align-items-center">
                <a href="{{ route('export-pin') }}" class="btn btn-default mw-130" style="margin-top: -14px;">
                    Export Generated Pin
                </a>
            </div>
        </div>

        <table class="table table-striped activation-table text-center table-bordered">
            <thead>
                <tr style="background: #F9FAFF;">
                    <th>{{ __('Label.Id') }} </th>
                    <th>Activation Pin </th>
                    <th>Date Activated </th>
                    <th>Expiring Date</th>
                    <th>User</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($pins as $pin)
                    <tr>
                        <th scope="row">{{ $pin->id }}</th>
                        <td>{{ $pin->activationKey }}</td>
                        <td>{{ $pin->date }}</td>
                        <td>{{ $pin->expire }}</td>
                        <td>
                            @if (isset($pin->users))
                                {{ $pin->users->fullname }}
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        {{-- Pagination --}}
        <div class="d-flex justify-content-center">
            {!! $pins->links('pagination::bootstrap-4') !!}
        </div>
    </div>
    <!-- End: Body-Content -->
    </div>
    <!-- End: Right Contenct -->
@endsection

{{-- @push('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            $(function() {
                var table = $('.activation-table').DataTable({
                    "responsive": true,
                    "autoWidth": false,
                    language: {
                        paginate: {
                            previous: "<img src='{{ url('assets/imgs/left-arrow.png') }}' >",
                            next: "<img src='{{ url('assets/imgs/left-arrow.png') }}' style='transform: rotate(180deg)'>"
                        }
                    },
                    lengthMenu: [
                        [10, 25, 50, -1],
                        [10, 25, 50, 'All']
                    ],
                    processing: true,
                    serverSide: false,
                    order: [
                        [0, 'asc']
                    ],
                    ajax: "{{ route('activationData') }}",
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex'
                        },
                        {
                            data: 'activationKey',
                            name: 'activationKey'
                        },
                        {
                            data: 'date',
                            name: 'date'
                        },
                        {
                            data: 'expire',
                            name: 'expire'
                        },
                        {
                            data: 'users.fullname',
                            name: 'users.fullname',
                            "render": function(data, type, full, meta) {
                                if (data) {
                                    return data;
                                } else {
                                    return "-";
                                }
                            },
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                });
            });
        });
    </script>
@endpush --}}