@extends('Staff.layout')

@section('content')

<div class="row justify-content-center">
    <div class="col-lg-8">

        {{-- Profile Header --}}
        <div class="card border-0 shadow-sm mb-4" style="overflow:hidden;">
            <div style="background:linear-gradient(135deg,#667eea,#764ba2);padding:32px;text-align:center;">
                <div style="width:90px;height:90px;border-radius:50%;border:4px solid rgba(255,255,255,0.4);
                            display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
                            background:rgba(255,255,255,0.2);overflow:hidden;">
                    @if($staff->profile_photo)
                        <img src="{{ asset('storage/' . $staff->profile_photo) }}"
                             style="width:100%;height:100%;object-fit:cover;">
                    @else
                        <i class="ti tabler-user" style="font-size:36px;color:#fff;"></i>
                    @endif
                </div>
                <h4 style="color:#fff;font-weight:700;margin-bottom:4px;">{{ $staff->name }}</h4>
                <p style="color:rgba(255,255,255,0.85);margin-bottom:8px;">{{ $staff->designation }} — {{ $staff->department }}</p>
                <span style="background:rgba(255,255,255,0.2);padding:4px 14px;border-radius:20px;
                             font-size:13px;color:#fff;">{{ $staff->employee_id }}</span>
            </div>
        </div>

        {{-- Info --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-4">Personal Information</h5>
                <div class="row g-3">
                    <div class="col-md-6"><p class="text-muted small mb-1">Full Name</p><p class="fw-semibold">{{ $staff->name }}</p></div>
                    <div class="col-md-6"><p class="text-muted small mb-1">Email</p><p class="fw-semibold">{{ $staff->email ?? '-' }}</p></div>
                    <div class="col-md-6"><p class="text-muted small mb-1">Phone</p><p class="fw-semibold">{{ $staff->phone }}</p></div>
                    <div class="col-md-6"><p class="text-muted small mb-1">Gender</p><p class="fw-semibold">{{ $staff->gender ?? '-' }}</p></div>
                    <div class="col-md-6"><p class="text-muted small mb-1">Department</p><p class="fw-semibold">{{ $staff->department ?? '-' }}</p></div>
                    <div class="col-md-6"><p class="text-muted small mb-1">Designation</p><p class="fw-semibold">{{ $staff->designation ?? '-' }}</p></div>
                    <div class="col-md-6"><p class="text-muted small mb-1">Joining Date</p><p class="fw-semibold">{{ $staff->joining_date ?? '-' }}</p></div>
                    <div class="col-md-6"><p class="text-muted small mb-1">Status</p>
                        <span class="badge {{ $staff->status == 'Active' ? 'bg-label-success' : 'bg-label-danger' }}">{{ $staff->status }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Update Profile --}}
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-4">Update Profile</h5>
                <div id="profileAlert" style="display:none;"></div>
                <form id="profileForm">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" class="form-control" value="{{ $staff->phone }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Address</label>
                            <input type="text" name="address" class="form-control" value="{{ $staff->address }}">
                        </div>
                        <div class="col-12"><hr></div>
                        <div class="col-12"><h6 class="fw-bold">Change Password</h6></div>
                        <div class="col-md-4">
                            <label class="form-label">Current Password</label>
                            <input type="password" name="current_password" class="form-control" placeholder="Current password">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">New Password</label>
                            <input type="password" name="new_password" class="form-control" placeholder="New password">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" name="new_password_confirmation" class="form-control" placeholder="Confirm">
                        </div>
                    </div>
                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary px-4" id="saveProfileBtn">
                            <span id="saveProfileText">Save Changes</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });
</script>

<script>
$(document).ready(function() {
    $('#profileForm').on('submit', function(e) {
        e.preventDefault();
        const btn  = $('#saveProfileBtn');
        const text = $('#saveProfileText');
        btn.prop('disabled', true);
        text.text('Saving...');

        $.ajax({
            url: '{{ route("staff.profile.update") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                btn.prop('disabled', false);
                text.text('Save Changes');
                if (response.success) {
                    $('#profileAlert').html('<div class="alert alert-success">' + response.message + '</div>').show();
                    Toast.fire({icon: 'success',title: response.message});
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false);
                text.text('Save Changes');
                const msg = xhr.responseJSON?.message ?? 'Something went wrong.';
                $('#profileAlert').html('<div class="alert alert-danger">' + msg + '</div>').show();
                Toast.fire({icon: 'error',title: response.message});
            }
        });
    });
});
</script>

@endsection