@extends('layouts.bootstrap.app')

@section('title')
    @lang('Account') • @lang('Profile')
@endsection

@section('header')
    <div class="d-flex py-3 font-semibold text-gray-800 tw-text-xl tw-space-x-2">
        <div>
            {{ __('Profile') }}
        </div>
    </div>
@endsection

@section('content')
    <div class="container">
        <x-spark-row>
            <x-slot:content>
                <form id="update_profile_form" method="POST" action="{{ route('front.account.profile') }}" enctype="multipart/form-data">
                    @csrf
                    @method('PATCH')
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label for="first_name" class="form-label required">@lang('First Name')</label>
                                <input id="first_name" type="text" placeholder="@lang('First Name')"
                                       class="form-control @error('first_name') is-invalid @enderror" name="first_name"
                                       value="{{ old('first_name') ?? auth()->user()->first_name }}" required>
                                @error('first_name')
                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                                <div class="form-text"></div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="mb-3">
                                <label for="last_name" class="form-label required">@lang('Last Name')</label>
                                <input id="last_name" type="text" placeholder="@lang('Last Name')"
                                       class="form-control @error('last_name') is-invalid @enderror" name="last_name"
                                       value="{{ old('last_name') ?? auth()->user()->last_name }}" required>
                                @error('last_name')
                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label for="email" class="form-label required">@lang('Email')</label>
                                <input id="email" type="email" placeholder="@lang('Email')"
                                       class="form-control @error('email') is-invalid @enderror" name="email"
                                       value="{{ old('email') ?? auth()->user()->email }}" required>
                                @error('email')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label for="mobile_number" class="form-label required">@lang('Mobile Number')</label>
                                <input id="mobile_number" type="mobile_number" placeholder="@lang('Mobile Number')"
                                       class="form-control @error('mobile_number') is-invalid @enderror" name="mobile_number"
                                       value="{{ old('mobile_number') ?? auth()->user()->mobile_number }}" required>
                                @error('mobile_number')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="mb-3">
                            <label for="avatar" class="form-label required">@lang('Profile Picture')</label>
                            <input class="form-control" type="file" id="avatar">
                        </div>
                    </div>
                </form>
            </x-slot:content>

            <x-slot:footer>
                <form method="POST" action="{{ route('front.account.profile.delete-current-profile-picture') }}" id="delete-current-profile-picture" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>

                <div class="panel-content border-faded border-left-0 border-right-0 border-bottom-0 d-flex flex-row">
                    <button class="btn btn-outline-danger ml-auto" id="delete-current-profile-picture-button">
                        @lang('Delete Current Profile Picture')
                    </button>
                    <button class="btn btn-primary ms-3" form="update_profile_form">
                        @lang('Update Profile')
                    </button>
                </div>
            </x-slot:footer>
        </x-spark-row>
    </div>
@endsection

@push('scripts')
    {!! JsValidator::formRequest(\App\Http\Requests\Front\Users\UpdateProfileRequest::class)
        ->view('jsvalidation::bootstrap5')
        ->selector('#update_profile_form')
        ->submitHandler('submit_form') !!}

    <script type="module">
        $(function() {
            let button = document.getElementById('delete-current-profile-picture-button')
            button.addEventListener('click', function () {
                submit_form(document.getElementById('delete-current-profile-picture'))
            })
        });
    </script>
@endpush