@props(['docs'])
<div>
    <div>
        <table class="table table-bordered">
            <thead class="bg-dark text-light">
                <tr>
                    <th>TITLE</th>
                    <th colspan="2"><span class="fas fa-eye"></span> VIEW</th>
                </tr>
            </thead>
            @unless (count($docs) == 0)
                @forelse  ($docs ?? '' as $doc)
                    <tr>
                        <th>{{ $doc->studentdoctype->name }}</th>
                        <td>
                            <a href="{{ asset('studentdocs/'.$doc->doclocation) }}" target="_blank">{{ $doc->studentdoctype->name }}</a>
                        </td>
                        <td>
                            <form action="/delstuddoc/{{ $doc->studentdocument_id }}" method="POST" class="deletefile" onsubmit="event.preventDefault();">
                                {{ csrf_field() }}
                                @method('DELETE')
                                <button class="btn btn-danger btn-sm float-end" onclick="$.fn.DeleteData(event,$(this).parents('form.delete'),'/delstuddoc/{{ $doc->studentdocument_id }}','/loaddocs/{{ auth()->user()->userid }}',$('#uploadedContainer'),$(this).next(),'','',false);"><span class="fas fa-times-circle" style="font-size: 1.2em;"></span> DELETE</button>
                                <x-notify/>
                            </form>
                            
                        </td>
                    </tr>
                    @empty
                        <tr>
                            <th colspan="3">
                                No Document uploaded yet!
                            </th>
                        </tr>
                @endforelse
            @else
                <tr>
                    <th colspan="3" class="text-danger">
                        No Document uploaded yet! 
                    </th>
                </tr>
            @endunless
        </table>
    </div>
</div>