File Manager

Edit File: page-edit.blade.php

@if (session('status'))
    <x-alert :status="session('status')" :message="session('message')" />

@endif

<x-slot name="header">
        <di class="relative">
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight text-center">
                {{ __('Page Detail') }}
            </h2>
        </di>
    </x-slot>

<div class="py-12">
        <div class=" mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="flex items-center gap-8 justify-center p-8">
                    <div>
                        <img src="{{$photo ? $photo->temporaryUrl() : $oldphoto }}" alt="Favicon" class="w-24 h-24">
                    </div>
                    <div>
                        <img src="{{$image ? $image->temporaryUrl() : $oldimage }}" alt="Logo Panjang" class="w-96 h-24">
                    </div>
                </div>

<label for="favicon" class="duration-200 flex flex-col items-center w-3/4 me-auto px-4 py-6 bg-white text-blue-600 rounded-lg shadow-lg tracking-wide uppercase border border-blue-600 cursor-pointer hover:bg-blue-600 hover:text-white">
                                <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                    <path d="M16.88 4.12A10 10 0 111 10c.05 0 .1 0 .15-.01A7.75 7.75 0 004 12.25V15a1 1 0 001 1h10a1 1 0 001-1v-2.75A7.75 7.75 0 0015 10a7.75 7.75 0 001.87-5.88z" />
                                </svg>
                                <span class="mt-2 text-base leading-normal">Select a Favicon</span>
                                <input id="favicon" type="file" wire:model="photo" class="hidden" />
                                <div class="flex">
                                    Status : <div wire:loading.remove wire:target="photo">{{ $photo ? "Uploaded" : "IDLE" }}</div>
                                    <div wire:loading wire:target="photo">Uploading...</div>
                                </div>
                                <div
                                    x-data="{ uploading: false, progress: 0 }"
                                    x-on:livewire-upload-start="uploading = true"
                                    x-on:livewire-upload-finish="uploading = false"
                                    x-on:livewire-upload-cancel="uploading = false"
                                    x-on:livewire-upload-error="uploading = false"
                                    x-on:livewire-upload-progress="progress = $event.detail.progress"></div>
                            </label>

<x-input-error class="mt-2" :messages="$errors->get('photo')" />
                        </div>
                        <div class="w-1/2 flex flex-col items-end">
                            <x-input-label  value="Logo" for="logo" class="ms-auto dark:text-white" />

<label for="logo" class="duration-200 flex flex-col items-center w-3/4 px-4 py-6 ms-auto bg-white text-blue-600 rounded-lg shadow-lg tracking-wide uppercase border border-blue-600 cursor-pointer hover:bg-blue-600 hover:text-white">
                                <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                    <path d="M16.88 4.12A10 10 0 111 10c.05 0 .1 0 .15-.01A7.75 7.75 0 004 12.25V15a1 1 0 001 1h10a1 1 0 001-1v-2.75A7.75 7.75 0 0015 10a7.75 7.75 0 001.87-5.88z" />
                                </svg>
                                <span class="mt-2 text-base leading-normal">Select a Logo</span>
                                <input id="logo" type="file" wire:model="image" class="hidden" />
                                <div class="flex">
                                    Status : <div wire:loading.remove wire:target="image">{{ $image ? "Uploaded" : "IDLE" }}</div>
                                    <div wire:loading wire:target="image">Uploading...</div>
                                </div>
                            </label>

<x-input-error class="mt-2" :messages="$errors->get('image')" />
                        </div>
                    </div>
                    <div>
                        <x-input-label class="dark:text-white" value="Canonical" for="canonical" />
                        <x-text-input wire:model="canonical" id="canonical" name="canonical" type="text" class="mt-1 block w-full" required autofocus autocomplete="canonical" />
                        <x-input-error class="mt-2" :messages="$errors->get('title')" />
                    </div>
                    <div>
                        <x-input-label class="dark:text-white" value="Site Title" for="title" />
                        <x-text-input wire:model="title" id="title" name="title" type="text" class="mt-1 block w-full" required autocomplete="title" />
                        <x-input-error class="mt-2" :messages="$errors->get('title')" />
                    </div>
                    <div>
                        <x-input-label class="dark:text-white" value="Site Keyword" for="keyword" />
                        <x-text-input wire:model="keywords" id="keyword" name="keyword" type="text" class="mt-1 block w-full" required autocomplete="keyword" />
                        <x-input-error class="mt-2" :messages="$errors->get('keyword')" />
                    </div>
                    <div>
                        <x-input-label class="dark:text-white" value="Site Description" for="description" />
                        <x-text-input wire:model="description" id="description" name="description" type="text" class="mt-1 block w-full" required autocomplete="description" />
                        <x-input-error class="mt-2" :messages="$errors->get('description')" />
                    </div>
                    <div class="flex items-center gap-4 w-full justify-center">
                        <x-primary-button>{{ __('Save') }}</x-primary-button>

<x-action-message class="me-3" on="user-created">
                            {{ __('Page Edited.') }}
                        </x-action-message>
                    </div>
                </form>

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

Back