@extends('member-new')

@push('head-script')
    <style>
        /* Full-width page header (base layout caps it at col-md-9) */
        .content-header .content-header-left { flex: 0 0 100%; max-width: 100%; width: 100%; }

        /* Clean, minimal table */
        #declTable { font-size: 0.875rem; margin-bottom: 0; }
        #declTable thead th {
            font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
            color: #82868b; background: transparent; border: 0; border-bottom: 1.5px solid #ebe9f1;
            padding: 0.65rem 0.85rem; white-space: nowrap;
        }
        #declTable tbody td { border: 0; border-bottom: 1px solid #f4f3f8; padding: 0.7rem 0.85rem; vertical-align: middle; color: #5e5873; }
        #declTable tbody tr:hover { background: #fafafe; }
        #declTable .amt { font-variant-numeric: tabular-nums; }
        .fy-pill { font-weight: 600; color: #4b465c; }
        .act-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
        .empty-wrap { padding: 2.5rem 1rem; text-align: center; color: #b9b9c3; }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12 d-flex align-items-center gap-2">
            <h2 class="content-header-title mb-0 text-nowrap">My Declarations</h2>
            <div class="breadcrumb-wrapper flex-grow-1">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="/member/{{ $alias }}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/member/{{ $alias }}/tdx/dashboard">TDS</a></li>
                    <li class="breadcrumb-item active">Declarations</li>
                </ol>
            </div>
            @if($windowOpen ?? false)
                <div class="d-flex flex-row-reverse gap-1 ms-auto text-nowrap">
                    <a href="/member/{{ $alias }}/tdx/my-declarations/create" class="btn btn-success btn-sm">
                        <i data-feather="plus" class="me-25" style="width:14px;height:14px;"></i> New Declaration
                    </a>
                </div>
            @endif
        </div>
    </div>
@endpush

@section('content')
    <section id="employee-declarations" class="mb-3 pb-2">

        <div class="row">
            <div class="col-12">
                @foreach(['status' => 'success', 'info' => 'info', 'error' => 'danger'] as $key => $variant)
                    @if(session($key))
                        <div class="alert alert-{{ $variant }} alert-dismissible fade show" role="alert">
                            <div class="alert-body">{{ session($key) }}</div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                @endforeach

                @if(!($windowOpen ?? false))
                    <div class="alert alert-warning" role="alert">
                        <div class="alert-body d-flex align-items-center">
                            <i data-feather="alert-triangle" class="me-75" style="width:18px;height:18px;"></i>
                            <span><strong>Declaration window is currently closed.</strong> You cannot create or modify declarations right now. Please contact your HR/Admin for the schedule.</span>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table" id="declTable">
                        <thead>
                            <tr>
                                <th>Financial Year</th>
                                <th>Regime</th>
                                <th>Type</th>
                                <th class="text-end">Total Declared</th>
                                <th class="text-end">Total Approved</th>
                                <th>Status</th>
                                <th>Last Updated</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($declarations as $declaration)
                                @php
                                    $statusColors = ['draft' => 'secondary', 'calculated' => 'warning', 'active' => 'success', 'rejected' => 'danger'];
                                    $canEdit = in_array($declaration->status, ['draft', 'calculated', 'rejected']) && ($windowOpen ?? false);
                                @endphp
                                <tr>
                                    <td><span class="fy-pill">{{ $declaration->financialYear->label ?? 'N/A' }}</span></td>
                                    <td>
                                        <span class="badge badge-light-{{ $declaration->regime === 'old' ? 'primary' : 'success' }}">
                                            {{ strtoupper($declaration->regime ?? 'N/A') }}
                                        </span>
                                    </td>
                                    <td>{{ ucfirst($declaration->declaration_type ?? 'Provisional') }}</td>
                                    <td class="text-end amt">&#8377; {{ number_format($declaration->total_declared_amount ?? 0, 0) }}</td>
                                    <td class="text-end amt">&#8377; {{ number_format($declaration->total_approved_amount ?? 0, 0) }}</td>
                                    <td>
                                        <span class="badge badge-light-{{ $statusColors[$declaration->status] ?? 'secondary' }}">
                                            {{ ucfirst($declaration->status ?? 'Draft') }}
                                        </span>
                                    </td>
                                    <td>{{ $declaration->updated_at ? $declaration->updated_at->format('d M Y') : '-' }}</td>
                                    <td class="text-end">
                                        <a href="/member/{{ $alias }}/tdx/my-declarations/{{ $declaration->id }}"
                                           class="btn btn-sm btn-outline-info act-btn" title="View">
                                            <i data-feather="eye" style="width:15px;height:15px;"></i>
                                        </a>
                                        @if($canEdit)
                                            <a href="/member/{{ $alias }}/tdx/my-declarations/{{ $declaration->id }}/edit"
                                               class="btn btn-sm btn-outline-primary act-btn" title="Edit">
                                                <i data-feather="edit-2" style="width:15px;height:15px;"></i>
                                            </a>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8">
                                        <div class="empty-wrap">
                                            <i data-feather="file-text" style="width:34px;height:34px;"></i>
                                            <p class="mt-1 mb-1">No declarations yet.</p>
                                            @if($windowOpen ?? false)
                                                <a href="/member/{{ $alias }}/tdx/my-declarations/create" class="btn btn-success btn-sm">
                                                    <i data-feather="plus" class="me-25" style="width:14px;height:14px;"></i> Submit Your First Declaration
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($declarations->hasPages())
                    <div class="mt-1">{{ $declarations->links() }}</div>
                @endif
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script>
        $(document).ready(function () {
            if (typeof feather !== 'undefined') feather.replace();
        });
    </script>
@endpush