@extends('adminlte::page')

@section('title', $category->name . ' – Assets Due for Depreciation')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="font-weight-bold text-dark mb-0">
                <i class="fas fa-tag mr-2 text-primary"></i> {{ $category->name }}
            </h1>
            <small class="text-muted">Assets due for depreciation</small>
        </div>
        <ol class="breadcrumb m-0 pl-0 bg-transparent">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('depreciations.create') }}">Process Depreciation</a></li>
            <li class="breadcrumb-item active">{{ $category->name }}</li>
        </ol>
    </div>
@stop

@section('content')
<div class="container-fluid">

    {{-- Top Action Bar --}}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap" style="gap: 12px;">
        <div class="d-flex align-items-center" style="gap: 10px;">
            <div class="info-badge">
                <span class="badge-dot bg-warning"></span>
                <span class="text-dark font-weight-bold">{{ $assets->count() }}</span>
                <span class="text-muted">asset(s) pending</span>
            </div>
            <div class="info-badge">
                <span class="badge-dot bg-danger"></span>
                <span class="text-dark font-weight-bold">₦{{ number_format($assets->sum('depreciation_amount'), 2) }}</span>
                <span class="text-muted">total depreciation</span>
            </div>
        </div>
        <div style="display: flex; gap: 10px;">
            <a href="{{ route('depreciations.create') }}" class="btn btn-outline-secondary shadow-none">
                <i class="fas fa-arrow-left mr-1"></i> Back
            </a>
            <button id="btn-process-all" class="btn btn-gradient-success shadow-sm font-weight-bold px-4"
                    data-category-id="{{ $category->id }}"
                    data-category-name="{{ $category->name }}"
                    data-count="{{ $assets->count() }}"
                    data-url="{{ route('depreciations.category.process', $category->id) }}">
                <i class="fas fa-cogs mr-2"></i> Process All Depreciation
            </button>
        </div>
    </div>

    {{-- Main Card --}}
    <div class="card shadow-sm border-0 rounded-lg overflow-hidden">
        <div class="card-header border-0 py-3 d-flex align-items-center justify-content-between" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
            <div class="d-flex align-items-center">
                <div class="icon-circle mr-3">
                    <i class="fas fa-list text-white"></i>
                </div>
                <div>
                    <h5 class="mb-0 font-weight-bold text-white">Asset Depreciation Schedule</h5>
                    <small class="text-white" style="opacity:.75;">{{ $category->name }} &mdash; {{ now()->format('d M, Y') }}</small>
                </div>
            </div>
            <span class="badge badge-light font-weight-bold px-3 py-2" style="font-size: 0.85rem;">
                {{ $assets->count() }} Item(s)
            </span>
        </div>

        {{-- Search Bar --}}
        <div class="px-4 py-3" style="background:#f8f9fc; border-bottom: 1px solid #e9ecef;">
            <div class="d-flex align-items-center" style="gap:12px;">
                <div class="flex-grow-1 position-relative">
                    <span class="position-absolute" style="top:50%;left:14px;transform:translateY(-50%);color:#adb5bd;pointer-events:none;">
                        <i class="fas fa-search" style="font-size:0.85rem;"></i>
                    </span>
                    <input id="asset-search"
                           type="text"
                           class="form-control form-control-sm"
                           placeholder="Search by name, asset tag or location…"
                           autocomplete="off"
                           style="padding-left:36px; border-radius:8px; border:1px solid #dee2e6; font-size:0.85rem; box-shadow:none;">
                </div>
                <div id="search-count" class="text-muted" style="font-size:0.82rem; white-space:nowrap;"></div>
                <button id="btn-clear-search" type="button" class="btn btn-sm btn-outline-secondary d-none" style="border-radius:6px; font-size:0.8rem;">
                    <i class="fas fa-times mr-1"></i> Clear
                </button>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0 modern-table text-nowrap">
                    <thead>
                        <tr>
                            <th class="pl-4 py-3 border-0 text-muted text-uppercase" style="font-size:0.7rem;letter-spacing:.05em; width: 40px;">#</th>
                            <th class="py-3 border-0 text-muted text-uppercase" style="font-size:0.7rem;letter-spacing:.05em;">Asset Info</th>
                            <th class="py-3 border-0 text-muted text-uppercase" style="font-size:0.7rem;letter-spacing:.05em;">Depreciation Details</th>
                            <th class="py-3 border-0 text-muted text-uppercase text-right" style="font-size:0.7rem;letter-spacing:.05em;">Dep. Amount</th>
                            <th class="pr-4 py-3 border-0 text-muted text-uppercase text-center" style="font-size:0.7rem;letter-spacing:.05em; width:120px;">Action</th>
                        </tr>
                    </thead>
                    <tbody id="asset-table-body">
                        @forelse($assets as $index => $asset)
                        <tr class="asset-row" data-asset-id="{{ $asset->id }}">
                            <td class="pl-4 py-3 align-middle text-muted" style="font-size:0.8rem;">{{ $index + 1 }}</td>
                            <td class="py-3 align-middle" style="white-space: normal;">
                                <div class="font-weight-bold text-dark mb-1" style="font-size:0.95rem;">{{ $asset->name }}</div>
                                <div class="text-primary font-weight-bold mb-1" style="font-size:0.8rem;">
                                    <i class="fas fa-barcode mr-1 opacity-75"></i> {{ $asset->asset_tag }}
                                </div>
                                <div class="text-muted" style="font-size:0.75rem;">
                                    <i class="fas fa-map-marker-alt mr-1"></i> {{ $asset->location->name ?? 'N/A' }}
                                </div>
                            </td>
                            <td class="py-3 align-middle" style="white-space: normal;">
                                <div class="mb-1"><span class="badge badge-soft-info">{{ $asset->depreciationMethod->name ?? 'N/A' }}</span></div>
                                <div class="font-weight-bold text-dark mb-1" style="font-size:0.85rem;">
                                    ₦{{ number_format($asset->current_value, 2) }} 
                                    <span class="text-muted font-weight-normal" style="font-size:0.7rem;">(Value)</span>
                                </div>
                                <div>
                                    @if($asset->next_depreciation_date)
                                        @php $isOverdue = $asset->next_depreciation_date->isPast(); @endphp
                                        <span class="badge {{ $isOverdue ? 'badge-soft-danger' : 'badge-soft-warning' }}">
                                            <i class="far fa-calendar-alt mr-1"></i> {{ $asset->next_depreciation_date->format('d M, Y') }}
                                        </span>
                                    @else
                                        <span class="text-muted" style="font-size:0.85rem;">N/A</span>
                                    @endif
                                </div>
                            </td>
                            <td class="py-3 align-middle text-right">
                                <span class="font-weight-bold text-danger d-block" style="font-size:1.05rem;">
                                    ₦{{ number_format($asset->depreciation_amount, 2) }}
                                </span>
                                <div class="text-muted mt-1" style="font-size:0.65rem; white-space: normal;">
                                    ({{ number_format($asset->purchase_cost,2) }} − {{ number_format($asset->salvage_value,2) }}) ÷ {{ $asset->useful_life }}
                                </div>
                            </td>
                            <td class="pr-4 py-3 align-middle text-center">
                                <button type="button"
                                        class="btn btn-sm btn-process-single shadow-none font-weight-bold"
                                        data-asset-id="{{ $asset->id }}"
                                        data-asset-tag="{{ $asset->asset_tag }}"
                                        data-asset-name="{{ $asset->name }}"
                                        data-amount="₦{{ number_format($asset->depreciation_amount, 2) }}"
                                        data-url="{{ route('depreciations.asset.process', $asset->id) }}"
                                        style="background: linear-gradient(135deg, #34d399 0%, #10b981 100%); color:#fff; border:none; border-radius:6px; padding: 6px 16px; font-size:0.8rem; height: auto;">
                                    <i class="fas fa-play mr-1"></i> Process
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="fas fa-inbox fa-3x mb-3 d-block" style="opacity:.3;"></i>
                                No assets found for this category.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                    @if($assets->isNotEmpty())
                    <tfoot>
                        <tr style="background: #f8f9fc;">
                            <th colspan="3" class="text-right pr-3 py-3 border-0 text-muted text-uppercase" style="font-size:0.78rem;letter-spacing:.05em;">
                                Total Depreciable Amount:
                            </th>
                            <th class="text-right py-3 border-0">
                                <span class="text-danger font-weight-bold" style="font-size:1.15rem;">
                                    ₦{{ number_format($assets->sum('depreciation_amount'), 2) }}
                                </span>
                            </th>
                            <th class="pr-4 border-0"></th>
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        </div>

        <div class="card-footer bg-white border-0 py-3">
            <button onclick="window.print()" class="btn btn-outline-info shadow-none">
                <i class="fas fa-print mr-1"></i> Print
            </button>
        </div>
    </div>
