@extends('user.layouts.master')
@section('title', \App\Helpers\TranslationHelper::translate('App Settings'))

@section('crumb')
    <x-bread-crumb :breadcrumbs="[['text' => \App\Helpers\TranslationHelper::translate('App Settings')]]" :button="[]" :title="\App\Helpers\TranslationHelper::translate('App Settings')">
    </x-bread-crumb>
@endsection

@push('admin_css')

<style>
    .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* شكل الـ input الافتراضي */
.form-control {
    background-color: #45454c; /* نفس لون الكارت */
    color: #fff;              نص أبيض
    border: 1px solid #666;   /* حدود بسيطة */
    border-radius: 6px;       /* زوايا ناعمة */
    padding: 10px 12px;
}

/* Placeholder */
.form-control::placeholder {
    color: #bbb; /* رمادي فاتح */
    opacity: 1;
}

/* عند الكتابة داخل الـ input */
.form-control:focus {
    background-color: #5a5a66; /* رمادي أفتح شوية */
    color: #fff;
    border-color: #ffd559;     /* نفس لون الأيقونة الصفراء في الكارت */
    outline: none;
    box-shadow: 0 0 5px rgba(255, 213, 89, 0.5);
}

</style>

@endpush

@section('content')

<div class="container">
    <h2>{{ \App\Helpers\TranslationHelper::translate('Account info') }}</h2>

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

    <form action="{{ route('customer.settings.update') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="mb-3">
            <label for="name">{{ \App\Helpers\TranslationHelper::translate('User name') }}</label>
            <input type="text" name="name" value="{{ old('name', $setting->name) }}" class="form-control">
        </div>

        <div class="mb-3">
            <label for="email">{{ \App\Helpers\TranslationHelper::translate('Email') }}</label>
            <input type="email" name="email" value="{{ old('email', $setting->email) }}" class="form-control">
        </div>

        <div class="mb-3">
            <label for="password">{{ \App\Helpers\TranslationHelper::translate('New Password') }}</label>
            <input type="password" name="password" class="form-control">
        </div>

        <div class="mb-3">
            <label for="phone">{{ \App\Helpers\TranslationHelper::translate('Phone') }}</label>
            <input type="text" name="phone" value="{{ old('phone', $setting->phone) }}" class="form-control">
        </div>

        <div class="mb-3">
            <label for="profile_image">{{ \App\Helpers\TranslationHelper::translate('Image_profile') }}</label>
            <input type="file" name="avatar" class="form-control">
            @if($setting->avatar)
                <img src="{{ asset('storage/'.$setting->avatar) }}" alt="الصورة الحالية" width="100" class="mt-2">
            @endif
        </div>

        <button type="submit" class="btn btn-primary"> {{ \App\Helpers\TranslationHelper::translate('Save Edit') }}</button>
    </form>
</div>

@endsection

@push('admin_js')
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

@endpush