<div>
    <x-title>My Profile</x-title>
    <x-account.tabs />

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="row">
        <div class="col-12 col-md-9">
            <div class="card">
                <div class="card-body">

                    {{-- DROPZONE --}}
                    <div class="mb-4">
                        <label class="form-label">Profile Picture</label>

                        <div
                                id="dropzone"
                                class="border rounded p-4 text-center text-muted"
                                style="border-style: dashed !important; cursor: pointer;"
                        >
                            <div class="mb-2">
                                <i class="mdi mdi-cloud-upload-outline" style="font-size: 28px;"></i>
                            </div>

                            <div class="fw-semibold">
                                Drag & drop an image here
                            </div>
                            <div class="small">
                                or click to select
                            </div>
                        </div>

                        <input
                                id="avatarInput"
                                type="file"
                                accept="image/*"
                                class="d-none"
                                wire:model="avatar"
                        >

                        @error('avatar')
                        <div class="text-danger small mt-2">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>

                    {{-- PREVIEW --}}
                    @if($avatar)
                        <div class="mb-4">
                            <label class="form-label">Preview</label>
                            <div>
                                <img
                                        src="{{ $avatar->temporaryUrl() }}"
                                        class="rounded border"
                                        style="max-width: 200px;"
                                >
                            </div>
                        </div>
                    @endif

                    {{-- DETAILS --}}
                    <div class="row mb-3">
                        <div class="col-6">
                            <label class="form-label">First Name</label>
                            <input class="form-control" wire:model.defer="name_first">
                            @error('name_first') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label">Last Name</label>
                            <input class="form-control" wire:model.defer="name_last">
                            @error('name_last') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input class="form-control" wire:model.defer="email">
                        @error('email') <div class="text-danger small">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-4">
                        <label class="form-label">Username</label>
                        <input class="form-control"
                               value="{{ auth()->user()->username }}"
                               disabled>
                        <div class="form-text">
                            Username cannot be changed.
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button class="btn btn-primary" wire:click="save">
                            Save Changes
                        </button>
                    </div>

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

        {{-- SIDEBAR --}}
        <div class="col-12 col-md-3">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Tip</h4>
                    <hr>
                    <p class="text-muted small mb-0">
                        Square images work best for avatars.
                        Large images will be resized automatically by the browser.
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- DRAG & DROP JS --}}
    <script>
        document.addEventListener('livewire:init', () => {
            const dropzone = document.getElementById('dropzone');
            const input = document.getElementById('avatarInput');

            dropzone.addEventListener('click', () => input.click());

            dropzone.addEventListener('dragover', e => {
                e.preventDefault();
                dropzone.classList.add('bg-light');
            });

            dropzone.addEventListener('dragleave', () => {
                dropzone.classList.remove('bg-light');
            });

            dropzone.addEventListener('drop', e => {
                e.preventDefault();
                dropzone.classList.remove('bg-light');

                if (!e.dataTransfer.files.length) return;

                input.files = e.dataTransfer.files;
                input.dispatchEvent(new Event('change', { bubbles: true }));
            });
        });
    </script>
</div>
