

<?php $__env->startSection('title', 'Expense Detail - ' . $transaction->code); ?>

<?php $__env->startSection('content'); ?>
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
    <div>
        <h4 class="mb-3 mb-md-0">Expense Detail</h4>
    </div>
    <div class="d-flex align-items-center flex-wrap text-nowrap">
        <a href="<?php echo e(route('shop.transactions.index')); ?>" class="btn btn-outline-primary btn-icon-text mb-2 mb-md-0 me-2">
            <i class="btn-icon-prepend" data-feather="arrow-left"></i>
            Back to Transactions
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
                    <div>
                        <h5 class="card-title mb-0">Expense #<?php echo e($transaction->code); ?></h5>
                        <p class="text-muted small">Reference: <?php echo e($transaction->reference_code ?? 'N/A'); ?></p>
                    </div>
                    <div class="text-end">
                        <span class="badge bg-danger p-2 fs-6">Expense</span>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-sm-6">
                        <h6 class="text-muted mb-2">Shop Details</h6>
                        <p class="mb-1"><strong><?php echo e($transaction->shop->name ?? 'N/A'); ?></strong></p>
                        <p class="mb-0 text-muted small">Shop ID: <?php echo e($transaction->shop_id); ?></p>
                    </div>
                    <div class="col-sm-6 text-sm-end">
                        <h6 class="text-muted mb-2">Date & Time</h6>
                        <p class="mb-1"><strong><?php echo e($transaction->local_db_created_at ? $transaction->local_db_created_at->format('M d, Y') : $transaction->created_at->format('M d, Y')); ?></strong></p>
                        <p class="mb-0 text-muted small"><?php echo e($transaction->local_db_created_at ? $transaction->local_db_created_at->format('h:i A') : $transaction->created_at->format('h:i A')); ?></p>
                    </div>
                </div>

                <div class="table-responsive mb-4">
                    <table class="table table-bordered">
                        <thead class="bg-light">
                            <tr>
                                <th>Description</th>
                                <th class="text-end" style="width: 200px;">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="fw-bold mb-1"><?php echo e($transaction->expenseCategory->name ?? 'Uncategorized Expense'); ?></div>
                                    <p class="text-muted small mb-0"><?php echo e($transaction->expenseAccount->name ?? 'General Expense Account'); ?></p>
                                    <?php if($transaction->description): ?>
                                        <div class="mt-2 p-2 bg-light border-start border-primary border-4 small">
                                            <strong>Note:</strong> <?php echo e($transaction->description); ?>

                                        </div>
                                    <?php endif; ?>
                                </td>
                                <td class="text-end align-middle">
                                    <h4 class="text-danger mb-0"><?php echo e($transaction->formatted_amount); ?></h4>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="row mt-4">
                    <div class="col-md-6">
                        <h6 class="text-muted mb-2">Category Details</h6>
                        <table class="table table-sm table-borderless">
                            <tr>
                                <th class="ps-0" style="width: 120px;">Category:</th>
                                <td><?php echo e($transaction->expenseCategory->name ?? 'N/A'); ?></td>
                            </tr>
                            <tr>
                                <th class="ps-0">Code:</th>
                                <td><?php echo e($transaction->expense_category_code ?? 'N/A'); ?></td>
                            </tr>
                            <tr>
                                <th class="ps-0">Description:</th>
                                <td><?php echo e($transaction->expenseCategory->description ?? 'No description available'); ?></td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted mb-2">Account Details</h6>
                        <table class="table table-sm table-borderless">
                            <tr>
                                <th class="ps-0" style="width: 120px;">Account:</th>
                                <td><?php echo e($transaction->expenseAccount->name ?? 'N/A'); ?></td>
                            </tr>
                            <tr>
                                <th class="ps-0">Code:</th>
                                <td><?php echo e($transaction->account_code ?? 'N/A'); ?></td>
                            </tr>
                            <tr>
                                <th class="ps-0">Type:</th>
                                <td><span class="badge bg-info">Expense</span></td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-6">
                        <h6 class="text-muted mb-2 d-flex align-items-center justify-content-between">
                            Recorded By
                            <?php if($transaction->employee_account_id): ?>
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="showEmployeeModal(<?php echo e($transaction->employee_account_id); ?>)" title="View Employee Profile">
                                    <i class="fa fa-id-badge me-1"></i>Profile
                                </button>
                            <?php endif; ?>
                        </h6>
                        <table class="table table-sm table-borderless">
                            <tr>
                                <th class="ps-0" style="width: 120px;">Employee:</th>
                                <td><?php echo e($transaction->employeeAccount->name ?? 'N/A'); ?></td>
                            </tr>
                            <tr>
                                <th class="ps-0">Phone:</th>
                                <td><?php echo e($transaction->employeeAccount->phone ?? 'N/A'); ?></td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <h6 class="text-muted mb-3">Attachments / Documents</h6>

                        <?php if($attachments->isEmpty()): ?>
                            <p class="text-muted small fst-italic mb-0">No documents attached</p>
                        <?php else: ?>
                            <div class="row g-3">
                                <?php $__currentLoopData = $attachments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $attachment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="col-6 col-sm-4 col-md-3">
                                        <?php if($attachment->is_image): ?>
                                            <div class="attachment-tile border rounded overflow-hidden h-100"
                                                 role="button"
                                                 data-attachment-type="image"
                                                 data-attachment-url="<?php echo e(route('shop.transactions.attachment.view', $attachment)); ?>"
                                                 data-attachment-name="<?php echo e($attachment->file_name); ?>"
                                                 data-attachment-download="<?php echo e(route('shop.transactions.attachment.download', $attachment)); ?>">
                                                <div class="attachment-thumb bg-light">
                                                    <img src="<?php echo e(route('shop.transactions.attachment.view', $attachment)); ?>" alt="<?php echo e($attachment->file_name); ?>" loading="lazy">
                                                </div>
                                                <div class="p-2 border-top d-flex align-items-center justify-content-between gap-2">
                                                    <div class="text-truncate">
                                                        <p class="text-truncate small mb-0" title="<?php echo e($attachment->file_name); ?>"><?php echo e($attachment->file_name); ?></p>
                                                        <?php if($attachment->human_size): ?>
                                                            <span class="text-muted" style="font-size:.72rem;"><?php echo e($attachment->human_size); ?></span>
                                                        <?php endif; ?>
                                                    </div>
                                                    <a href="<?php echo e(route('shop.transactions.attachment.download', $attachment)); ?>"
                                                       class="btn btn-sm btn-outline-primary flex-shrink-0 attachment-download"
                                                       title="Download <?php echo e($attachment->file_name); ?>"
                                                       onclick="event.stopPropagation();">
                                                        <i data-feather="download" style="width:16px;height:16px;"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        <?php else: ?>
                                            <div class="attachment-tile border rounded overflow-hidden h-100"
                                                 role="button"
                                                 data-attachment-type="doc"
                                                 data-attachment-url="<?php echo e(route('shop.transactions.attachment.view', $attachment)); ?>"
                                                 data-attachment-name="<?php echo e($attachment->file_name); ?>"
                                                 data-attachment-download="<?php echo e(route('shop.transactions.attachment.download', $attachment)); ?>">
                                                <div class="attachment-thumb bg-light d-flex align-items-center justify-content-center">
                                                    <i data-feather="<?php echo e(str_contains((string) $attachment->mime_type, 'pdf') ? 'file-text' : 'file'); ?>" class="text-danger" style="width:42px;height:42px;"></i>
                                                </div>
                                                <div class="p-2 border-top d-flex align-items-center justify-content-between gap-2">
                                                    <div class="text-truncate">
                                                        <p class="text-truncate small mb-0" title="<?php echo e($attachment->file_name); ?>"><?php echo e($attachment->file_name); ?></p>
                                                        <?php if($attachment->human_size): ?>
                                                            <span class="text-muted" style="font-size:.72rem;"><?php echo e($attachment->human_size); ?></span>
                                                        <?php endif; ?>
                                                    </div>
                                                    <a href="<?php echo e(route('shop.transactions.attachment.download', $attachment)); ?>"
                                                       class="btn btn-sm btn-outline-primary flex-shrink-0 attachment-download"
                                                       title="Download <?php echo e($attachment->file_name); ?>"
                                                       onclick="event.stopPropagation();">
                                                        <i data-feather="download" style="width:16px;height:16px;"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="mt-5 text-center border-top pt-3">
                    <p class="text-muted small">Generated on <?php echo e(now()->format('M d, Y h:i A')); ?></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image lightbox modal -->
