@extends('frontend.layouts.app')

@section('content')
    <div class="dashboard-section py-5">
        <div class="container-fluid">

            <div class="row">

                <!-- Sidebar -->
                <div class="col-lg-3 col-xl-2 mb-4">

                    <button class="dashboard-menu-btn d-lg-none" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#dashboardSidebar">

                        <i class="fa-solid fa-bars"></i>
                        <span>Menu</span>

                    </button>

                    <div class="d-none d-lg-block">
                        @include('frontend.dashboard.sidebar')
                    </div>

                </div>

                <!-- Profile Content -->
                <div class="col-lg-9 col-xl-10">

                    <div class="card border-0 shadow-sm rounded-4">

                        <div class="card-body p-4">

                            <h3 class="fw-bold mb-4">
                                My Profile
                            </h3>

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

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

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

                                @csrf

                                <div class="row">

                                    <!-- Left -->
                                    <div class="col-lg-4 text-center">

                                        <img src="{{ auth()->user()->avatar
                                            ? asset('storage/' . auth()->user()->avatar)
                                            : asset('public/frontend/assets/img/instructors/avatar.png') }}"
                                            class="rounded-circle border shadow" width="150" height="150"
                                            style="object-fit:cover;">

                                        <div class="mt-3">

                                            <input type="file" class="form-control" name="avatar">

                                        </div>

                                    </div>

                                    <!-- Right -->
                                    <div class="col-lg-8">

                                        <div class="row">

                                            <div class="col-md-6 mb-3">

                                                <label class="form-label">
                                                    Full Name
                                                </label>

                                                <input type="text" name="name" class="form-control"
                                                    value="{{ auth()->user()->name }}">

                                            </div>

                                            <div class="col-md-6 mb-3">

                                                <label class="form-label">
                                                    Email
                                                </label>

                                                <input type="email" class="form-control"
                                                    value="{{ auth()->user()->email }}" readonly>

                                            </div>

                                            <div class="col-md-6 mb-3">

                                                <label class="form-label">
                                                    Mobile
                                                </label>

                                                {{-- <input type="date" name="dob" class="form-control"
                                                    value="{{ optional(auth()->user()->dob)->format('Y-m-d') }}"
                                                    max="{{ now()->subYears(18)->format('Y-m-d') }}"> --}}
                                                <input type="text" name="phone" class="form-control"
                                                    value="{{ auth()->user()->phone }}" maxlength="10" inputmode="numeric"
                                                    pattern="[0-9]{10}"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)"
                                                    placeholder="Enter 10 digit mobile number">
                                            </div>

                                            <div class="col-md-6 mb-3">

                                                <label class="form-label">
                                                    Gender
                                                </label>

                                                <select name="gender" class="form-select">

                                                    <option value="">Select</option>

                                                    <option value="Male" @selected(auth()->user()->gender == 'Male')>
                                                        Male
                                                    </option>

                                                    <option value="Female" @selected(auth()->user()->gender == 'Female')>
                                                        Female
                                                    </option>

                                                </select>

                                            </div>

                                            <div class="col-md-6 mb-3">

                                                <label class="form-label">
                                                    Date of Birth
                                                </label>

                                                <input type="date" name="dob" class="form-control"
                                                    value="{{ optional(auth()->user()->dob)->format('Y-m-d') }}"
                                                    max="{{ now()->subYears(18)->format('Y-m-d') }}">

                                            </div>

                                            <div class="col-md-6 mb-3">

                                                <label class="form-label">
                                                    City
                                                </label>

                                                <input type="text" name="city" class="form-control"
                                                    value="{{ auth()->user()->city }}">

                                            </div>

                                            <div class="col-md-6 mb-3">

                                                <label class="form-label">
                                                    State
                                                </label>

                                                <input type="text" name="state" class="form-control"
                                                    value="{{ auth()->user()->state }}">

                                            </div>

                                            <div class="col-md-6 mb-3">

                                                <label class="form-label">
                                                    Pincode
                                                </label>

                                                <input type="text" name="pincode" class="form-control"
                                                    value="{{ auth()->user()->pincode }}" maxlength="6"
                                                    inputmode="numeric" pattern="[0-9]{6}"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)"
                                                    placeholder="Enter 6 digit pincode">

                                            </div>

                                            <div class="col-12 mb-3">
                                                <label class="form-label">
                                                    Address
                                                </label>

                                                <textarea name="address" class="form-control" rows="3">{{ auth()->user()->address }}</textarea>
                                            </div>

                                        </div>

                                        <button class="btn btn-primary px-4">

                                            <i class="fa-solid fa-floppy-disk me-2"></i>

                                            Save Changes

                                        </button>

                                    </div>

                                </div>

                            </form>

                        </div>

                    </div>

                    <div class="card border-0 shadow-sm rounded-4 mt-4">
                        <div class="card-body p-4">
                            <h3 class="fw-bold mb-4">
                                Change Password
                            </h3>
                            <form action="{{ route('dashboard.profile.password') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Current Password</label>
                                        <input type="password" name="current_password" class="form-control" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">New Password</label>
                                        <input type="password" name="password" class="form-control" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Confirm New Password</label>
                                        <input type="password" name="password_confirmation" class="form-control"
                                            required>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-warning px-4 text-white">
                                    <i class="fa-solid fa-key me-2"></i> Update Password
                                </button>
                            </form>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>

    <!-- Mobile Sidebar -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="dashboardSidebar">

        <div class="offcanvas-header">

            <h5>Dashboard Menu</h5>

            <button class="btn-close" data-bs-dismiss="offcanvas"></button>

        </div>

        <div class="offcanvas-body">

            @include('frontend.dashboard.sidebar')

        </div>

    </div>
@endsection