@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <nav aria-label="breadcrumb" class="mb-2">
        <ol class="breadcrumb mb-0 small text-uppercase fw-bold letter-spacing-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-muted">Accountant</a></li>
            <li class="breadcrumb-item"><a href="{{ route('accountant.chart-of-accounts.index') }}" class="text-decoration-none text-muted">Chart of Accounts</a></li>
            <li class="breadcrumb-item active text-primary" aria-current="page">Bulk Update</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4 px-3">
        <div>
            <h2 class="h3 font-weight-bold text-dark mb-1">Bulk Update Accounts</h2>
            <p class="text-muted small mb-0">Apply changes to multiple accounts in your Chart of Accounts.</p>
        </div>
        <a href="{{ route('accountant.chart-of-accounts.index') }}" class="btn btn-outline-secondary rounded-3 px-4">
            <i class="fas fa-arrow-left me-2"></i> Back to List
        </a>
    </div>

    <!-- Filters -->
    <div class="card border-0 shadow-sm rounded-4 mb-4 mx-3">
        <div class="card-body p-3">
            <form method="GET" action="{{ route('accountant.bulk-update.index') }}" class="row g-3 align-items-center">
                <div class="col-md-3">
                    <select name="type" class="form-select border-0 bg-light rounded-3">
                        <option value="">All Types</option>
                        <option value="Asset" {{ request('type') == 'Asset' ? 'selected' : '' }}>Asset</option>
                        <option value="Liability" {{ request('type') == 'Liability' ? 'selected' : '' }}>Liability</option>
                        <option value="Equity" {{ request('type') == 'Equity' ? 'selected' : '' }}>Equity</option>
                        <option value="Income" {{ request('type') == 'Income' ? 'selected' : '' }}>Income</option>
                        <option value="Expense" {{ request('type') == 'Expense' ? 'selected' : '' }}>Expense</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="status" class="form-select border-0 bg-light rounded-3">
                        <option value="">All Statuses</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100 rounded-3">Filter</button>
                </div>
                @if(request()->anyFilled(['type', 'status']))
                <div class="col-md-2">
                    <a href="{{ route('accountant.bulk-update.index') }}" class="btn btn-link text-muted small text-decoration-none">Clear Filters</a>
                </div>
                @endif
            </form>
        </div>
    </div>

    @if(session('error'))
        <div class="alert alert-danger mx-3 border-0 shadow-sm rounded-3 mb-4">
            <i class="fas fa-exclamation-circle me-2"></i> {{ session('error') }}
        </div>
    @endif

    <!-- Bulk Actions Toolbar (Floating/Contextual) -->
    <div id="bulk-toolbar" class="card border-0 shadow-lg rounded-4 mb-4 mx-3 bg-primary text-white d-none sticky-top" style="top: 20px; z-index: 1020;">
        <div class="card-body py-3 px-4 d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-3">
                <span class="fw-bold"><span id="selected-count">0</span> accounts selected</span>
                <div class="vr bg-white opacity-25"></div>
                <form id="bulk-form" action="{{ route('accountant.bulk-update.store') }}" method="POST" class="d-flex align-items-center gap-2">
                    @csrf
                    <input type="hidden" name="action" id="bulk-action-input">
                    <!-- This will hold the IDs dynamically via JS -->
                    <div id="selected-ids-container"></div>
                    
                    <select name="new_type" id="new-type-select" class="form-select form-select-sm border-0 d-none" style="width: 150px;">
                        <option value="">New Type...</option>
                        <option value="Asset">Asset</option>
                        <option value="Liability">Liability</option>
                        <option value="Equity">Equity</option>
                        <option value="Income">Income</option>
                        <option value="Expense">Expense</option>
                    </select>
                    
                    <button type="button" onclick="applyAction('change_type')" class="btn btn-sm btn-light fw-bold px-3 rounded-pill action-toggle">Change Type</button>
                    <button type="button" onclick="applyAction('activate')" class="btn btn-sm btn-outline-light fw-bold px-3 rounded-pill border-2">Activate</button>
                    <button type="button" onclick="applyAction('deactivate')" class="btn btn-sm btn-outline-light fw-bold px-3 rounded-pill border-2">Deactivate</button>
                    <button type="button" onclick="applyAction('delete')" class="btn btn-sm btn-danger fw-bold px-3 rounded-pill shadow-sm">Delete</button>
                </form>
            </div>
            <button type="button" onclick="deselectAll()" class="btn btn-sm btn-link text-white text-decoration-none p-0 fw-bold">✕ Cancel</button>
        </div>
    </div>

    <!-- Accounts Table -->
    <div class="card border-0 shadow-sm rounded-4 mx-3 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light bg-opacity-50">
                    <tr>
                        <th class="ps-4 border-0" style="width: 40px;">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="check-all">
                            </div>
                        </th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Account Name</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Code</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Type</th>
                        <th class="border-0 small fw-bold text-muted text-uppercase">Status</th>
                        <th class="text-end pe-4 border-0 small fw-bold text-muted text-uppercase">Current Balance</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($accounts as $account)
                    <tr class="account-row" data-id="{{ $account->id }}">
                        <td class="ps-4">
                            <div class="form-check">
                                <input class="form-check-input account-check" type="checkbox" value="{{ $account->id }}">
                            </div>
                        </td>
                        <td>
                            <div class="fw-bold text-dark">{{ $account->name }}</div>
                        </td>
                        <td><span class="badge bg-light text-dark border">{{ $account->code }}</span></td>
                        <td>
                            <span class="badge bg-opacity-10 text-{{ $account->type == 'Asset' ? 'primary' : ($account->type == 'Liability' ? 'warning' : 'info') }} border border-{{ $account->type == 'Asset' ? 'primary' : ($account->type == 'Liability' ? 'warning' : 'info') }} rounded-pill px-3">
                                {{ $account->type }}
                            </span>
                        </td>
                        <td>
                            @if($account->is_active)
                                <span class="text-success small fw-bold"><i class="fas fa-check-circle me-1"></i> Active</span>
                            @else
                                <span class="text-muted small fw-bold"><i class="fas fa-times-circle me-1"></i> Inactive</span>
                            @endif
                        </td>
                        <td class="text-end pe-4">
                            <span class="fw-bold text-dark pe-3">${{ number_format($account->balance, 2) }}</span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <div class="mb-3 text-muted opacity-25"><i class="fas fa-layer-group fa-4x"></i></div>
                            <h5 class="text-muted">No accounts matching criteria</h5>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    const checkAll = document.getElementById('check-all');
    const checkboxes = document.querySelectorAll('.account-check');
    const toolbar = document.getElementById('bulk-toolbar');
    const countDisplay = document.getElementById('selected-count');
    const container = document.getElementById('selected-ids-container');
    const typeSelect = document.getElementById('new-type-select');
    const bulkForm = document.getElementById('bulk-form');
    const bulkActionInput = document.getElementById('bulk-action-input');

    checkAll.addEventListener('change', function() {
        checkboxes.forEach(cb => cb.checked = this.checked);
        updateToolbar();
    });

    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateToolbar);
    });

    function updateToolbar() {
        const checked = document.querySelectorAll('.account-check:checked');
        const count = checked.length;
        
        if (count > 0) {
            toolbar.classList.remove('d-none');
            countDisplay.innerText = count;
            
            // Build hidden inputs for IDs
            container.innerHTML = Array.from(checked).map(cb => 
                `<input type="hidden" name="account_ids[]" value="${cb.value}">`
            ).join('');
        } else {
            toolbar.classList.add('d-none');
            checkAll.checked = false;
        }
    }

    function deselectAll() {
        checkboxes.forEach(cb => cb.checked = false);
        checkAll.checked = false;
        updateToolbar();
    }

    function applyAction(action) {
        if (action === 'change_type') {
            if (typeSelect.classList.contains('d-none')) {
                typeSelect.classList.remove('d-none');
                return;
            }
            if (!typeSelect.value) {
                alert('Please select a new account type.');
                return;
            }
        }
        
        if (!confirm(`Are you sure you want to apply "${action.replace('_', ' ')}" to the selected accounts?`)) {
            return;
        }

        bulkActionInput.value = action;
        bulkForm.submit();
    }
</script>

<style>
    .hover-elevate { transition: transform 0.2s; }
    .hover-elevate:hover { transform: translateY(-2px); }
    .sticky-top { transition: all 0.3s ease; }
</style>
@endsection