<div class="modal fade" id="attachmentImageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title text-truncate" id="attachmentImageTitle">Attachment</h6>
                <div class="d-flex align-items-center">
                    <a href="#" id="attachmentImageDownload" class="btn btn-sm btn-primary me-2">Download</a>
                    <a href="#" id="attachmentImageOpen" class="btn btn-sm btn-outline-primary me-2" target="_blank" rel="noopener">Open in new tab</a>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>
            <div class="modal-body text-center bg-light">
                <img src="" id="attachmentImage" alt="" class="img-fluid rounded" style="max-height:75vh;">
            </div>
        </div>
    </div>
</div>

<!-- Document (PDF / other) preview modal -->
<div class="modal fade" id="attachmentDocModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title text-truncate" id="attachmentDocTitle">Document</h6>
                <div class="d-flex align-items-center">
                    <a href="#" id="attachmentDocDownload" class="btn btn-sm btn-primary me-2">Download</a>
                    <a href="#" id="attachmentDocOpen" class="btn btn-sm btn-outline-primary me-2" target="_blank" rel="noopener">Open in new tab</a>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>
            <div class="modal-body p-0">
                <iframe src="" id="attachmentDocFrame" title="Document preview" style="width:100%;height:80vh;border:0;"></iframe>
            </div>
        </div>
    </div>
