<div>
    <div class="row">
        <div class="col-lg-6">
            <form wire:submit.prevent="store">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Informasi Website</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="judul" class="form-label">Judul Website</label>
                            <input type="text" name="judul" id="judul" wire:model="judul" class="form-control">
                            @error('judul')
                                <div class="text-danger error-validation">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="alamat" class="form-label">Alamat</label>
                            <textarea name="alamat" id="alamat" rows="4" class="form-control" style="resize: none" wire:model="alamat"></textarea>
                            @error('alamat')
                                <div class="text-danger error-validation">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="map" class="form-label">Peta (Embed Map dari Google Maps)
                            </label>
                            <textarea name="map" id="map" rows="4" class="form-control" style="resize: none" wire:model="map"></textarea>
                            @error('map')
                                <div class="text-danger error-validation">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-0">
                            <label for="footer" class="form-label">Footer </label>
                            <input type="text" name="footer" id="footer" wire:model="footer"
                                class="form-control">
                            @error('footer')
                                <div class="text-danger error-validation">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <div wire:loading.remove wire:target="store">
                                <button type="submit" class="btn btn-success me-2">Simpan</button>
                            </div>
                            <div wire:loading wire:target="store">
                                <button class="btn btn-success me-2" type="button" disabled="">Loading..
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-lg-6">
            <form wire:submit.prevent="store_logo">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Logo</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-0">
                            <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">
                                <label for="upload" class="form-label">Logo</label>
                                <input type="file" name="upload" id="upload" wire:model="upload"
                                    class="form-control">
                                @error('upload')
                                    <div class="text-danger error-validation">
                                        {{ $message }}
                                    </div>
                                @enderror
                                <div x-show="uploading">
                                    <progress max="100" x-bind:value="progress"></progress>
                                </div>
                            </div>
                        </div>
                        <div class="mt-1 mb-3">
                            <p class="text-muted mb-0">
                                Logo yang diupload berukuran <code>170x50 pixel</code>
                            </p>
                        </div>
                        <div class="live-preview">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    @if ($logo)
                                        <img class="rounded" width="200" src="{{ asset('storage/'.$logo) }}">
                                    @else
                                        <img class="rounded" width="200" src="{{ asset('logo.svg') }}">
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <div wire:loading.remove wire:target="store_logo">
                                <button type="submit" class="btn btn-success me-2">Simpan</button>
                            </div>
                            <div wire:loading wire:target="store_logo">
                                <button class="btn btn-success me-2" type="button" disabled="">Loading..
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
