@extends('layouts.main')

@section('content')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<style>
    body { background:#f4f6f9; }

    .main-card {
        border-radius:16px;
        box-shadow:0 8px 25px rgba(0,0,0,0.05);
        border:none;
    }

    .header-bar {
        background:#0d6efd;
        color:#fff;
        padding:12px 20px;
        border-radius:16px 16px 0 0;
    }

    .form-control, .form-select {
        height:34px;
        font-size:13px;
        border-radius:8px;
        padding:4px 8px;
    }

    textarea.form-control {
        height:60px;
    }

    label {
        font-size:12px;
        margin-bottom:2px;
        font-weight:500;
    }

    .profile-img {
        width:80px;
        height:80px;
        border-radius:50%;
        object-fit:cover;
        border:2px solid #0d6efd;
    }
</style>

<div class="container py-3">

    <div class="card main-card">

        <!-- HEADER -->
        <div class="header-bar d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class="bi bi-pencil"></i> Edit Patient</h6>

            <a href="{{ route('profile') }}" class="btn btn-light btn-sm">
                <i class="bi bi-arrow-left"></i>
            </a>
        </div>

        <div class="card-body">

            <form action="{{ route('patient.update', $patient->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="row g-2">

                    <!-- IMAGE -->
                    <div class="col-md-2 text-center">
                        <img id="previewImg"
                             src="{{ $patient->profile_photo ? asset($patient->profile_photo) : asset('user.png') }}"
                             class="profile-img mb-1">
                        <input type="file" name="profile_photo" class="form-control"
                               onchange="previewImage(event)">
                    </div>

                    <!-- ALL FIELDS -->
                    <div class="col-md-10">
                        <div class="row g-2">

                            <div class="col-md-3">
                                <label>First Name</label>
                                <input type="text" name="first_name" class="form-control" value="{{ $patient->first_name }}">
                            </div>

                            <div class="col-md-3">
                                <label>Last Name</label>
                                <input type="text" name="last_name" class="form-control" value="{{ $patient->last_name }}">
                            </div>

                            <div class="col-md-3">
                                <label>Email</label>
                                <input type="email" name="email" class="form-control" value="{{ $patient->email }}">
                            </div>

                            <div class="col-md-3">
                                <label>Mobile</label>
                                <input type="text" name="mobile" class="form-control" value="{{ $patient->mobile }}">
                            </div>

                            <div class="col-md-3">
                                <label>Password</label>
                                <input type="password" name="password" class="form-control">
                            </div>

                            <div class="col-md-3">
                                <label>Gender</label>
                                <select name="gender" class="form-select">
                                    <option value="">Select</option>
                                    <option value="Male" {{ $patient->gender=='Male'?'selected':'' }}>Male</option>
                                    <option value="Female" {{ $patient->gender=='Female'?'selected':'' }}>Female</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label>DOB</label>
                                <input type="date" name="date_of_birth" class="form-control" value="{{ $patient->date_of_birth }}">
                            </div>

                            <div class="col-md-3">
                                    <select name="blood_group" class="form-select form-select-sm">
                                        <option value="">Blood Group</option>
                                        <option value="A+" {{ $patient->blood_group=='A+'?'selected':'' }}>A+</option>
                                        <option value="A-" {{ $patient->blood_group=='A-'?'selected':'' }}>A-</option>
                                        <option value="B+" {{ $patient->blood_group=='B+'?'selected':'' }}>B+</option>
                                        <option value="B-" {{ $patient->blood_group=='B-'?'selected':'' }}>B-</option>
                                        <option value="AB+" {{ $patient->blood_group=='AB+'?'selected':'' }}>AB+</option>
                                        <option value="AB-" {{ $patient->blood_group=='AB-'?'selected':'' }}>AB-</option>
                                        <option value="O+" {{ $patient->blood_group=='O+'?'selected':'' }}>O+</option>
                                        <option value="O-" {{ $patient->blood_group=='O-'?'selected':'' }}>O-</option>
                                    </select>
                                </div>

                            <div class="col-md-4">
                                <label>Address</label>
                                <textarea name="address" class="form-control">{{ $patient->address }}</textarea>
                            </div>

                            <div class="col-md-2">
                                <label>City</label>
                                <input type="text" name="city" class="form-control" value="{{ $patient->city }}">
                            </div>

                            <div class="col-md-2">
                                <label>State</label>
                                <input type="text" name="state" class="form-control" value="{{ $patient->state }}">
                            </div>

                            <div class="col-md-2">
                                <label>Country</label>
                                <input type="text" name="country" class="form-control" value="{{ $patient->country }}">
                            </div>

                            <div class="col-md-2">
                                <label>Pincode</label>
                                <input type="text" name="pincode" class="form-control" value="{{ $patient->pincode }}">
                            </div>

                            <div class="col-md-4">
                                <label>Allergies</label>
                                <textarea name="allergies" class="form-control">{{ $patient->allergies }}</textarea>
                            </div>

                            <div class="col-md-4">
                                <label>Medication</label>
                                <textarea name="current_medication" class="form-control">{{ $patient->current_medication }}</textarea>
                            </div>

                            <div class="col-md-4">
                                <label>History</label>
                                <textarea name="medical_history" class="form-control">{{ $patient->medical_history }}</textarea>
                            </div>

                        </div>
                    </div>

                </div>

                <!-- SUBMIT -->
                <div class="text-end mt-3">
                    <button class="btn btn-success btn-sm px-3">
                        <i class="bi bi-check"></i> Update
                    </button>
                </div>

            </form>

        </div>

    </div>

</div>

<script>
function previewImage(event) {
    let reader = new FileReader();
    reader.onload = function(){
        document.getElementById('previewImg').src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
}
</script>

@endsection