@extends('layouts.site')
@section('title', 'Editar Perfil '.$User->name)

@section('content')
<div class="w-full min-h-screen border flex items-center border">
    <div class="container h-full border ">
        <form method="post" action="{{ route('site.user.update',['id'=>$User->id]) }}">
            @method('PATCH')
            @csrf
            <div class="w-full flex flex-wrap  ">
                <div class="w-full flex ">
                    <div class="w-full md:w-1/2 flex items-center ">
                        <h2 class="font-bold text-titles text-2xl">Editar Perfil</h2>
                    </div>
                    <div class="w-full md:w-1/2 flex  items-center">
                        <img class="mx-auto rounded-full w-20 h-20" src="{{ $User->picture }}" alt="">
                    </div>
                </div>
                <div class="w-full flex md:space-x-4 py-6">
                    <div class="w-full  flex flex-wrap">
                        <label class="font-bold py-2 block w-full ">Nombre:</label>
                        <input class="rounded shadow w-full " name="name" type="text" value="{{ old('name', $User->name) }}" >
                        @error('name') <p class="inline-block text-red-600">{{$message}} </p> @enderror
                    </div>
                    <div class="w-full  flex flex-wrap">
                        <label class="font-bold py-2 block w-full ">Email:</label>
                        <input class="rounded shadow w-full bg-gray-200"  disabled type="text" value="{{ $User->email }}" >
                        @error('name') <p class="inline-block text-red-600">{{$message}} </p> @enderror
                    </div>
                </div>
                <div class="w-full flex md:space-x-4  py-6">
                    <div class="w-full md:w-1/2 flex flex-wrap">
                        <label class="font-bold py-2 block w-full">Apellido 1:</label>
                        <input class="rounded shadow w-full" name="surname1" type="text"   value="{{  old('surname1',$User->client->surname1) }}" >
                        @error('surname1') <p class="block text-red-600">{{$message}} </p> @enderror
                    </div>
                    <div class="w-full md:w-1/2 flex flex-wrap ">
                        <label class="font-bold py-2 block w-full">Apellido 2:</label>
                        <input  class="rounded shadow w-full" name="surname2" type="text" value="{{ old('surname2',$User->client->surname2) }}" >
                        @error('surname2') <p class="block text-red-600">{{$message}} </p> @enderror
                    </div>
                </div>

                <div class="w-full flex md:space-x-4  py-6">
                    <div class="w-full md:w-1/2 flex flex-wrap">
                        <label class="font-bold py-2  w-full ">Phone:</label>
                        <input  class="rounded shadow w-full " name="phone" type="tel" value="{{ old('phone',$User->phone) }}">
                        @error('phone') <p class="block text-red-600">{{$message}} </p> @enderror
                    </div>
                    <div class="w-full md:w-1/2 flex flex-wrap">
                        <label class="font-bold  w-full ">Birth Date:</label>
                        <input  class="rounded shadow w-full" name="birthdate" type="date" value="{{ old('birthdate',$User->birthdate) }}">
                        @error('birthdate') <p class="block text-red-600">{{$message}} </p> @enderror
                    </div>
                </div>

                <div class="w-full flex md:space-x-4  py-6">
                    <div class="w-full md:w-1/2 flex flex-wrap">
                        <label class="font-bold  w-full ">Password:</label>
                        <input  class="rounded shadow w-full" name="password" type="password">
                    </div>
                    <div class="w-full md:w-1/2 flex flex-wrap">
                        <label class="font-bold  w-full ">Confirmar Password:</label>
                        <input  class="rounded shadow w-full" name="password_confirmation" type="password">
                    </div>
                </div>
                <div class="w-full md:w-full">
                    @error('password') <p class="block text-red-600">{{$message}} </p> @enderror
                </div>

                <div class="w-full flex md:space-x-4  py-6">
                    <div class="w-full md:w-1/2 flex flex-wrap justify-center">
                       <a class="border border-titles text-titles py-2 px-6 rounded-xl"  href="{{ route('site.user.profile') }}">Cancelar</a>
                    </div>
                    <div class="w-full md:w-1/2 flex flex-wrap justify-center">
                        <button type="submit" class="bg-secondary text-white hover:bg-green-400 py-2 px-6 rounded-xl">Guardar</button>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>
@endsection