@extends('voyager::master')

@section('page_title', __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        /* Sidebar offset & left padding fix */
        .app-container .side-body {
            margin-left: 75px !important;
            padding-left: 15px !important;
            padding-right: 25px !important;
        }
        .app-container.expanded .side-body {
            margin-left: 265px !important;
            padding-left: 15px !important;
            padding-right: 25px !important;
        }
        @media (max-width: 768px) {
            .app-container .side-body,
            .app-container.expanded .side-body {
                margin-left: 0 !important;
                padding-left: 15px !important;
                padding-right: 15px !important;
            }
        }

        .avatar-locked-card {
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            padding: 24px 20px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        .avatar-locked-img-wrapper {
            width: 120px;
            height: 120px;
            margin: 0 auto 16px auto;
            position: relative;
        }
        .avatar-locked-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #f1f5f9;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            background: #ffffff;
        }
        .avatar-lock-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #f1f5f9;
            color: #475569;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11.5px;
            font-weight: 600;
            border: 1px solid #e2e8f0;
            margin-bottom: 12px;
        }
        .avatar-locked-notice {
            font-size: 12px;
            color: #64748b;
            line-height: 1.5;
            margin: 0;
            background: #f8fafc;
            padding: 10px 14px;
            border-radius: 6px;
            border: 1px dashed #cbd5e1;
        }
    </style>
@stop

@section('page_header')
    <div class="container-fluid">
        <h1 class="page-title" style="margin: 15px 0 20px 0 !important; font-size: 24px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 10px; height: auto !important; position: static !important; padding: 0 !important; float: none !important;">
            <i class="{{ $dataType->icon }}" style="position: static !important; font-size: 24px !important; color: #166534; margin: 0 !important;"></i>
            {{ __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
        </h1>
    </div>
@stop

@section('content')
    <div class="page-content container-fluid">
        <form class="form-edit-add" role="form"
              action="@if(!is_null($dataTypeContent->getKey())){{ route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) }}@else{{ route('voyager.'.$dataType->slug.'.store') }}@endif"
              method="POST" autocomplete="off">
            <!-- PUT Method if we are editing -->
            @if(isset($dataTypeContent->id))
                {{ method_field("PUT") }}
            @endif
            {{ csrf_field() }}

            <div class="row">
                <div class="col-md-8">
                    <div class="panel panel-bordered">
                        @if (isset($errors) && $errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="panel-body">
                            <div class="form-group">
                                <label for="name">{{ __('voyager::generic.name') }}</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="{{ __('voyager::generic.name') }}"
                                       value="{{ old('name', $dataTypeContent->name ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label for="email">{{ __('voyager::generic.email') }}</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="{{ __('voyager::generic.email') }}"
                                       value="{{ old('email', $dataTypeContent->email ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label for="password">{{ __('voyager::generic.password') }}</label>
                                @if(isset($dataTypeContent->password))
                                    <br>
                                    <small>{{ __('voyager::profile.password_hint') }}</small>
                                @endif
                                <input type="password" class="form-control" id="password" name="password" value="" autocomplete="new-password">
                            </div>

                            @can('editRoles', $dataTypeContent)
                                <div class="form-group">
                                    <label for="default_role">{{ __('voyager::profile.role_default') }}</label>
                                    @php
                                        $dataTypeRows = $dataType->{(isset($dataTypeContent->id) ? 'editRows' : 'addRows' )};

                                        $row     = $dataTypeRows->where('field', 'user_belongsto_role_relationship')->first();
                                        $options = $row->details;
                                    @endphp
                                    @include('voyager::formfields.relationship')
                                </div>
                                <div class="form-group">
                                    <label for="additional_roles">{{ __('voyager::profile.roles_additional') }}</label>
                                    @php
                                        $row     = $dataTypeRows->where('field', 'user_belongstomany_role_relationship')->first();
                                        $options = $row->details;
                                    @endphp
                                    @include('voyager::formfields.relationship')
                                </div>
                            @endcan

                            @php
                            if (isset($dataTypeContent->locale)) {
                                $selected_locale = $dataTypeContent->locale;
                            } else {
                                $selected_locale = config('app.locale', 'en');
                            }
                            @endphp
                            <div class="form-group">
                                <label for="locale">{{ __('voyager::generic.locale') }}</label>
                                <select class="form-control select2" id="locale" name="locale">
                                    @foreach (Voyager::getLocales() as $locale)
                                    <option value="{{ $locale }}"
                                    {{ ($locale == $selected_locale ? 'selected' : '') }}>{{ $locale }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Right Column: Default Avatar Card (Read-Only) --}}
                <div class="col-md-4">
                    <div class="avatar-locked-card">
                        <div class="avatar-locked-img-wrapper">
                            <img src="{{ asset('assets/admin-user-black.png') }}" class="avatar-locked-img" alt="Default User Avatar">
                        </div>
                        <span class="avatar-lock-badge">
                            <i class="voyager-lock"></i> Default Avatar (Locked)
                        </span>
                        <p class="avatar-locked-notice">
                            User avatars are standardized across the admin panel using the default avatar image. Editing or uploading new avatars is disabled.
                        </p>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary pull-right save">
                {{ __('voyager::generic.save') }}
            </button>
        </form>
    </div>
@stop

@section('javascript')
    <script>
        $('document').ready(function () {
            $('.toggleswitch').bootstrapToggle();
        });
    </script>
@stop