@extends('layouts.main')
@include('layouts.datatables')
@include('layouts.components.confirm-delete')
@use('App\Models\EventParticipant')
@section('title', $title)

@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">{{ $title }}</div>
                <div class="d-none">
                    @can('create', EventParticipant::class)
                        <x-buttons.create-small name="event-participant" :route="route('event-participant.create')" />
                    @endcan
                    <a class="btn btn-sm btn-alt-info ms-2 me-2" target="_blank" id="btn-template-event-participant" href="{{ route('event-participant.csv-template') }}">
                        <i class="fa fa-download"></i> CSV Template
                    </a>
                    @can('create', EventParticipant::class)
                        <button class="btn btn-sm btn-alt-primary" type="button" id="btn-import-event-participant" data-bs-toggle="modal" data-bs-target="#modal-import-event-participant">
                            <i class="fa fa-file-import"></i> Import CSV
                        </button>
                    @endcan
                    <x-buttons.refresh-small name="event-participant" />
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-sm table-hover table-striped align-middle" id="table-event-participant">
                        <thead>
                        <tr>
                            <th style="display:none;">ID</th>
                            <th>{{ __('validation.attributes.name') }}</th>
                            <th>{{ __('validation.attributes.email') }}</th>
                            <th>{{ __('module.event') }}</th>
                            <th>{{ __('module.event-ticket') }}</th>
                            <th>{{ __('validation.attributes.type') }}</th>
                            <th>{{ __('validation.attributes.payment_status') }}</th>
                            <th>{{ __('validation.attributes.attendance_status') }}</th>
                            <th>{{ __('validation.attributes.created_at') }}</th>
                            <th>{{ __('validation.attributes.updated_at') }}</th>
                            <th>{{ __('validation.attributes.action') }}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="module">
    const table = $('#table-event-participant').DataTable({
        ajax: { url: '{{ route('datatable.event-participant-index') }}' },
        serverSide: true,
        processing: true,
        searching: true,
        responsive: true,
        autoWidth: false,
        order: [[0, 'desc']],
        columns: [
            { data: 'id', name: 'id', visible: false, searchable: false, className: 'text-nowarp' },
            { data: 'name', name: 'name', className: 'text-nowarp' },
            { data: 'email', name: 'email', className: 'text-nowarp' },
            {
                data: 'event',
                name: 'event.title',
                defaultContent: '-',
                orderable: false,
                searchable: false,
                className: 'text-nowarp'
            },
            {
                data: 'ticket',
                name: 'ticket.name',
                defaultContent: '-',
                orderable: false,
                searchable: false,
                className: 'text-nowarp'
            },
            { data: 'type', name: 'type', orderable: false, searchable: false, className: 'text-nowarp' },
            { data: 'payment_status', name: 'payment_status', orderable: false, searchable: false, className: 'text-nowarp' },
            { data: 'attendance_status', name: 'attendance_status', orderable: false, searchable: false, className: 'text-nowarp' },
            { data: 'created_at', name: 'created_at', searchable: false, className: 'text-nowarp' },
            { data: 'updated_at', name: 'updated_at', searchable: false, className: 'text-nowarp' },
            { data: 'action', name: 'action', className:"text-nowarp", orderable: false, searchable: false }
        ],

        drawCallback: function() {
            $('button[data-delete-confirm="1"]').off('click').on('click', function() {
                deleteConfirm($(this).data('delete-route'), $(this).data('delete-id'), table)
            });

            $('button[data-send-qrcode-confirm="1"]').off('click').on('click', function() {
                sendQrcodeConfirm($(this).data('send-qrcode-route'), $(this).data('model-id'), table)
            });

        },
        initComplete: function() {
            $('#datatable-toolbar2').prepend($('#btn-create-event-participant'));
            $('#datatable-toolbar2').prepend($('#btn-template-event-participant'));
            $('#datatable-toolbar2').prepend($('#btn-import-event-participant'));
            $('#datatable-toolbar3').prepend($('#btn-refresh-event-participant'));
        },
    });

    $('#btn-refresh-event-participant').on('click', function() {
        table.draw();
    });

    window.sendQrcodeConfirm = (actionUrl, actionId, dataTable = null) => {
        Swal.fire({
            title: '{{ __('messages.confirm.action') }}',
            showDenyButton: true,
            confirmButtonText: '{{ __('general.yes') }}',
            denyButtonText: '{{ __('general.no') }}',
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: actionUrl,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                    success: function(data) {
                        let color = data.status === 'success' ? 'success' : (data.status === 'warning' ? 'warning' : 'danger');
                        let icon = color === 'success' ? 'fa fa-circle-check me-1' : 'fa fa-circle-xmark me-1';
                        let message = data.message ?? (color === 'success'
                            ? '{{ __('messages.generic.success') }}'
                            : '{{ __('messages.generic.error') }}');
                        createToast({
                            color,
                            icon,
                            message,
                        });
                        if (dataTable && typeof dataTable.draw === "function") {
                            dataTable.draw();
                        }
                    },
                    error: function() {
                        createToast({
                            color: 'danger',
                            icon: 'fa fa-circle-xmark me-1',
                            message: '{{ __('messages.generic.error') }}'
                        });
                        if (dataTable && typeof dataTable.draw === "function") {
                            dataTable.draw();
                        }
                    }
                });
            }
        })
    }
</script>
@endpush

<div class="modal fade" id="modal-import-event-participant" tabindex="-1" aria-labelledby="modalImportEventParticipantLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('event-participant.import-csv') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="modalImportEventParticipantLabel">Import CSV - {{ __('module.event-participant') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        Download the template first, fill it, then upload here.
                    </div>
                    <x-forms.input-file name="file" label="CSV File" accept=".csv,.txt" required />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-alt-secondary" data-bs-dismiss="modal">{{ __('general.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-upload me-1"></i> {{ __('general.submit') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>