@extends('layouts.user-dashboard-layout')
@section('user-dashboard-content')
<style>
      .section-title {
        font-weight: 600;
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    .section-divider {
        margin: 1.5rem 0;
        border-top: 1px solid #ddd;
    }
    .form-control:disabled {
        background-color: #f8f9fa;
    }
</style>
    <div class="container">
        <div class="container my-3">
            <div class="mb-4">
                <h5 class="section-title"><i class="fa-regular fa-pen-to-square"></i> Account Details</h5>
                <hr>

                    <form class="my-5" action="{{route('user.update-profile')}}" method="POST"
                          enctype="multipart/form-data">
                        @csrf
                    <div class="row g-3">
                        <div class="col-md-6">

                            <input type="text" class="form-control" name="first_name"
                                   value="{{Auth::user()->first_name}}"placeholder="Enter First Name">
                        </div>
                        <div class="col-md-6">

                            <input type="text" class="form-control" name="last_name"
                                   value="{{Auth::user()->last_name}}"placeholder="Enter Last Name">
                        </div>
                        <div class="col-md-6">
                            <input type="email" class="form-control" name="email"
                                   value="{{Auth::user()->email }}"readonly>
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control form__field" name="phone_number"
                                   value="{{Auth::user()->phone_number}}"placeholder="Enter Phone Number"oninput="this.value = this.value.replace(/[^0-9]/g, '')">                        </div>
                        <div class="col-md-4">
                            <select class="form-select" name="gender">
                                <option value="Male" {{ Auth::check() && Auth::user()->gender === 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ Auth::check() && Auth::user()->gender === 'Female' ? 'selected' : '' }}>Female</option>
                                <option value="Other" {{ Auth::check() && Auth::user()->gender === 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>
                        {{-- 🔹 Day Dropdown --}}
                        <div class="col-md-2">
                            <select class="form-select" name="day">
                                <option value="" disabled {{ !Auth::check() ? 'selected' : '' }}>Day</option>
                                @for ($d = 1; $d <= 31; $d++)
                                    <option value="{{ $d }}"
                                        {{ Auth::check() && Auth::user()->day == $d ? 'selected' : '' }}>
                                        {{ $d }}
                                    </option>
                                @endfor
                            </select>
                        </div>

                        {{-- 🔹 Month Dropdown --}}
                        <div class="col-md-3">
                            <select class="form-select" name="month">
                                @php
                                    $months = [
                                        'January', 'February', 'March', 'April', 'May', 'June',
                                        'July', 'August', 'September', 'October', 'November', 'December'
                                    ];
                                @endphp
                                <option value="" disabled {{ !Auth::check() ? 'selected' : '' }}>Month</option>
                                @foreach ($months as $month)
                                    <option value="{{ $month }}"
                                        {{ Auth::check() && Auth::user()->month === $month ? 'selected' : '' }}>
                                        {{ $month }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- 🔹 Year Dropdown --}}
                        <div class="col-md-3">
                            <select class="form-select" name="year">
                                <option value="" disabled {{ !Auth::check() ? 'selected' : '' }}>Year</option>
                                @for ($y = now()->year; $y >= 1900; $y--)
                                    <option value="{{ $y }}"
                                        {{ Auth::check() && Auth::user()->year == $y ? 'selected' : '' }}>
                                        {{ $y }}
                                    </option>
                                @endfor
                            </select>
                        </div>


                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="userProfileImageInput">Choose Profile:</label>
                                <input type="file" class="form-control form__field visually-hidden" name="user_profile"
                                       id="userProfileImageInput"accept="image/*">
                                <label for="userProfileImageInput" class="file-input-label form__field form-control">
                                    <i class="fas fa-camera"></i> Choose file
                                </label>

                            </div>
                        </div>

                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn button-blue">Update</button>
                    </div>
                </form>
            </div>

            <div class="section-divider"></div>


            <div class="mb-4">
                <h5 class="section-title"><i class="fa-solid fa-house"></i> Delivery Address</h5>
                <p class="text-muted">For ease of use, you can now quickly hide and unhide your delivery addresses from
                    showing on the delivery page.</p>

                <div class="table-responsive">
                    <table class="table table-bordered align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Name</th>
                                <th>Address</th>
                                <th class="text-center">Hide</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>abc abc</td>
                                <td>oiupiupioipi, 3253</td>
                                <td class="text-center">
                                    <i class="fa-solid fa-eye text-success"></i>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="section-divider"></div>


            <div>
                <h5 class="section-title"><i class="fa-regular fa-hospital"></i> GP Details</h5>
                <form>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="gpCheck">
                        <label class="form-check-label" for="gpCheck">
                            Inform my GP of my Treatments
                        </label>
                    </div>
                    <button class="btn button-blue">Update GP Details</button>
                </form>
            </div>

        </div>
    </div>
@endsection
@section('script')
    <script>

        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

        const imageInput = document.getElementById('firstimageInput');
        imageInput.addEventListener('change', function () {
            showImagePreview(this, 'firstimagePreview');
        });
    </script>
@endsection