@extends('layouts.app')

@section('content')

<div class="table-responsive m-4 p-6">
    <table id="basic-datatables" class="display table table-striped table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Image</th>
                <th>title</th>
                <th>Event Type</th>
                <th>Event Mood</th>
                <th>Score</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone Number</th>
                <th>Created date</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @if(isset($uploadedShotsFiles))
            @foreach ($uploadedShotsFiles as $fle)
                <tr id="file-row-{{ $fle['id'] }}">
                    <td>{{ $fle['id'] }}</td>
                    @if($fle['fileType']	=== 'application/pdf')
                    <td>

                        {{-- <embed src="{{ asset($fle['path']) }}" type="application/pdf" class="w-full h-48 mb-4" /> --}}
                            <div class="flex justify-center">
                                <a href="{{ asset($fle['path']) }}" class="btn btn-primary" target="_blank">View PDF</a>
                            </div>

                    </td>
                    @else
                    <td><img src="{{ asset($fle['path']) }}" alt="{{ $fle['decription'] }}" class="w-24 h-24 object-cover" /></td>
                    @endif
                    <td>{{ $fle['decription'] }}</td>
                    <td>{{ $fle['eventType'] }}</td>
                    <td>{{ $fle['eventmood'] }}</td>
                    <td>{{ $fle['rating'] }}</td>
                    <td>{{ $fle['user']->name }}</td>
                    <td>{{ $fle['user']->email }}</td>
                    <td>{{ $fle['user']->mobile }}</td>
                    <td>{{ $fle['created_at'] }}</td>
                    <td>
                        <button class="btn btn-danger delete-file" data-id="{{ $fle['id'] }}">
                            Delete
                        </button>
                    </td>
                </tr>
            @endforeach
            @endif
        </tbody>
    </table>
</div>

@endsection

@section('scripts')
    <script>
        var baseUrl = "{{ url('/') }}";
        $(document).ready(function() {
            // Event listener for delete button
            $('.delete-file').on('click', function() {
                var fileId = $(this).data('id'); // Get the file ID
                var token = $('meta[name="csrf-token"]').attr('content'); // Get CSRF token

                // Confirm the delete action
                if (confirm('Are you sure you want to delete this file?')) {
                    $.ajax({
                        url: baseUrl + '/files/' + fileId,
                        type: 'GET',
                        success: function(response) {
                            if (response.success) {
                                // Remove the row from the table
                                $('#file-row-' + fileId).remove();

                                // Optionally, show a success message
                                alert(response.message);
                            } else {
                                // Show error message
                                alert(response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error(xhr.responseText);
                            alert('An error occurred while trying to delete the file.');
                        }
                    });
                }
            });
        });
        function refreshTableRowNumbers() {
                $('table tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
    </script>
@endsection