@extends('layouts.app')

@section('content')

<div class="container-fluid" id="container-wrapper">

    <div class="row mb-3">
        <div class="col-lg-10 mx-auto">

            <div class="card mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">My Profile</h6>
                </div>

                <div class="card-body">

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

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

                    {{-- Profile Display --}}
                    <div class="text-center mb-4">
                        @if($profile && $profile->image)
                            <img src="{{ asset('storage/'.$profile->image) }}"
                                 class="rounded-circle shadow mb-3"
                                 width="140"
                                 height="140"
                                 style="object-fit: cover;">
                        @else
                            <img src="{{ asset('template/img/boy.png') }}"
                                 class="rounded-circle shadow mb-3"
                                 width="140"
                                 height="140"
                                 style="object-fit: cover;">
                        @endif

                        <h5 class="font-weight-bold mb-1">
                            {{ Auth::user()->name }}
                        </h5>

                        <p class="text-muted mb-1">
                            {{ Auth::user()->email }}
                        </p>

                        @if($profile && $profile->bio)
                            <p class="text-muted mt-2">
                                {{ $profile->bio }}
                            </p>
                        @endif
                    </div>

                    <hr>

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

                        <div class="form-group">
                            <label>Change Profile Image</label>
                            <input type="file" name="image" class="form-control">
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Phone</label>
                                    <input type="text"
                                           name="phone"
                                           class="form-control"
                                           value="{{ old('phone', $profile->phone ?? '') }}"
                                           placeholder="Enter phone number">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Sex</label>
                                    <select name="sex" class="form-control">
                                        <option value="">Choose sex</option>

                                        <option value="male"
                                            {{ old('sex', $profile->sex ?? '') == 'male' ? 'selected' : '' }}>
                                            Male
                                        </option>

                                        <option value="female"
                                            {{ old('sex', $profile->sex ?? '') == 'female' ? 'selected' : '' }}>
                                            Female
                                        </option>

                                        <option value="other"
                                            {{ old('sex', $profile->sex ?? '') == 'other' ? 'selected' : '' }}>
                                            Other
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Address</label>
                            <textarea name="address"
                                      class="form-control"
                                      rows="3"
                                      placeholder="Enter address">{{ old('address', $profile->address ?? '') }}</textarea>
                        </div>

                        <div class="form-group">
                            <label>Bio</label>
                            <textarea name="bio"
                                      class="form-control"
                                      rows="5"
                                      placeholder="Write something about yourself">{{ old('bio', $profile->bio ?? '') }}</textarea>
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <div class="text-muted">
                                @if($profile)
                                    Last updated: {{ $profile->updated_at->format('d M Y, h:i A') }}
                                @endif
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Save Profile
                            </button>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>

</div>

@endsection