<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Editar media') }}
        </h2>
    </x-slot>

    <!-- Card Section -->
    <div class="max-w-4xl px-4 py-10 sm:px-6 lg:px-8 lg:pt-14 mx-auto">
        <form action="{{ route('archive.store') }}" method="POST" enctype="multipart/form-data"
            x-data="data()"
            x-init="$watch('title', value => { string_to_slug(value) } )">
            @csrf
            <!-- Card -->
            <div class="bg-white rounded-xl shadow">
                
                <div class="pt-0 p-4 sm:pt-0 sm:p-7">
                    <!-- Grid -->
                    <div class="space-y-4 sm:space-y-6">
                        <div>
                            <label class="sr-only">
                                Product photo
                            </label>

                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-5">
                                <img class="-mt-8 relative z-10 inline-block size-24 mx-auto sm:mx-0 rounded-full ring-4 ring-white"
                                    src="https://preline.co/assets/img/160x160/img1.jpg" alt="Avatar">

                                <div class="mt-4 sm:mt-auto sm:mb-1.5 flex justify-center sm:justify-start gap-2">
                                    <button type="button"
                                        class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                            <polyline points="17 8 12 3 7 8" />
                                            <line x1="12" x2="12" y1="3" y2="15" />
                                        </svg>
                                        Upload logo
                                    </button>
                                    <button type="button"
                                        class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-red-500 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
                                        Delete
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-2">
                            <label for="af-submit-app-project-name"
                                class="inline-block text-sm font-medium text-gray-800 mt-2.5">
                                Nombre del Archivo
                            </label>

                            <input id="af-submit-app-project-name" type="text" name="name"
                                class="py-2 px-3 pe-11 block w-full border-gray-200 shadow-sm rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
                                placeholder="{{$archive->name}}" value="{{ old('slug', $archive->name) }}" x-model="title">
                        </div>

                        <div class="space-y-2 hidden">
                            <label for="af-submit-project-url"
                                class="inline-block text-sm font-medium text-gray-800 mt-2.5">
                                Project URL
                            </label>

                            <input id="af-submit-project-url" type="text" name="slug"
                                class="py-2 px-3 pe-11 block w-full border-gray-200 shadow-sm text-sm rounded-lg focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
                                placeholder="https://example.so"  x-model="slug">
                        </div>

                        <div class="space-y-2">
                            <label for="af-submit-app-upload-images"
                                class="inline-block text-sm font-medium text-gray-800 mt-2.5">
                                Preview Archivo
                            </label>

                            @switch(substr($archive->path, -3))
                                                    @case('ebp')
                                                        <div class="flex justify-center">
                                                            <img class="size-[38px] rounded-full object-cover"
                                                                src="storage/{{ $archive->path }}" alt="Avatar">
                                                        </div>
                                                    @break

                                                    @case('jpg')
                                                        <div class="flex justify-center">
                                                            <img class="size-[38px] rounded-full object-cover"
                                                                src="{{Storage::url($archive->path)}}" alt="Avatar">
                                                        </div>
                                                    @break

                                                    @case('zip')
                                                        <div class="flex justify-center">
                                                            <div class="size-[38px]">
                                                                <svg version="1.1" id="Layer_1"
                                                                    
                                                                viewBox="0 0 512 512" xml:space="preserve">
                                                                <path style="fill:#E2E5E7;"
                                                                    d="M128,0c-17.6,0-32,14.4-32,32v448c0,17.6,14.4,32,32,32h320c17.6,0,32-14.4,32-32V128L352,0H128z" />
                                                                <path style="fill:#B0B7BD;"
                                                                    d="M384,128h96L352,0v96C352,113.6,366.4,128,384,128z" />
                                                                <polygon style="fill:#CAD1D8;"
                                                                    points="480,224 384,128 480,128 " />
                                                                <path style="fill:#84BD5A;" d="M416,416c0,8.8-7.2,16-16,16H48c-8.8,0-16-7.2-16-16V256c0-8.8,7.2-16,16-16h352c8.8,0,16,7.2,16,16
     V416z" />
                                                                <g>
                                                                    <path style="fill:#FFFFFF;" d="M132.64,384c-8.064,0-11.264-7.792-6.656-13.296l45.552-60.512h-37.76
      c-11.12,0-10.224-15.712,0-15.712h51.568c9.712,0,12.528,9.184,5.632,16.624l-43.632,56.656h41.584
      c10.24,0,11.52,16.256-1.008,16.256h-55.28V384z" />
                                                                    <path style="fill:#FFFFFF;"
                                                                        d="M212.048,303.152c0-10.496,16.896-10.88,16.896,0v73.04c0,10.608-16.896,10.88-16.896,0V303.152z" />
                                                                    <path style="fill:#FFFFFF;" d="M251.616,303.152c0-4.224,3.328-8.832,8.704-8.832h29.552c16.64,0,31.616,11.136,31.616,32.48
      c0,20.224-14.976,31.488-31.616,31.488h-21.36v16.896c0,5.632-3.584,8.816-8.192,8.816c-4.224,0-8.704-3.184-8.704-8.816
      L251.616,303.152L251.616,303.152z M268.496,310.432v31.872h21.36c8.576,0,15.36-7.568,15.36-15.504
      c0-8.944-6.784-16.368-15.36-16.368H268.496z" />
                                                                </g>
                                                                <path style="fill:#CAD1D8;"
                                                                    d="M400,432H96v16h304c8.8,0,16-7.2,16-16v-16C416,424.8,408.8,432,400,432z" />
                                                            </svg>
                                                            </div>
                                                        </div>
                                                    @break

                                                    @case('mp3')
                                                        <audio controls>
                                                            <source src="{{Storage::url($archive->path)}}" type="audio/mpeg">
                                                        </audio>
                                                    @break
                                                    @case('mp4')
                                                        <video class="w-full" controls>
                                                            <source src="/docs/videos/flowbite.mp4" type="video/mp4">
                                                            Your browser does not support the video tag.
                                                        </video>
                                                    @break
                                                    

                                                    @case('epb')
                                                        <img src="storage/{{ $archive->path }}" alt="">
                                                    @break

                                                    @default
                                                @endswitch
                        </div>

                        <div class="space-y-2">
                            <label for="af-submit-app-description"
                                class="inline-block text-sm font-medium text-gray-800 mt-2.5">
                                Description
                            </label>

                            <textarea id="af-submit-app-description"
                                class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
                                rows="6"
                                placeholder="A detailed summary will better explain your products to the audiences. Our users will see this in your dedicated product page."></textarea>
                        </div>
                    </div>
                    <!-- End Grid -->

                    <div class="mt-5 flex justify-center gap-x-2">
                        <button type="submit"
                            class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
                            Subir archivo
                        </button>
                    </div>
                </div>
            </div>
            <!-- End Card -->
        </form>
    </div>

    <div class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto">
        <form action="{{ route('archive.destroy', $archive) }}" method="POST">
            @method('DELETE')
            @csrf
            <!-- Card -->
            <div class="bg-white rounded-xl shadow">
                <x-danger-button type="submit">
                    Eliminar
                </x-danger-button>
            </div>
            <!-- End Card -->
        </form>
    </div>

    
    <!-- End Card Section -->

    @push('js')
    <script>
        function data(){
            return {
                title: '',
                slug: '',
                string_to_slug(str){
                    str = str.replace(/^\s+|\s+$/g, '');
                    str = str.toLowerCase();
                    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
                    var to = "aaaaeeeeiiiioooouuuunc------";
                    for (var i = 0, l = from.length; i < l; i++) {
                        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
                    }
                    str = str.replace(/[^a-z0-9 -]/g, '')
                        .replace(/\s+/g, '-')
                        .replace(/-+/g, '-');
                    this.slug = str;
                }
            }
        }
    </script>
    @endpush
</x-admin-layout>
