@extends('layouts.main')

@section('content')

<div class="p-2 h-100">
    <!-- HEADER -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold">Patient Profile</h4>

        <button class="btn btn-primary editBtn"
            data-id="{{ $user->id }}"
            data-first_name="{{ $user->first_name }}"
            data-last_name="{{ $user->last_name }}"
            data-email="{{ $user->email }}"
            data-mobile="{{ $user->mobile_number }}"
            data-gender="{{ $user->gender }}"
            data-dob="{{ $user->date_of_birth }}"
            data-blood="{{ $user->blood_group }}"
            data-city="{{ $user->city }}"
            data-state="{{ $user->state }}"
            data-country="{{ $user->country }}"
            data-pincode="{{ $user->pincode }}"
            data-allergies="{{ $user->allergies }}"
            data-medication="{{ $user->current_medication }}"
            data-history="{{ $user->medical_history }}"
            data-bs-toggle="modal"
            data-bs-target="#editModal">
            Edit Profile
        </button>
    </div>

    <!-- PROFILE CARD -->
    <div class="card shadow border-0 rounded-4">
        <div class="card-body p-4">

            <div class="row g-4">

                <!-- COLUMN 1 -->
                <div class="col-md-4">
                    <div class="bg-light p-3 rounded-3 h-100">
                        <h6 class="fw-semibold mb-3 text-primary">Basic Info</h6>

                        <p><strong>Name:</strong> {{ $user->first_name }} </p>
                        <p><strong>Email:</strong> {{ $user->email }}</p>
                        <p><strong>Mobile:</strong> {{ $user->mobile_number }}</p>
                        <p><strong>Gender:</strong> {{ ucfirst($user->gender) }}</p>
                    </div>
                </div>

                <!-- COLUMN 2 -->
                <div class="col-md-4">
                    <div class="bg-light p-3 rounded-3 h-100">
                        <h6 class="fw-semibold mb-3 text-success">Personal Info</h6>

                        <p><strong>DOB:</strong> {{ $user->date_of_birth }}</p>
                        <p><strong>Blood Group:</strong> {{ $user->blood_group }}</p>
                        <p><strong>City:</strong> {{ $user->city }}</p>
                        <p><strong>State:</strong> {{ $user->state }}</p>
                    </div>
                </div>

                <!-- COLUMN 3 -->
                <div class="col-md-4">
                    <div class="bg-light p-3 rounded-3 h-100">
                        <h6 class="fw-semibold mb-3 text-danger">Location</h6>

                        <p><strong>Country:</strong> {{ $user->country }}</p>
                        <p><strong>Pincode:</strong> {{ $user->pincode }}</p>
                    </div>
                </div>

                <!-- FULL WIDTH -->
                <div class="col-md-12">
                    <div class="bg-light p-3 rounded-3">
                        <h6 class="fw-semibold mb-3 text-dark">Medical Details</h6>

                        <p><strong>Allergies:</strong> {{ $user->allergies }}</p>
                        <p><strong>Medication:</strong> {{ $user->current_medication }}</p>
                        <p><strong>Medical History:</strong> {{ $user->medical_history }}</p>
                    </div>
                </div>

            </div>

        </div>
    </div>

</div>

<!-- ================= MODAL ================= -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        
        <form method="POST" id="editForm">
            @csrf
            @method('PUT')

            <div class="modal-content rounded-4 shadow">

                <!-- HEADER -->
                <div class="modal-header border-0 pb-0">
                    <h5 class="fw-bold">Update Profile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- BODY -->
                <div class="modal-body pt-2">

                    <!-- BASIC INFO -->
                    <h6 class="text-primary fw-semibold border-bottom pb-1">Basic Info</h6>
                    <div class="row g-3 mb-4">

                        <div class="col-md-4">
                            <label class="form-label">First Name</label>
                            <input type="text" name="first_name" id="first_name" class="form-control" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Last Name</label>
                            <input type="text" name="last_name" id="last_name" class="form-control" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" id="email" class="form-control" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Mobile</label>
                            <input type="text" name="mobile_number" id="mobile" class="form-control">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Password</label>
                            <input type="password" name="password" class="form-control" placeholder="Leave blank if not changing">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Gender</label>
                            <select name="gender" id="gender" class="form-select">
                                <option value="">Select Gender</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                                <option value="other">Other</option>
                            </select>
                        </div>

                    </div>

                    <!-- PERSONAL INFO -->
                    <h6 class="text-success fw-semibold border-bottom pb-1">Personal Info</h6>
                    <div class="row g-3 mb-4">

                        <div class="col-md-4">
                            <label class="form-label">Date of Birth</label>
                            <input type="date" name="date_of_birth" id="dob" class="form-control">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Blood Group</label>
                            <input type="text" name="blood_group" id="blood" class="form-control">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">City</label>
                            <input type="text" name="city" id="city" class="form-control">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">State</label>
                            <input type="text" name="state" id="state" class="form-control">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Country</label>
                            <input type="text" name="country" id="country" class="form-control">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Pincode</label>
                            <input type="text" name="pincode" id="pincode" class="form-control">
                        </div>

                    </div>

                    <!-- MEDICAL INFO -->
                    <h6 class="text-danger fw-semibold border-bottom pb-1">Medical Info</h6>
                    <div class="row g-3">

                        <div class="col-md-6">
                            <label class="form-label">Allergies</label>
                            <textarea name="allergies" id="allergies" class="form-control" rows="2"></textarea>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Current Medication</label>
                            <textarea name="current_medication" id="medication" class="form-control" rows="2"></textarea>
                        </div>

                        <div class="col-md-12">
                            <label class="form-label">Medical History</label>
                            <textarea name="medical_history" id="history" class="form-control" rows="2"></textarea>
                        </div>

                    </div>

                </div>

                <!-- FOOTER -->
                <div class="modal-footer border-0">
                    <button type="submit" class="btn btn-success w-100 fw-semibold">
                        Update Profile
                    </button>
                </div>

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


<!-- ================= SCRIPT ================= -->
<script>
document.querySelector('.editBtn').addEventListener('click', function () {

    let id = this.dataset.id;

    document.getElementById('editForm').action = "/patient/update/" + id;

    document.getElementById('first_name').value = this.dataset.first_name;
    document.getElementById('last_name').value = this.dataset.last_name;
    document.getElementById('email').value = this.dataset.email;
    document.getElementById('mobile').value = this.dataset.mobile;
    document.getElementById('gender').value = this.dataset.gender;
    document.getElementById('dob').value = this.dataset.dob;
    document.getElementById('blood').value = this.dataset.blood;
    document.getElementById('city').value = this.dataset.city;
    document.getElementById('state').value = this.dataset.state;
    document.getElementById('country').value = this.dataset.country;
    document.getElementById('pincode').value = this.dataset.pincode;
    document.getElementById('allergies').value = this.dataset.allergies;
    document.getElementById('medication').value = this.dataset.medication;
    document.getElementById('history').value = this.dataset.history;
});
</script>

@endsection