@extends('front.layout.layout')

@section('title', 'Profile')
@section('content')

<div class="container">

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

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4> {{ ucfirst($user->first_name) }} {{ ucfirst($user->last_name) }} </h4>

            <div class="d-flex justify-content-center gap-2">
                <a href="{{route('my.referals')}}" class="btn btn-success">Referal Program</a>
                <a href="{{route('my.payments')}}" class="btn btn-success">My Payments</a>
            </div>
        </div>




        <form action="{{ route('profile.udpate') }} " method="POST" class="c-form" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-4">
                    @if ($user)
                    @if ($user->avatar)
                    <img src="{{ Storage::url($user->avatar) }}" alt="" style="height:300px;">
                    @else
                    <img src="{{ asset('frontend/assets/images/default.png') }}" style="height:300px;" alt="">
                    @endif
                    @endif
                </div>
                <div class="col-md-8">
                    <div class="row ">
                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="fileds">

                                <input type="text" id="first_name" name="first_name"
                                    class=" @error('first_name') is-invalid @enderror form-control"
                                    placeholder="First Name" value="{{ $user->first_name }}">
                                @error('first_name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="fileds">

                                <input type="text" id="last_name" name="last_name"
                                    class=" @error('last_name') is-invalid @enderror form-control"
                                    placeholder="First Name" value="{{ $user->last_name }}">
                                @error('last_name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="fileds">
                                <input type="text" name="email" placeholder="Email @"
                                    class="@error('email') is-invalid @enderror form-control"
                                    value="{{ $user->email }}">
                                @error('email')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="fileds">
                                <input type="file" name="avatar" placeholder="Avatar"
                                    class="@error('avatar') is-invalid @enderror form-control">
                                @error('avatar')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="fileds">
                                <input
                                    type="tel"
                                    placeholder="Phone"
                                    name="phone"
                                    pattern="^(\+92|92|0)3[0-9]{9}$"
                                    title="Phone number must start with +92, 92, or 0 followed by 3xx and 9 digits"
                                    class="@error('phone') is-invalid @enderror form-control"
                                    value="{{$user->phone }}" required>
                                @error('phone')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="fileds">
                                @if ($user->referred_by)
                                <!-- Show the referral code as readonly and display the referrer's name -->
                                <input type="text"
                                    class="form-control"
                                    value="{{ optional(App\Models\User::find($user->referred_by))->referral_code }}"
                                    readonly>
                                <small class="text-muted">
                                    Referred by:
                                    {{ optional(App\Models\User::find($user->referred_by))->first_name }}
                                    {{ optional(App\Models\User::find($user->referred_by))->last_name }}
                                </small>
                                @else
                                <!-- Allow the user to input a referral code -->
                                <input type="text"
                                    placeholder="Enter the Referral Code"
                                    name="referral_code"
                                    class="@error('referred_by') is-invalid @enderror form-control">
                                @error('referred_by')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                                @endif
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="fileds">
                                <input type="password" name="password"
                                    class="@error('password') is-invalid @enderror form-control" id="password"
                                    placeholder="Password">
                                <i class="toggle-password fa fa-eye"></i>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-md-6">
                            <div class="fileds">
                                <input type="password" id="confirmPassword" name="password_confirmation"
                                    class="password_confirmation form-control @error('password_confirmation') is-invalid @enderror"
                                    placeholder="Confirm Password">
                                <i class="toggle-password fa fa-eye"></i>
                            </div>
                        </div>


                        <div class="col-lg-12">
                            <button class="btn-primary" type="submit"> Update Profile</button>
                        </div>

                    </div>
                </div>
            </div>

        </form>
    </div>
</div>

@endsection