@extends('layout.base')

@section('action')
    <button class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal" data-bs-target="#modalAdd">
        <i class="fas fa-plus"></i> Add
    </button>
@endsection

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="card card-flush">
        <div class="card-header">
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Participant lists</h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="informationTable">
                <thead>
                    <tr>
                        <th></th>
                        <th>File Name</th>
                        <th>Created at</th>
                        <th>Language</th>
                        <th>View</th>
                    </tr>
                </thead>

            </table>
        </div>
    </div>

    <!-- Modal for Preview -->
    <div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="participant">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewModalLabel">File Preview</h5>
                </div>
                <div class="modal-body">
                    <div id="previewContent"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    @include('participant.elements.add')
@endsection

@section('scripts')
    <script>
        const InformationUrls = {
            _datatable: "{{ route('participant.datatable') }}",
        }

        $(document).ready(function() {
            $('#informationTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: InformationUrls._datatable,
                    type: 'GET',
                },
                columns: [{
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                    <button class="btn btn-sm btn-info text-center download-data" data-id="${data}">
                        <i class="bx bx-download"></i> 
                    </button>
                    <button class="btn btn-sm btn-danger text-center delete-data" data-id="${data}">
                        <i class="bx bx-trash"></i> 
                    </button>
                    `;
                        }
                    },
                    {
                        data: 'file_name',
                        render: function(data, type, row) {
                            var fileNameWithoutExt = data.replace(/\.[^/.]+$/,
                                "");
                            return `
                    ${fileNameWithoutExt} <span class="badge bg-dark">${row.extention}</span>`;
                        }
                    },
                    {
                        data: 'created_at',
                        render: function(data, type, row) {
                            return new Date(data).toLocaleDateString('en-GB', {
                                day: '2-digit',
                                month: 'short',
                                year: 'numeric'
                            });
                        }
                    },
                    {
                        data: 'language',
                        render: function(data, type, row) {
                            return `<span class="badge bg-primary">${data}</span>`;
                        }
                    },
                    {
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                     <button class="btn btn-sm btn-primary w-75 text-center view-data" data-id="${data}" data-file="${row.file_name}" data-ext="${row.extention}">
                        View
                    </button>
                    `;
                        }
                    },
                ],
            });
        });

        //function untuk menampilkan modal tambah
        document.getElementById('saveDocumentBtn').addEventListener('click', function() {
            let formData = new FormData();
            formData.append('file', document.getElementById('file').files[0]);
            formData.append('language', document.getElementById('language').value);

            fetch("{{ route('participant.store') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    body: formData
                })
                .then(async (response) => {
                    let data = await response.json();

                    if (response.status === 200) {
                        Swal.fire({
                            title: 'Success!',
                            text: data.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            $('#modalAdd').modal('hide');
                            $('#informationTable').DataTable().ajax.reload();
                        });
                    } else {
                        let errorMessages = [];

                        for (let field in data.errors) {
                            if (data.errors.hasOwnProperty(field)) {
                                errorMessages.push(...data.errors[field]);
                            }
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Validation failed',
                            html: errorMessages.join('<br>')
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire({
                        title: 'Error!',
                        text: 'An error occurred, please try again.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                });
        });

        // Fungsi untuk download file
        $(document).on('click', '.download-data', function() {
            var fileId = $(this).data('id');

            window.location.href = "{{ route('participant.download', ':id') }}".replace(':id', fileId);
        });


        // Fungsi untuk menghapus files
        $(document).on('click', '.delete-data', function() {
            var fileId = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: 'You won\'t be able to revert this!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('participant.destroy', ':id') }}".replace(':id',
                            fileId),
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        success: function(response) {
                            Swal.fire({
                                title: 'Deleted!',
                                text: 'The participant has been deleted.',
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                $('#informationTable').DataTable().ajax.reload();
                            });
                        },
                        error: function(xhr, status, error) {
                            Swal.fire({
                                title: 'Error!',
                                text: 'Failed to delete the Participant lists.',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    });
                }
            });
        });

        // Fungsi untuk menampilkan preview file
        $(document).on('click', '.view-data', function() {
            var fileId = $(this).data('id');
            var fileName = $(this).data('file');
            var fileExtension = $(this).data('ext');
            var filePath = `/storage/participant/${fileName}`;
            $('#previewContent').empty();

            if (fileExtension === 'pdf') {
                $('#previewContent').html(`<iframe src="${filePath}" width="100%" height="400px"></iframe>`);
            } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
                $('#previewContent').html(`<img src="${filePath}" class="img-fluid" />`);
            } else {
                Swal.fire({
                    title: 'Invalid file type',
                    text: 'This file cannot be previewed. You can only download it.',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
                return;
            }

            $('#previewModal').modal('show');
        });
    </script>
@endsection