@extends('layouts.app')
@section('title', 'Edit User')
@section('page-icon', 'user-pen')

@section('content')
    <div class="container-fluid admin-form-page py-4 pb-0">

        {{-- Page Header --}}
        <div class="d-flex flex-wrap align-items-center gap-3 mb-4">
            <div>
                <h4 class="fw-bold mb-0 text-dark" style="letter-spacing: -0.3px;">
                    Update User Details
                </h4>
            </div>
        </div>

        {{-- Error Alerts --}}
        @if ($errors->any())
            <div class="alert alert-danger shadow-sm border-0 rounded-3 mb-4">
                <div class="d-flex align-items-start">
                    <i class="fas fa-exclamation-circle me-2 mt-1"></i>
                    <div>
                        <strong>Please fix the following errors:</strong>
                        <ul class="mb-0 ps-3 mt-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        {{-- Main Card --}}
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden">


            <div class="card-body p-4 p-md-5">
                <form action="{{ route('users.update', $user->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    {{-- Personal Information Section --}}
                    <div class="row g-4">

                        {{-- Full Name --}}
                        <div class="col-md-6">
                            <label for="name" class="form-label fw-semibold"><i class="fas fa-user me-1"></i>Full Name <span class="text-danger">*</span></label>
                            <input type="text"
                                   name="name"
                                   class="form-control @error('name') is-invalid @enderror"
                                   id="name"
                                   value="{{ old('name', $user->name) }}"
                                   placeholder="John Doe"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Phone Number --}}
                        <div class="col-md-6">
                            <label for="phone" class="form-label fw-semibold"><i class="fas fa-phone me-1"></i>Phone Number</label>
                            <input type="text"
                                   name="phone"
                                   class="form-control @error('phone') is-invalid @enderror"
                                   id="phone"
                                   value="{{ old('phone', $user->phone) }}"
                                   placeholder="+91 98765 43210">
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Email --}}
                        <div class="col-md-6">
                            <label for="email" class="form-label fw-semibold"><i class="fas fa-envelope me-1"></i>Email Address</label>
                            <input type="email"
                                   name="email"
                                   class="form-control @error('email') is-invalid @enderror"
                                   id="email"
                                   value="{{ old('email', $user->email) }}"
                                   placeholder="user@example.com">
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Gender --}}
                        <div class="col-md-6">
                            <label for="gender" class="form-label fw-semibold"><i class="fas fa-venus-mars me-1"></i>Gender</label>
                            <select name="gender" class="form-select @error('gender') is-invalid @enderror" id="gender">
                                <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="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Date of Birth --}}
                        <div class="col-md-6">
                            <label for="dob" class="form-label fw-semibold"><i class="fas fa-calendar-alt me-1"></i>Date of Birth</label>
                            <input type="date"
                                   name="dob"
                                   class="form-control @error('dob') is-invalid @enderror"
                                   id="dob"
                                   value="{{ old('dob', $user->dob) }}">
                            @error('dob')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Address --}}
                        <div class="col-12">
                            <label for="address" class="form-label fw-semibold"><i class="fas fa-home me-1"></i>Address</label>
                            <textarea name="address"
                                      class="form-control @error('address') is-invalid @enderror"
                                      id="address"
                                      placeholder="Street, City, State, PIN"
                                      style="height: 100px;">{{ old('address', $user->address) }}</textarea>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <hr class="my-4">

                    {{-- Account & Membership Section --}}
                    <h6 class="fw-bold text-amber mb-3"><i class="fas fa-cog me-2"></i>Account & Membership</h6>
                    <div class="row g-4">

                        {{-- Membership Plan --}}
                        <div class="col-md-6">
                            <label for="membership_id" class="form-label fw-semibold"><i class="fas fa-tag me-1"></i>Membership Plan</label>
                            <select name="membership_id" class="form-select @error('membership_id') is-invalid @enderror" id="membership_id">
                                <option value="">Select Plan</option>
                                @foreach($memberships as $membership)
                                    <option value="{{ $membership->id }}" {{ old('membership_id', $user->membership_id) == $membership->id ? 'selected' : '' }}>
                                        {{ $membership->plan_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('membership_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Status --}}
                        <div class="col-md-6">
                            <label for="status" class="form-label fw-semibold"><i class="fas fa-circle me-1"></i>Status</label>
                            <select name="status" class="form-select @error('status') is-invalid @enderror" id="status">
                                <option value="Active" {{ old('status', $user->status) == 'Active' ? 'selected' : '' }}>Active</option>
                                <option value="Inactive" {{ old('status', $user->status) == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <hr class="my-4">

                    {{-- Password Section (Optional) --}}
                    <h6 class="fw-bold text-amber mb-3"><i class="fas fa-lock me-2"></i>Change Password <span class="text-muted fw-normal">(leave blank to keep current)</span></h6>
                    <div class="row g-4">

                        {{-- New Password --}}
                        <div class="col-md-6">
                            <label for="password" class="form-label fw-semibold"><i class="fas fa-lock me-1"></i>New Password</label>
                            <input type="password"
                                   name="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   id="password"
                                   placeholder="Min 8 characters">
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Confirm Password --}}
                        <div class="col-md-6">
                            <label for="password_confirmation" class="form-label fw-semibold"><i class="fas fa-check-circle me-1"></i>Confirm Password</label>
                            <input type="password"
                                   name="password_confirmation"
                                   class="form-control"
                                   id="password_confirmation"
                                   placeholder="Re-enter password">
                        </div>
                    </div>

                    <hr class="my-4">

                    {{-- Buttons --}}
                    <div class="d-flex gap-3 flex-wrap">
                        <button type="submit" class="btn btn-warning btn-lg rounded-pill fw-semibold shadow-sm d-inline-flex align-items-center gap-2 px-5">
                            <i class="fas fa-save"></i> Update User
                        </button>
                        <a href="{{ route('users.index') }}" class="btn btn-outline-secondary btn-lg rounded-pill fw-semibold d-inline-flex align-items-center gap-2 px-4">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                    </div>

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

    <style>
        /* ----- Global Override ----- */
        body {
            background: #f8fafc;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }

        /* ===== Container ===== */
.container-fluid{
    width:100%;
    max-width:100%;
    padding:12px 16px;
}

/* ===== Card ===== */
.card{
    border:none;
    border-radius:16px;
    box-shadow:0 4px 16px rgba(0,0,0,.05);
}

.card-header{
    padding:14px 18px;
}

.card-body{
    padding:18px;
}

/* ===== Headings ===== */
h4{
    font-size:1.45rem;
}

h5{
    font-size:1.15rem;
}

h6{
    font-size:0.95rem;
}

/* ===== Labels ===== */
.form-label{
    font-size:13px;
    font-weight:600;
    margin-bottom:5px;
}

/* ===== Inputs ===== */
.form-control,
.form-select{
    height:40px;
    font-size:14px;
    padding:8px 12px;
    border-radius:10px;
}

textarea.form-control{
    min-height:90px;
}

/* ===== Row spacing ===== */
.row{
    --bs-gutter-x:1rem;
    --bs-gutter-y:1rem;
}

.mb-3{
    margin-bottom:0.8rem !important;
}

/* ===== Buttons ===== */
.btn{
    font-size:14px;
    padding:8px 18px;
    border-radius:10px;
}

.btn-lg{
    padding:10px 22px;
    font-size:14px;
}

/* ===== Alert ===== */
.alert{
    padding:12px 16px;
    border-radius:10px;
    font-size:13px;
}

/* ===== Icons ===== */
.fa,
.fas,
.far{
    font-size:0.9rem;
}

/* ===== Mobile ===== */
@media(max-width:768px){

    .container-fluid{
        padding:10px;
    }

    .card-body{
        padding:14px;
    }

    .card-header{
        padding:12px 14px;
    }

    .form-control,
    .form-select{
        height:38px;
        font-size:13px;
    }

    .btn{
        width:100%;
    }
}
    </style>
@endsection