@extends('layouts.universal', ['title' => 'Asset Files'])

@section('content')
    {{-- File Form --}}
    <div class="mb-4">
        <form action="{{ route('universal.assets.files.store', ['folder' => $folder]) }}" method="post"
            enctype="multipart/form-data">
            @csrf
            <x-card>
                <div class="flex items-center">
                    <div class="mr-4">
                        <x-form.label value="File Name" />
                        <x-form.input type="file" class="w-full border border-gray-300 rounded p-2" name="asset_files[]" multiple />
                        <x-form.input-error for="asset_files" />
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="bg-green-500 hover:bg-green-600 text-white p-2 font-bold rounded"
                            title="Upload">
                            <x-icons.cloud-arrow-up />
                        </button>
                    </div>
                </div>
            </x-card>
        </form>
    </div>
    {{-- Folder Form --}}
    <div class="mb-4">
        <form action="{{ route('universal.assets.folders.store', ['folder' => $folder]) }}" method="post"
            enctype="multipart/form-data">
            @csrf
            <x-card>
                <div class="flex items-center">
                    <div class="mr-4">
                        <x-form.label value="Folder Name" />
                        <x-form.input type="text" class="w-full border border-gray-300 rounded p-2" name="folder_name"
                            placeholder="avatars" />
                        <x-form.input-error for="folder_name" />
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="bg-green-500 hover:bg-green-600 text-white font-bold p-2 rounded"
                            title="Create">
                            <x-icons.document-plus />
                        </button>
                    </div>
                </div>
            </x-card>
    </div>

    <div class="mb-6">
        <span class="bg-gray-200 text-gray-800 py-1 px-2 rounded-md shadow-sm">
            <span class="font-bold">Current Path:</span> {{ $folder->path }}
        </span>
    </div>


    <div class="relative overflow-x-auto">
        <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-6 py-3">Name</th>
                    <th scope="col" class="px-6 py-3 text-right">Created At</th>
                </tr>
            </thead>
            <tbody>
                @if ($folder->parent_id)
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                        <td scope="row" colspan="2"
                            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <div class="flex items-center justify-between">
                                <a href="{{ route('universal.assets.files.index', ['folder' => $folder->parent_id]) }}"
                                    class="flex items-center">
                                    <span class="mr-2">
                                        <x-icons.folder-minus />
                                    </span><span class="text-right">..</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                @endif

                @foreach ($folder->folders as $subFolder)
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                        <td scope="row" colspan="2"
                            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <div class="flex items-center justify-between">
                                <a href="{{ route('universal.assets.files.index', ['folder' => $subFolder->id]) }}"
                                    class="flex items-center">
                                    <span class="mr-2">
                                        <x-icons.folder-open />
                                    </span>
                                    <span
                                        class="text-right">{{ Str::of($subFolder->path)->after($folder->path)->ltrim('/') }}
                                    </span>
                                </a>
                            </div>
                        </td>
                    </tr>
                @endforeach

                @foreach ($folder->media as $media)
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                        <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <div class="flex items-center justify-between">
                                <a href="{{ $media->get_normal_url }}"
                                    class="flex items-center" target="blank" title="Open in new tab">
                                    <span class="mr-2 h-4 w-4">
                                        <x-thumbnail :media="$media" />
                                    </span>
                                    <span class="text-right">{{ $media->file_name }}
                                    </span>
                                </a>
                            </div>
                        </td>
                        <td scope="row"
                            class="px-6 py-4 text-xs text-gray-900 whitespace-nowrap dark:text-white text-right">
                            {{ $media->created_at->toDateTimeString() }}
                        </td>
                    </tr>
                @endforeach

            </tbody>
        </table>
    </div>
@endsection