@extends('layouts.app') 

@section('content')
<style>
    .profile-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        background: #ffffff;
    }
    .profile-header {
        
        background: linear-gradient(135deg, #3d0c3d 0%, #5c1d5c 100%);
        padding: 1.25rem 1.5rem;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }
    .profile-info-row {
        padding: 0.9rem 0;
        border-bottom: 1px solid #f1f1f4;
    }
    .profile-info-row:last-of-type {
        border-bottom: none;
    }
    .profile-label {
        color: #6c757d;
        font-weight: 600;
        font-size: 0.95rem;
    }
    .profile-value {
        color: #212529;
        font-weight: 500;
        font-size: 0.95rem;
    }
    .btn-edit {
        background-color: #5c1d5c;
        color: white;
        border-radius: 6px;
        padding: 0.5rem 1.5rem;
        font-weight: 500;
        transition: all 0.2s ease;
        border: none;
        text-decoration: none;
    }
    .btn-edit:hover {
        background-color: #3d0c3d;
        color: white;
        box-shadow: 0 4px 10px rgba(92, 29, 92, 0.3);
    }
</style>

<div class="container mt-5 mb-5">
    <div class="row justify-content-center">
        <div class="col-md-8">


        @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show mb-4" role="alert" style="border-radius: 8px;">
                    <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif


            <div class="card profile-card">
                
                <!-- Purple Header -->
                <div class="card-header profile-header text-white">
                    <h4 class="mb-0 fw-bold" style="font-size: 1.25rem;">User Profile Dashboard</h4>
                </div>

                <div class="card-body p-4">
                    <!-- Name -->
                  <div class="row profile-info-row align-items-center">
                    <div class="col-md-4 profile-label">Full Name:</div>
                    <div class="col-md-8 profile-value">{{ $user->first_name . ' ' . $user->last_name }}</div>
                </div>
                    
                    <!-- Email -->
                    <div class="row profile-info-row align-items-center">
                        <div class="col-md-4 profile-label">Email Address:</div>
                        <div class="col-md-8 profile-value">{{ $user->email }}</div>
                    </div>

                    <!-- Phone -->
                    <div class="row profile-info-row align-items-center">
                        <div class="col-md-4 profile-label">Phone Number:</div>
                        <div class="col-md-8 profile-value">
                            {{ $user->phone ?? 'Not Provided' }}
                        </div>
                    </div>

                    <!-- Created At -->
                    <div class="row profile-info-row align-items-center">
                        <div class="col-md-4 profile-label">Account Created:</div>
                        <div class="col-md-8 profile-value text-muted">
                            {{ $user->created_at ? $user->created_at->format('Y-m-d H:i') : 'N/A' }}
                        </div>
                    </div>

                    <!-- Updated At -->
                    <div class="row profile-info-row align-items-center">
                        <div class="col-md-4 profile-label">Last Updated:</div>
                        <div class="col-md-8 profile-value text-muted">
                            {{ $user->updated_at ? $user->updated_at->format('Y-m-d H:i') : 'N/A' }}
                        </div>
                    </div>

                    <!-- Edit Button -->
                    <div class="mt-4 text-end">
                        <!-- <a href="#" class="btn btn-edit">Edit Profile</a> -->
                         <div class="mt-4 text-end">
    <button type="button" class="btn btn-edit" data-bs-toggle="modal" data-bs-target="#editProfileModal">
        Edit Profile
    </button>
</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

 
 

 
<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 12px; overflow: hidden;">
            
            <!-- Modal Header (Oyage purple theme ekata match kala) -->
            <div class="modal-header text-white" style="background: linear-gradient(135deg, #3d0c3d 0%, #5c1d5c 100%);">
                <h5 class="modal-title fw-bold" id="editProfileModalLabel">Update Profile Details</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
           
            <form action="{{ route('profile.update') }}" method="POST">
                @csrf
                @method('PUT')  

                <div class="modal-body p-4">
                    
                    <!-- First Name Input -->
                    <div class="mb-3">
                        <label for="first_name" class="form-label fw-bold" style="color: #6c757d;">First Name</label>
                        <input type="text" class="form-control" id="first_name" name="first_name" value="{{ $user->first_name }}" required>
                    </div>

                    <!-- Last Name Input -->
                    <div class="mb-3">
                        <label for="last_name" class="form-label fw-bold" style="color: #6c757d;">Last Name</label>
                        <input type="text" class="form-control" id="last_name" name="last_name" value="{{ $user->last_name }}" required>
                    </div>

                    <!-- Phone Input -->
                    <div class="mb-3">
                        <label for="phone" class="form-label fw-bold" style="color: #6c757d;">Phone Number</label>
                        <input type="text" class="form-control" id="phone" name="phone" value="{{ $user->phone }}">
                    </div>

                </div>
                
                <!-- Modal Footer Buttons -->
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn text-white" style="background-color: #5c1d5c;">Save Changes</button>
                </div>
            </form>

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