@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Investment Declarations</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/tdx/dashboard">TDS</a></li>
                    <li class="breadcrumb-item active">Declarations</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="tdx-declarations">
        {{-- Flash Messages --}}
        <div class="row">
            <div class="col-12">
                @if(session('status'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('status') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom p-1">
                        <div class="head-label">
                            <h6 class="mb-0">Declarations - FY {{ $fy }}</h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            <div class="dt-buttons d-inline-flex">
                                <div class="form-label-group me-2">
                                    <form>
                                        <input type="text" name="search" placeholder="Search" id="search"
                                            class="form-control" value="{{ request('search') }}">
                                    </form>
                                </div>
                                <button class="dt-button btn btn-primary btn-sm me-2" type="button"
                                    data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">
                                    <i data-feather='filter'></i>
                                </button>
                                <a href="/{{ $alias }}/tdx/declarations/create" class="btn btn-success btn-sm">
                                    <i data-feather="plus"></i> New Declaration
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-datatable">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Employee</th>
                                    <th>Employee Code</th>
                                    <th>Regime</th>
                                    <th>Declared Amount</th>
                                    <th>Approved Amount</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($declarations as $index => $declaration)
                                    <tr>
                                        <td>{{ $declarations->firstItem() + $index }}</td>
                                        <td>{{ $declaration->employee->name ?? 'N/A' }}</td>
                                        <td>{{ $declaration->employee->employee_code ?? '-' }}</td>
                                        <td>
                                            <span class="badge badge-light-{{ $declaration->regime === 'old' ? 'primary' : 'success' }}">
                                                {{ ucfirst($declaration->regime) }}
                                            </span>
                                        </td>
                                        <td>&#8377; {{ number_format($declaration->total_declared_amount, 2) }}</td>
                                        <td>&#8377; {{ number_format($declaration->total_approved_amount, 2) }}</td>
                                        <td>
                                            @php
                                                $statusColors = [
                                                    'draft' => 'secondary',
                                                    'submitted' => 'info',
                                                    'under_review' => 'warning',
                                                    'approved' => 'success',
                                                    'rejected' => 'danger',
                                                ];
                                                $color = $statusColors[$declaration->status] ?? 'secondary';
                                            @endphp
                                            <span class="badge badge-light-{{ $color }}">
                                                {{ ucwords(str_replace('_', ' ', $declaration->status)) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="d-flex gap-1">
                                                <a href="/{{ $alias }}/tdx/declarations/{{ $declaration->id }}/edit"
                                                   class="btn btn-sm btn-outline-primary" title="Edit">
                                                    <i data-feather="edit-2" class="font-small-4"></i>
                                                </a>
                                                <a href="/{{ $alias }}/tdx/declarations/{{ $declaration->id }}/preview"
                                                   class="btn btn-sm btn-outline-info" title="Preview">
                                                    <i data-feather="eye" class="font-small-4"></i>
                                                </a>
                                                {{-- TODO: Implement "Submit for Approval" for employees (future feature) --}}
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center py-2">No declarations found. Click "New Declaration" to create one.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($declarations->hasPages())
                        <div class="card-footer">
                            <div class="d-flex justify-content-center">
                                {{ $declarations->links() }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Offcanvas Filter --}}
    <form method="get" id="filter-form">
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
            <div class="offcanvas-header">
                <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div class="row">
                    <div class="col-md-12">
                        <label class="form-label">Employee</label>
                        <select name="employee_id" class="form-control mb-2">
                            <option value="">All</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" @if(request('employee_id')==$employee->id) selected @endif>{{ $employee->name }} ({{ $employee->employee_code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Employee Type</label>
                        <select name="employee_type" class="form-control mb-2">
                            <option value="">All</option>
                            <option value="employee" @if(request('employee_type')=='employee') selected @endif>Employee</option>
                            <option value="workman" @if(request('employee_type')=='workman') selected @endif>Workman</option>
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Department</label>
                        <select name="department_id" class="form-control mb-2">
                            <option value="">All</option>
                            @foreach($departments as $department)
                                <option value="{{ $department->id }}" @if(request('department_id')==$department->id) selected @endif>{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Designation</label>
                        <select name="designation_id" class="form-control mb-2">
                            <option value="">All</option>
                            @foreach($designations as $designation)
                                <option value="{{ $designation->id }}" @if(request('designation_id')==$designation->id) selected @endif>{{ $designation->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Regime</label>
                        <select name="regime" class="form-control mb-2">
                            <option value="">All</option>
                            <option value="old" @if(request('regime')=='old') selected @endif>Old</option>
                            <option value="new" @if(request('regime')=='new') selected @endif>New</option>
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-control mb-2">
                            <option value="">All</option>
                            <option value="draft" @if(request('status')=='draft') selected @endif>Draft</option>
                            <option value="submitted" @if(request('status')=='submitted') selected @endif>Submitted</option>
                            <option value="under_review" @if(request('status')=='under_review') selected @endif>Under Review</option>
                            <option value="approved" @if(request('status')=='approved') selected @endif>Approved</option>
                            <option value="active" @if(request('status')=='active') selected @endif>Active</option>
                            <option value="rejected" @if(request('status')=='rejected') selected @endif>Rejected</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center"
                    data-bs-dismiss="offcanvas" aria-label="Close">
                    <i data-feather='search' class="me-2"></i>Apply
                </button>
            </div>
        </div>
    </form>
@endsection

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