</div>

<?php echo $__env->make('modals.employee-info', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<style>
    .attachment-tile { transition: box-shadow .15s ease, transform .15s ease; background:#fff; }
    .attachment-tile:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.1); transform: translateY(-2px); }
    .attachment-thumb { height: 130px; }
    .attachment-thumb img { width:100%; height:100%; object-fit: cover; display:block; }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var imageModalEl = document.getElementById('attachmentImageModal');
        var docModalEl = document.getElementById('attachmentDocModal');

        document.querySelectorAll('.attachment-tile').forEach(function (tile) {
            tile.addEventListener('click', function () {
                var url = tile.getAttribute('data-attachment-url');
                var name = tile.getAttribute('data-attachment-name') || 'Attachment';
                var downloadUrl = tile.getAttribute('data-attachment-download');

                if (tile.getAttribute('data-attachment-type') === 'image') {
                    document.getElementById('attachmentImage').src = url;
                    document.getElementById('attachmentImageTitle').textContent = name;
                    document.getElementById('attachmentImageOpen').href = url;
                    document.getElementById('attachmentImageDownload').href = downloadUrl;
                    bootstrap.Modal.getOrCreateInstance(imageModalEl).show();
                } else {
                    document.getElementById('attachmentDocFrame').src = url;
                    document.getElementById('attachmentDocTitle').textContent = name;
                    document.getElementById('attachmentDocOpen').href = url;
                    document.getElementById('attachmentDocDownload').href = downloadUrl;
                    bootstrap.Modal.getOrCreateInstance(docModalEl).show();
                }
            });
        });

        // Stop loading the iframe / free memory when the document modal closes.
        if (docModalEl) {
            docModalEl.addEventListener('hidden.bs.modal', function () {
                document.getElementById('attachmentDocFrame').src = '';
            });
        }
    });

    function showEmployeeModal(employeeAccountId) {
        var contentEl = document.getElementById('employeeInfoContent');
        var modalEl = document.getElementById('employeeInfoModal');
        if (!modalEl) {
            console.error('Employee modal not found!');
            return;
        }

        contentEl.innerHTML = `
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Loading employee information...</p>
            </div>
        `;
        bootstrap.Modal.getOrCreateInstance(modalEl).show();

        fetch('/api/shop/employee-info?employee_account_id=' + encodeURIComponent(employeeAccountId), {
            headers: { 'Accept': 'application/json' }
        })
            .then(function (response) { return response.json(); })
            .then(function (response) {
                if (response.success) {
                    displayEmployeeInfo(response.data);
                } else {
                    contentEl.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            ${response.message || 'Failed to load employee information'}
                        </div>
                    `;
                }
            })
            .catch(function (error) {
                contentEl.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Error loading employee information: ${error}
                    </div>
                `;
            });
    }

    function displayEmployeeInfo(employee) {
        document.getElementById('employeeInfoContent').innerHTML = `
            <div class="row">
                <div class="col-md-12">
                    <h6 class="mb-3">Employee Information</h6>
                    <table class="table table-sm">
                        <tr>
                            <th class="bg-light" style="width: 150px;">Name:</th>
                            <td>${employee.name || 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Code:</th>
                            <td>${employee.code || 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Phone:</th>
                            <td>${employee.phone || 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Email:</th>
                            <td>${employee.email || 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Address:</th>
                            <td>${employee.address || 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Gender:</th>
                            <td>${employee.gender ? employee.gender.charAt(0).toUpperCase() + employee.gender.slice(1) : 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Employee Type:</th>
                            <td>${employee.employee_type || 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Department:</th>
                            <td>${employee.department_name || 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Team:</th>
                            <td>${employee.team_name || 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Work Category:</th>
                            <td>${employee.work_category || 'N/A'}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">Status:</th>
                            <td>
                                <span class="badge ${employee.is_active ? 'bg-success' : 'bg-danger'}">
                                    ${employee.is_active ? 'Active' : 'Inactive'}
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        `;
    }
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\habibcables-ERP\resources\views\shop\expenses\show.blade.php ENDPATH**/ ?>