</div>

{{-- Hidden form for process-all (POST) --}}
<form id="form-process-all" method="POST" style="display:none;">
    @csrf
</form>
@stop

@section('css')
<style>
    .modern-table thead tr {
        background: #f8f9fc;
        border-bottom: 2px solid #e9ecef;
    }
    .modern-table tbody tr {
        border-bottom: 1px solid #f0f2f5;
        transition: background 0.15s ease;
    }
    .modern-table tbody tr:hover {
        background: #f5f7ff !important;
    }
    .btn-gradient-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #fff;
        border: none;
        border-radius: 8px;
        transition: opacity 0.2s ease, transform 0.1s ease;
    }
    .btn-gradient-success:hover {
        color: #fff;
        opacity: 0.9;
        transform: translateY(-1px);
    }
    .icon-circle {
        width: 40px; height: 40px;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    .badge-soft-info {
        background: #e0f0ff; color: #0c67b5;
        font-size: 0.75rem; padding: 4px 8px; border-radius: 5px;
    }
    .badge-soft-warning {
        background: #fff8e1; color: #b45309;
        font-size: 0.75rem; padding: 4px 8px; border-radius: 5px;
    }
    .badge-soft-danger {
        background: #fee2e2; color: #b91c1c;
        font-size: 0.75rem; padding: 4px 8px; border-radius: 5px;
    }
    .info-badge {
        display: inline-flex; align-items: center; gap: 6px;
        background: #fff; border: 1px solid #e9ecef;
        border-radius: 8px; padding: 6px 14px;
        font-size: 0.88rem;
    }
    .badge-dot {
        display: inline-block; width: 8px; height: 8px;
        border-radius: 50%;
    }
</style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
(function(){
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // ── Session Notifications ────────────────────────────────────────────────
    @if(Session::has('success'))
        Swal.fire({
            icon: 'success',
            title: 'Success!',
            text: `{!! Session::get('success') !!}`,
            confirmButtonColor: '#10b981',
        });
    @endif

    @if(Session::has('error'))
        Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: `{!! Session::get('error') !!}`,
            confirmButtonColor: '#e3342f',
        });
    @endif

    // ── Process Single Asset ──────────────────────────────────────────────────
    document.querySelectorAll('.btn-process-single').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const assetTag  = this.dataset.assetTag;
            const assetName = this.dataset.assetName;
            const amount    = this.dataset.amount;
            const url       = this.dataset.url;
            const row       = this.closest('tr');

            Swal.fire({
                title: 'Process Depreciation?',
                html: `<p class="mb-1">Are you sure you want to process depreciation for:</p>
                       <p class="font-weight-bold text-dark">${assetName} <span class="text-primary">(${assetTag})</span></p>
                       <p class="mb-0">Depreciation Amount: <strong class="text-danger">${amount}</strong></p>
                       <p class="text-muted mt-2" style="font-size:0.8rem;">This action <strong>cannot be undone</strong>.</p>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-play mr-1"></i> Yes, Process',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#10b981',
                cancelButtonColor: '#6c757d',
                reverseButtons: true,
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept':       'application/json',
                        }
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (!data.success) {
                            Swal.showValidationMessage(data.message);
                        }
                        return data;
                    })
                    .catch(() => {
                        Swal.showValidationMessage('Request failed. Please try again.');
                    });
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then(result => {
                if (result.isConfirmed && result.value && result.value.success) {
                    Swal.fire({
                        title: 'Done!',
                        html: result.value.message,
                        icon: 'success',
                        confirmButtonColor: '#10b981',
                    }).then(() => {
                        // Fade out and remove the processed row
                        row.style.transition = 'opacity 0.4s ease';
                        row.style.opacity = '0';
                        setTimeout(() => row.remove(), 400);
                    });
                }
            });
        });
    });

    // ── Process All ──────────────────────────────────────────────────────────
    const btnAll = document.getElementById('btn-process-all');
    if (btnAll) {
        btnAll.addEventListener('click', function() {
            const catName = this.dataset.categoryName;
            const count   = this.dataset.count;
            const url     = this.dataset.url;

            Swal.fire({
                title: 'Process All?',
                html: `<p>You are about to process depreciation for <strong>${count} asset(s)</strong> in:</p>
                       <p class="font-weight-bold text-primary" style="font-size:1.1rem;">${catName}</p>
                       <p class="text-muted" style="font-size:0.82rem;">This action <strong>cannot be undone</strong>.</p>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-cogs mr-1"></i> Yes, Process All',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#059669',
                cancelButtonColor: '#6c757d',
                reverseButtons: true,
            }).then(result => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while the depreciation is being processed.',
                        icon: 'info',
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    const form = document.getElementById('form-process-all');
                    form.action = url;
                    form.submit();
                }
            });
        });
    }

    // ── Live Search ──────────────────────────────────────────────────────────
    const searchInput  = document.getElementById('asset-search');
    const clearBtn     = document.getElementById('btn-clear-search');
    const searchCount  = document.getElementById('search-count');
    const totalRows    = document.querySelectorAll('#asset-table-body tr.asset-row').length;

    function filterTable() {
        const query = searchInput.value.trim().toLowerCase();
        const rows  = document.querySelectorAll('#asset-table-body tr.asset-row');
        let visible = 0;

        rows.forEach(row => {
            const text = row.querySelector('td:nth-child(2)').innerText.toLowerCase();
            const match = !query || text.includes(query);
            row.style.display = match ? '' : 'none';
            if (match) visible++;
        });

        // No-results row
        let noRow = document.getElementById('no-search-results');
        if (visible === 0) {
            if (!noRow) {
                noRow = document.createElement('tr');
                noRow.id = 'no-search-results';
                noRow.innerHTML = `<td colspan="5" class="text-center py-4 text-muted"><i class="fas fa-search mr-2"></i>No assets match "${searchInput.value}"</td>`;
                document.getElementById('asset-table-body').appendChild(noRow);
            } else {
                noRow.querySelector('td').innerHTML = `<i class="fas fa-search mr-2"></i>No assets match "${searchInput.value}"`;
                noRow.style.display = '';
            }
        } else if (noRow) {
            noRow.style.display = 'none';
        }

        // Count indicator
        if (query) {
            searchCount.textContent = `${visible} of ${totalRows} shown`;
            clearBtn.classList.remove('d-none');
        } else {
            searchCount.textContent = '';
            clearBtn.classList.add('d-none');
        }
    }

    searchInput.addEventListener('input', filterTable);
    clearBtn.addEventListener('click', function() {
        searchInput.value = '';
        filterTable();
        searchInput.focus();
    });
})();
</script>
@stop