@extends('Admin.layout')
@section('content')

<!-- Header -->
<div class="d-flex align-items-center mb-4">
    <a href="{{ route('profile') }}" class="btn btn-white shadow-sm  me-3 p-2 d-inline-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M15 6l-6 6l6 6" />
        </svg>
    </a>
    <h5 class="mb-0 fw-bold">Edit Profile</h5>
</div>

<div class="card border-0 shadow-sm p-4 p-md-5">

    <form action="{{ route('update_profile') }}" method="POST" enctype="multipart/form-data" id="profileForm">
        @csrf

        <div class="row g-4">

            <div class="col-lg-3 col-md-4">
                <div class="card border-0 shadow-sm text-center py-4">
                    <div class="card-body p-0">

                        <div class="position-relative d-inline-block mb-2" style="width: 100px; height: 100px;">
                            <img id="profileImagePreview" 
                                src="{{ $user->image ? asset('storage/' . $user->image) : asset('assets/images/user.png') }}"
                                class="rounded-circle border border-2 border-light shadow-sm w-100 h-100" 
                                style="object-fit: cover;"
                                alt="Profile Image">

                            <label for="image" class="position-absolute bottom-0 end-0 bg-primary text-white rounded-circle d-flex align-items-center justify-content-center shadow-sm border border-2 border-white" style="width: 32px; height: 32px; cursor: pointer;" title="Change Photo">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M12 20h9"></path>
                                    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                </svg>
                            </label>

                            <input type="file" id="image" name="image" class="d-none @error('image') is-invalid @enderror" accept="image/*" onchange="previewSelectedImage(this)">
                        </div>

                        @error('image')
                            <div class="text-danger small mt-1 mb-2">{{ $message }}</div>
                        @enderror

                        <h5 class="fw-semibold mb-2">{{ $user->name ?? 'N/A' }}</h5>

                        <div>
                            <span class="badge {{ $user->is_active ? 'bg-warning' : 'bg-danger' }} text-white mb-2 px-3 py-2">
                                {{ $user->is_active ? 'Active Member' : 'Inactive Member' }}
                            </span>
                        </div>

                        <div>
                            <span class="badge bg-warning bg-opacity-10 text-warning px-3 py-2 fw-medium">
                                User ID : {{ $user->admin_id }}
                            </span>
                        </div>

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

            <div class="col-lg-9 col-md-8">
                <div class="row g-3">

                    <div class="col-md-6">
                        <label for="name" class="form-label text-secondary fw-medium">Name</label>
                        <input type="text" id="name" name="name" 
                            class="form-control @error('name') is-invalid border-danger @enderror" 
                            value="{{ old('name', $user->name) }}">
                        @error('name')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="admin_id" class="form-label text-secondary fw-medium">Admin ID</label>
                        <input type="text" id="admin_id" class="form-control bg-light" 
                            value="{{ $user->admin_id ?? 'N/A' }}" readonly>
                    </div>

                    <div class="col-md-6">
                        <label for="mobile_number" class="form-label text-secondary fw-medium">Mobile Number</label>
                        <input type="text" id="mobile_number" name="mobile_number" 
                            class="form-control @error('mobile_number') is-invalid border-danger @enderror" 
                            value="{{ old('mobile_number', $user->mobile_number) }}">
                        @error('mobile_number')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="email" class="form-label text-secondary fw-medium">Email ID</label>
                        <input type="email" id="email" name="email" 
                            class="form-control @error('email') is-invalid border-danger @enderror" 
                            value="{{ old('email', $user->email) }}">
                        @error('email')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="date_of_birth" class="form-label text-secondary fw-medium">Date-of-Birth</label>
                        <input type="date" id="date_of_birth" name="date_of_birth" 
                            class="form-control @error('date_of_birth') is-invalid border-danger @enderror" 
                            value="{{ old('date_of_birth', $user->date_of_birth) }}">
                        @error('date_of_birth')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="gender" class="form-label text-secondary fw-medium">Gender</label>
                        <select id="gender" name="gender" class="form-select @error('gender') is-invalid border-danger @enderror">
                            <option value="Male" {{ old('gender', $user->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ old('gender', $user->gender) == 'Female' ? 'selected' : '' }}>Female</option>
                            <option value="Other" {{ old('gender', $user->gender) == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('gender')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                </div>
            </div>

        </div>

        <div class="row g-3 mt-2">

            <div class="col-md-6">
                <label for="country" class="form-label text-secondary fw-medium">Country</label>
                <select id="country" name="country" class="form-select @error('country') is-invalid border-danger @enderror">
                    <option value="India" {{ old('country', $user->country) == 'India' ? 'selected' : '' }}>India</option>
                    <option value="Other" {{ old('country', $user->country) == 'Other' ? 'selected' : '' }}>Other</option>
                </select>
                @error('country')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6">
                <label for="state" class="form-label text-secondary fw-medium">State</label>
                <input type="text" id="state" name="state" 
                    class="form-control @error('state') is-invalid border-danger @enderror" 
                    value="{{ old('state', $user->state) }}">
                @error('state')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6">
                <label for="address" class="form-label text-secondary fw-medium">Address</label>
                <textarea id="address" name="address" 
                    class="form-control @error('address') is-invalid border-danger @enderror" 
                    rows="4">{{ old('address', $user->address) }}</textarea>
                @error('address')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6">
                <div class="row g-3">
                    <div class="col-12">
                        <label for="pincode" class="form-label text-secondary fw-medium">Pincode</label>
                        <input type="text" id="pincode" name="pincode" 
                            class="form-control @error('pincode') is-invalid border-danger @enderror" 
                            value="{{ old('pincode', $user->pincode) }}">
                        @error('pincode')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12">
                        <label for="is_active" class="form-label text-secondary fw-medium">Account Status</label>
                        <select id="is_active" name="is_active" class="form-select bg-light @error('is_active') is-invalid border-danger @enderror">
                            <option value="1" {{ old('is_active', $user->is_active) == 1 ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ old('is_active', $user->is_active) == 0 ? 'selected' : '' }}>Inactive</option>
                        </select>
                        @error('is_active')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

        </div>

        <div class="d-flex justify-content-center align-items-center mt-5 gap-3">
            <a href="{{ route('profile') }}" class="btn btn-secondary px-4">Cancel</a>
<button type="submit" id="submitBtn" class="btn btn-primary px-4">
        <span id="btnSpinner" class="spinner-border spinner-border-sm d-none me-2" role="status" aria-hidden="true"></span>
        <span id="btnText">Update</span>
    </button>
        </div>

    </form>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const profileForm = document.getElementById('profileForm'); 
        const submitBtn = document.getElementById('submitBtn');
        const btnText = document.getElementById('btnText');
        const btnSpinner = document.getElementById('btnSpinner');

        if (profileForm) {
            profileForm.addEventListener('submit', function () {
                submitBtn.disabled = true;

                btnSpinner.classList.remove('d-none');
                btnText.textContent = 'Processing...';
            });
        }
    });
</script>

<script>
    function previewSelectedImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('profileImagePreview').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

@endsection