@extends('layouts.master')

@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection

@section('content')
    @php
        $breadcrumbs = [
            ['label'=>'Dashboard','url'=>route('admin.dashboard')],
            ['label'=>'Profile','url'=>route('admin.admins.profile.edit'),'active'=>true],
        ];
    @endphp

    <x-ui.breadcrumb :items="$breadcrumbs" title="Admin Profile" />

    <div class="row">
        <div class="col-xxl-8 col-xl-7">
            <x-ui.card title="Edit Profile">
                <form action="{{ route('admin.admins.profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row gy-3">

                        <div class="col-12">
                              <x-form.dropzone-image class="mt-3" name="media" id="uploadmedia" 
                              placeholder="assets/images/media-placeholder.svg"
                            sizeLabel="200×200 px" :preview="asset('uploads/'.$admin->profile)" label="Admin Profile Image" :required="false" />

                        </div>

                        <x-form.input name="name" label="Name" :value="old('name',$admin->name)" />

                        <div class="col-12">
                            <label class="form-label">Email (read-only)</label>
                            <input type="email" class="form-control" value="{{ $admin->email }}" readonly>
                        </div>

                        <div class="col-12 mt-3">
                            @unless(auth()->user()?->hasRole('demo_user'))
                                <button type="submit" class="btn btn-primary">Save</button>
                            @else
                                <button type="button" class="btn btn-primary" onclick="showPermissionDenied()">Save</button>
                            @endunless
                            <a href="{{ route('admin.admins.profile.password') }}" class="btn btn-outline-secondary ms-2">Change Password</a>
                        </div>

                    </div>
                </form>
            </x-ui.card>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('build/assets/libs/toastify-js/src/toastify.js') }}"></script>
    <script>
        function showPermissionDenied(message = 'Permission denied — demo accounts cannot perform this action.') {
            Toastify({ text: message, duration: 5000, gravity: "top", position: "right", close: true }).showToast();
        }

        document.getElementById('profileInput')?.addEventListener('change', function (e) {
            const f = e.target.files && e.target.files[0];
            if (!f) return;
            const url = URL.createObjectURL(f);
            document.getElementById('avatarPreview').src = url;
        });
    </script>
@endsection