@extends('restaurant.layouts.app')

@section('title', __('restaurant.profile'))

@section('styles')
    <style>
        .sm-avatar-row { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
        .sm-avatar-preview {
            width: 96px; height: 96px; border-radius: 50%;
            object-fit: cover; border: 2px solid #C3AD66;
        }
    </style>
@endsection

@section('content')
    <div class="sm-page">
        <div class="sm-card">
            <h3>{{ __('restaurant.profile') }}</h3>
            <p class="sm-lead">{{ __('restaurant.profile_intro') }}</p>

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

            @if($errors->any())
                <div class="sm-alert-error">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

                <div class="sm-avatar-row">
                    <img id="sm-avatar-preview"
                         class="sm-avatar-preview"
                         src="{{ $user->photo ? asset('storage/' . $user->photo) : asset('vendor/images/avatar/user-2.svg') }}"
                         alt="{{ $user->name }}">

                    <div class="sm-field" style="flex:1;">
                        <label for="photo">{{ __('restaurant.photo') }}</label>
                        <input type="file" id="photo" name="photo"
                               accept="image/*"
                               data-image-convert
                               data-max-side="1600">
                        <span class="sm-hint">{{ __('restaurant.photo_hint') }}</span>
                        <span class="sm-hint" id="sm-photo-converted" style="display:none;color:#2c6b3f;"></span>
                    </div>
                </div>

                <div class="sm-grid">
                    <div class="sm-field">
                        <label for="first_name">{{ __('restaurant.first_name') }}</label>
                        <input type="text" id="first_name" name="first_name" value="{{ old('first_name', $user->first_name) }}">
                    </div>

                    <div class="sm-field">
                        <label for="last_name">{{ __('restaurant.last_name') }}</label>
                        <input type="text" id="last_name" name="last_name" value="{{ old('last_name', $user->last_name) }}">
                    </div>

                    <div class="sm-field">
                        <label for="email">{{ __('restaurant.email') }}</label>
                        <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" required>
                    </div>

                    <div class="sm-field">
                        <label for="phone">{{ __('restaurant.phone') }}</label>
                        <input type="tel" id="phone" name="phone" value="{{ old('phone', $user->phone) }}">
                    </div>

                    <div class="sm-field full">
                        <label for="address">{{ __('restaurant.address') }}</label>
                        <input type="text" id="address" name="address" value="{{ old('address', $user->address) }}">
                    </div>

                    <div class="sm-field">
                        <label for="postal_code">{{ __('restaurant.postal_code') }}</label>
                        <input type="text" id="postal_code" name="postal_code" value="{{ old('postal_code', $user->postal_code) }}">
                    </div>

                    <div class="sm-field">
                        <label for="city">{{ __('restaurant.city') }}</label>
                        <input type="text" id="city" name="city" value="{{ old('city', $user->city) }}">
                    </div>

                    <div class="sm-field">
                        <label for="country">{{ __('restaurant.country') }}</label>
                        <input type="text" id="country" name="country" value="{{ old('country', $user->country) }}">
                    </div>
                </div>

                <div class="sm-actions">
                    <button class="rts-btn btn-primary">{{ __('restaurant.save') }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/image-upload-converter.js') }}"></script>

    <script>
        const smPhotoInput = document.getElementById('photo');
        const smConverted = document.getElementById('sm-photo-converted');

        smPhotoInput?.addEventListener('image-converted', function (e) {
            const mo = n => (n / 1048576).toFixed(1);

            smConverted.textContent = @json(__('restaurant.photo_optimised'))
                .replace(':from', mo(e.detail.from)).replace(':to', mo(e.detail.to));
            smConverted.style.display = 'block';

            smPreview(smPhotoInput.files[0]);
        });

        function smPreview(file) {
            if (file) document.getElementById('sm-avatar-preview').src = URL.createObjectURL(file);
        }

        smPhotoInput?.addEventListener('change', function (e) {
            smConverted.style.display = 'none';
            smPreview(e.target.files[0]);
        });
    </script>
@endsection