@extends('layouts.panel')

@section('content')
<div class="container-fluid">
    <div class="d-flex mb-2 align-items-center">
        <h4 class="m-0 text-uppercase fw-bold">Ujian</h4>
        <div class="btn-toolbar ms-auto">
            <div class="btn-group btn-group-sm me-2">
                <a href="{{ route('panel.examinations.index') }}" class="btn btn-outline-secondary">Daftar Ujian</a>
            </div>
        </div>
    </div> 
    <div class="card">
        <div class="card-body">
            @include('panel.examinations.parts.info')
        </div>
        <div class="card-header">
            @include('panel.examinations.parts.navs')
        </div>
        <div class="card-body">
            <div class="d-flex mb-2 align-items-center">
                <h6 class="m-0 text-uppercase fw-bold">Tiket</h6>
                <div class="btn-toolbar ms-auto">
                    <div class="btn-group btn-group-sm me-2">
                        {{-- <a href="{{ route('panel.examinations.index') }}" class="btn btn-outline-secondary">Batal</a> --}}
                    </div>
                    <div class="btn-group btn-group-sm">
                        <a href="{{ route('panel.examinations.tickets.create',['examination'=>$examination]) }}" class="btn btn-primary">Generate Tiket</a>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table id="dt" class="table table-hover" width="100%">
                    <thead>
                        <tr>
                            <th>Kode</th>
                            <th>Pemilik</th>
                            <th>Sudah Digunakan</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<div id="modalConfirmDelete" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header p-2">
                <h5 class="modal-title"><strong>Peringatan !</strong></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-2">Data yang telah terhapus tidak dapat dikembalikan.<br/>Yakin ingin melanjutkan ?</div>
            <div class="modal-footer p-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batalkan</button>
                <button id="btn-dt-row-delete" type="button" class="btn btn-sm btn-primary">Ya Hapus</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="{{ asset('vendor/datatables/DataTables-1.12.1/css/dataTables.bootstrap5.min.css') }}">
@endpush

@push('js')
<script src="{{ asset('vendor/datatables/DataTables-1.12.1/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/DataTables-1.12.1/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
const dt = $('#dt').DataTable({
    lengthMenu: [
        [10, 25, 50, 100, -1],
        [10, 25, 50, 100, 'All']
    ],
    processing: true,
    serverSide: true,
    search: {
        return: true
    },
    ajax: {
        url : `{{ route('panel.examinations.tickets.index',['examination'=>$examination]) }}`,
        data : (params)=>{
            return $.extend({},params,{

            });
        }
    },
    order: [[0,'desc']],
    columns: [{
        data: 'code',
        width: '150px'
    },{
        data: 'owner',
        name: 'owner.fullname',
        render: (owner)=>{
            let html = ``;
            if(owner !== null){
                html += `
                <div class="d-flex align-items-center">
                    <img class="rounded-circle me-2" src="{{ asset('storage') }}/${owner.picture}" height="40">
                    <div>
                        <strong>${owner.fullname}</strong><br/>
                        <small>${owner.nis} || ${owner.username} || ${owner.email}</small>
                    </div>
                </div>
                `;
            }
            return html;
        }
    },{
        data: 'participant',
        name: 'participant.id',
        className:'text-center',
        render: (participant, type, row, meta)=>{
            let html = ``;
            if(participant !== null){
                html += `<i class="fa-solid fa-check"></i>`;
            } else {
                if(row.owner_id !== null){
                    html += `<button class="btn btn-sm btn-outline-primary btn-enroll" data-ticket-id="${row.id}">Enroll</button>`;
                }
            }
            return html;
        }
    },{
        data: 'id',
        className: 'text-center',
        width: '10px',
        render: (data, type, row, meta) => {
            return `
            <div class="dropdown dropstart">
                <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown">&#x22EE;</button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('panel.examinations.tickets.index',['examination'=>$examination]) }}/${data}/edit">Edit</a></li>
                    <li><a class="dropdown-item dt-row-remove" href="{{ route('panel.examinations.tickets.index',['examination'=>$examination]) }}/${data}" data-bs-toggle="modal" data-bs-target="#modalConfirmDelete">Hapus</a></li>
                </ul>
            </div>
            `;
        }
    }],
    createdRow : (row, data)=>{
        $(row).find('.btn-enroll').click((e)=>{
            e.preventDefault();
            let btn = $(e.target),
                btnHTML = btn.html();

            btn.prop('disabled', true);
            btn.addClass('disabled').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);

            $.post(
                `{{ route('panel.examinations.tickets.index',['examination'=>$examination]) }}/${data.id}/enroll`,{
                    _method : 'PUT'
                },(xhr)=>{
                    dt.ajax.reload(null,false);
                }, 'json'
            ).fail((xhr)=>{
                
            }).always(()=>{
                btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
            });
        });
    }
});
$('#modalConfirmDelete').on({
    'show.bs.modal': function(e) {
        $('#btn-dt-row-delete').attr('url-target', e.relatedTarget.getAttribute("href"));
    },
    'hide.bs.modal': function() {
        $('#btn-dt-row-delete').attr('url-target', '');
    }
});
$('#btn-dt-row-delete').click(function(e) {
    e.preventDefault();
    let url = $(this).attr('url-target'),
        btn = $(this),
        btnHTML = btn.html();

    $.ajax({
        method: 'POST',
        url: url,
        dataType: 'json',
        data: {
            _token: '{{ csrf_token() }}',
            _method: 'DELETE'
        },
        beforeSend: function() {
            btn.prop('disabled', true);
            btn.addClass('disabled').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);
        },
        error:(xhr)=>{
            btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
            let errorFields = xhr.responseJSON.errors;
            if(errorFields.global_message != undefined){
                alert(errorFields.global_message[0]);
            } else {
                let toast = new bootstrap.Toast(document.getElementById('toast-error'));
                toast.show();
            }
        },
        success: (response)=>{
            btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
            let modal = bootstrap.Modal.getInstance($('#modalConfirmDelete').get(0));
            modal.hide();
            let toast = new bootstrap.Toast(document.getElementById('toast-success'));
            toast.show();
            dt.ajax.reload(null, false);
        }
    });
});
</script>
@endpush