@extends('layouts.app')

@section('title', 'My Profile')

@push('css')
<style>
    /* Profile Sidebar Styling */
    .profile-card { border-top: 3px solid var(--primary); }
    .profile-nav .nav-link {
        color: #4b5563;
        padding: 10px 15px;
        border-radius: 4px;
        margin-bottom: 2px;
        transition: all 0.2s;
    }
    .profile-nav .nav-link i { width: 25px; }
    .profile-nav .nav-link.active {
        background-color: var(--primary);
        color: #fff !important;
    }

    /* ID Card Styles refined for BS4 */
    .id-card-modern {
        width: 320px;
        height: 500px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        overflow: hidden;
        margin: 0 auto;
        border: 1px solid #dee2e6;
    }
    .id-card-header {
        height: 120px;
        background: #1f2d3d;
        padding: 20px;
        text-align: center;
    }
    .id-card-photo {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 5px solid #fff;
        object-fit: cover;
        margin-top: -60px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .id-card-body { padding: 20px; text-align: center; }
    .id-name { font-size: 1.25rem; font-weight: 700; color: #1f2d3d; text-transform: uppercase; }
    .id-designation { color: var(--primary); font-size: 0.8rem; font-weight: 600; }
    .id-field { display: flex; justify-content: space-between; border-bottom: 1px dashed #eee; padding: 5px 0; font-size: 12px; }
    .id-label { color: #6c757d; font-weight: 600; }
    .id-value { font-weight: 700; color: #343a40; }
</style>
@endpush

@section('content')
<div class="row">
    <!-- Sidebar Navigation -->
    <div class="col-md-3">
        <div class="card card-primary card-outline profile-card text-center mb-3">
            <div class="card-body box-profile">
                <div class="text-center mb-3">
                    <img src="{{ $employee->photo_url }}" class="profile-user-img img-fluid img-circle" style="width: 100px; height: 100px; object-fit: cover;">
                </div>
                <h3 class="profile-username text-center font-weight-bold">{{ $employee->name }}</h3>
                <p class="text-muted text-center">{{ $employee->designation }}</p>
                <div class="badge badge-info px-3 py-2">ID: #{{ str_pad($employee->id, 5, '0', STR_PAD_LEFT) }}</div>
            </div>
        </div>

        <div class="card card-primary">
            <div class="card-body p-0">
                <ul class="nav nav-pills flex-column profile-nav" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="pill" href="#v-pills-basic" role="tab"><i class="fas fa-id-badge mr-2"></i>Employment</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#v-pills-bank" role="tab"><i class="fas fa-landmark mr-2"></i>Financials</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#v-pills-personal" role="tab"><i class="fas fa-house-user mr-2"></i>Personal</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#v-pills-docs" role="tab"><i class="fas fa-folder-open mr-2"></i>Documents</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#v-pills-security" role="tab"><i class="fas fa-shield-alt mr-2"></i>Security</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link bg-primary mt-2" data-toggle="pill" href="#v-pills-id" role="tab"><i class="fas fa-id-card mr-2"></i>Digital ID</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Content Tabs -->
    <div class="col-md-9">
        @if($pendingRequests->count() > 0)
            <div class="alert alert-info border-0 shadow-sm mb-3">
                <i class="fas fa-info-circle mr-2"></i> You have <strong>{{ $pendingRequests->count() }}</strong> update request(s) awaiting approval or processing.
            </div>
        @endif

        <div class="tab-content">
            <!-- Basic Info -->
            <div class="tab-pane fade show active" id="v-pills-basic">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title font-weight-bold">Employment Overview</h3>
                        <div class="card-tools">
                            <span class="badge badge-secondary"><i class="fas fa-lock mr-1"></i> Read Only</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <div class="col-md-4">
                                <label class="id-label d-block mb-1">Official Email</label>
                                <span class="id-value d-block" style="font-size: 14px;">{{ $employee->email }}</span>
                            </div>
                            <div class="col-md-4">
                                <label class="id-label d-block mb-1">Mobile Contact</label>
                                <span class="id-value d-block" style="font-size: 14px;">{{ $employee->phone }}</span>
                            </div>
                            <div class="col-md-4">
                                <label class="id-label d-block mb-1">Current Role</label>
                                <span class="id-value d-block" style="font-size: 14px;">{{ $employee->designation }}</span>
                            </div>
                            <div class="col-md-4">
                                <label class="id-label d-block mb-1">Date of Onboarding</label>
                                <span class="id-value d-block" style="font-size: 14px;">{{ \Carbon\Carbon::parse($employee->created_at)->format('d M, Y') }}</span>
                            </div>
                            <div class="col-md-4">
                                <label class="id-label d-block mb-1">Consolidated Pay</label>
                                <span class="id-value d-block" style="font-size: 14px;">{{ number_format($employee->base_salary) }} {{ \App\Models\BusinessSetting::firstOrNewDefault()->currency_symbol }}</span>
                            </div>
                        </div>

                        <div class="mt-5">
                            <h6 class="fw-bold mb-3 d-flex align-items-center"><i class="fas fa-minus-circle me-2 text-danger"></i> Monthly Deductions Schedule</h6>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">

                                    <thead>
                                        <tr>
                                            <th>Description</th>
                                            <th class="text-end">Monthly Deduction</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($employee->deductions as $deduction)
                                            <tr>
                                                <td class="fw-semibold">{{ $deduction->deductionType->name }}</td>
                                                <td class="text-end fw-bold">{{ number_format($deduction->amount) }} {{ \App\Models\BusinessSetting::firstOrNewDefault()->currency_symbol }}</td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="2" class="text-center text-muted py-4">No active statutory deductions found.</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Financial Records -->
            <div class="tab-pane fade" id="v-pills-bank">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title font-weight-bold">Financial Records</h3>
                    </div>
                    <div class="card-body">
                        <form class="update-profile-form">
                            @csrf
                            <div class="row g-4">
                                <div class="col-md-12">
                                    <label class="form-label">Beneficiary Bank Name</label>
                                    <input type="text" name="bank_name" class="form-control" value="{{ $employee->bank_name }}" placeholder="e.g., State Bank of India">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Bank Account Number</label>
                                    <input type="text" name="account_number" class="form-control" value="{{ $employee->account_number }}" placeholder="XXXXXXXXXXXX">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Bank IFSC Code</label>
                                    <input type="text" name="ifsc_code" class="form-control" value="{{ $employee->ifsc_code }}" placeholder="SBIN000XXXX">
                                </div>
                                <div class="col-md-12 text-end">
                                    <button type="submit" class="btn btn-crm-primary">Submit for Approval</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Personal Details -->
            <div class="tab-pane fade" id="v-pills-personal">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title font-weight-bold">Personal Information</h3>
                    </div>
                    <div class="card-body">
                        <form class="update-profile-form">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Father's Name</label>
                                        <input type="text" name="father_name" class="form-control" value="{{ $employee->father_name }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Mother's Name</label>
                                        <input type="text" name="mother_name" class="form-control" value="{{ $employee->mother_name }}">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Professional Experience</label>
                                        <input type="text" name="total_experience" class="form-control" value="{{ $employee->total_experience }}" placeholder="e.g., 5 Years 6 Months">
                                    </div>
                                </div>
                                <div class="col-md-12 text-right">
                                    <button type="submit" class="btn btn-primary">Update Details</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Documents -->
            <div class="tab-pane fade" id="v-pills-docs">
                <div class="card card-outline card-primary mb-4">
                    <div class="card-header">
                        <h3 class="card-title font-weight-bold">Upload New Records</h3>
                    </div>
                    <div class="card-body">
                        <form id="uploadDocForm" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Document Description</label>
                                        <input type="text" name="document_name" class="form-control" placeholder="e.g., Aadhar Card" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Select File</label>
                                        <input type="file" name="document_file" class="form-control" required style="padding: 3px;">
                                    </div>
                                </div>
                                <div class="col-md-12 text-right">
                                    <button type="submit" class="btn btn-success"><i class="fas fa-upload mr-2"></i>Upload for Review</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title font-weight-bold">Repository History</h3>
                    </div>
                    <div class="card-body p-0">
                         <div class="table-responsive">
                             <table class="table table-hover table-bordered table-striped mb-0">
                                 <thead>
                                     <tr>
                                         <th>Document Name</th>
                                         <th>Status</th>
                                         <th style="width: 100px;">Action</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     @forelse($documents as $doc)
                                         <tr>
                                             <td><b>{{ $doc->name }}</b> <br><small>{{ $doc->created_at->format('d M Y') }}</small></td>
                                             <td>
                                                 @if($doc->status == 'pending') <span class="badge badge-warning">Reviewing</span>
                                                 @elseif($doc->status == 'approved') <span class="badge badge-success">Verified</span>
                                                 @else <span class="badge badge-danger">Denied</span>
                                                 @endif
                                             </td>
                                             <td>
                                                 <a href="{{ asset('storage/' . $doc->file_path) }}" target="_blank" class="btn btn-sm btn-info w-100"><i class="fas fa-eye"></i></a>
                                             </td>
                                         </tr>
                                     @empty
                                         <tr><td colspan="3" class="text-center py-4">No documents uploaded.</td></tr>
                                     @endforelse
                                 </tbody>
                             </table>
                         </div>
                    </div>
                </div>
            </div>

            <!-- Security -->
            <div class="tab-pane fade" id="v-pills-security">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title font-weight-bold">Security Settings</h3>
                    </div>
                    <div class="card-body">
                        <form id="changePasswordForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Current Password</label>
                                        <input type="password" name="current_password" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>New Password</label>
                                        <input type="password" name="new_password" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Confirm Password</label>
                                        <input type="password" name="new_password_confirmation" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-12 text-right">
                                    <button type="submit" class="btn btn-danger">Update Password</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- ID Card -->
            <div class="tab-pane fade" id="v-pills-id">
                <div class="text-center">
                    <div class="mb-4">
                        <button class="btn btn-secondary" onclick="window.print()">
                            <i class="fas fa-print mr-2"></i>Print ID Card
                        </button>
                    </div>
                    
                    <div class="id-card-modern text-start">
                        <div class="id-card-header">
                            @if(\App\Models\BusinessSetting::firstOrNewDefault()->company_logo)
                                <img src="{{ asset('storage/' . \App\Models\BusinessSetting::firstOrNewDefault()->company_logo) }}" style="height: 32px; filter: brightness(0) invert(1);">
                            @endif
                            <div class="text-white fw-bold mt-1" style="font-size: 13px; letter-spacing: 1px;">{{ \App\Models\BusinessSetting::firstOrNewDefault()->company_name ?: 'INFO CRM' }}</div>
                        </div>
                        <div class="id-card-photo-box">
                            <img src="{{ $employee->photo_url }}" class="id-card-photo">
                        </div>
                        <div class="id-card-body">
                            <div class="id-name">{{ $employee->name }}</div>
                            <span class="id-designation">{{ $employee->designation }}</span>
                            
                            <div class="id-data mt-4">
                                <div class="id-field">
                                    <span class="id-label">Employee Tag</span>
                                    <span class="id-value">#{{ str_pad($employee->id, 5, '0', STR_PAD_LEFT) }}</span>
                                </div>
                                <div class="id-field">
                                    <span class="id-label">Joined On</span>
                                    <span class="id-value">{{ \Carbon\Carbon::parse($employee->created_at)->format('d . m . Y') }}</span>
                                </div>
                                <div class="id-field">
                                    <span class="id-label">Assigned Cell</span>
                                    <span class="id-value">{{ $employee->phone }}</span>
                                </div>
                                <div class="id-field" style="border: none;">
                                    <span class="id-label">Vital Group</span>
                                    <span class="id-value">{{ $employee->blood_group ?: 'NIL' }}</span>
                                </div>
                            </div>

                            <div class="id-qr">
                                {!! \SimpleSoftwareIO\QrCode\Facades\QrCode::size(55)->color(15, 23, 42)->generate(route('dashboard')) !!}
                            </div>
                        </div>
                        <div class="id-footer"></div>
                    </div>

                    <p class="text-muted mt-5 small" style="max-width: 400px; margin: 0 auto; line-height: 1.5;">
                        <i class="fas fa-shield-check me-2 text-success"></i> 
                        This identity artifact is a secure, digitally generated credential. 
                        Property of {{ \App\Models\BusinessSetting::firstOrNewDefault()->company_name ?: 'INFO CRM' }}.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    // Standardized AJAX Handlers
    $('.update-profile-form').on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        var btn = form.find('button[type="submit"]');
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Processing...');
        
        $.ajax({
            url: "{{ route('profile.update') }}",
            type: 'POST',
            data: form.serialize(),
            success: function(res) {
                Swal.fire({ icon: 'success', title: 'Request Logged', text: res.success, confirmButtonColor: '#6366f1' });
            },
            complete: function() {
                btn.prop('disabled', false).text('Submit for Approval');
            }
        });
    });

    $('#changePasswordForm').on('submit', function(e) {
        e.preventDefault();
        var btn = $(this).find('button[type="submit"]');
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Updating...');
        
        $.ajax({
            url: "{{ route('profile.password') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function(res) {
                Swal.fire({ icon: 'success', title: 'Secured', text: res.success, confirmButtonColor: '#6366f1' });
                $('#changePasswordForm')[0].reset();
            },
            error: function(xhr) {
                Swal.fire({ icon: 'error', title: 'Verification Failed', text: xhr.responseJSON.error || 'Server error', confirmButtonColor: '#ef4444' });
            },
            complete: function() {
                btn.prop('disabled', false).text('Commit Security Changes');
            }
        });
    });

    $('#uploadDocForm').on('submit', function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        var btn = $(this).find('button[type="submit"]');
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Uploading...');
        
        $.ajax({
            url: "{{ route('profile.upload-document') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                Swal.fire({ icon: 'success', title: 'Archived', text: res.success, confirmButtonColor: '#6366f1' }).then(() => location.reload());
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fas fa-cloud-arrow-up me-2"></i>Upload for Review');
            }
        });
    });
});
</script>
@endpush