@extends('admin.admin_dashboard')

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

        {{-- Page Header --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                    <div>
                        <h3 class="mb-1">Provident Fund Opening Balance</h3>
                        <p class="text-muted mb-0">
                            Employee provident fund opening balance manage and review from one place.
                        </p>
                    </div>
                    <div>
                        <span class="badge bg-primary px-3 py-2">
                            Total Records: {{ $transactions->total() }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Alerts --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>Success!</strong> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>Please fix the following issues:</strong>
                <ul class="mb-0 mt-2 ps-3">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- এখানে align-items-start use করা হয়েছে যাতে left এবং right column equal height না নেয় --}}
        <div class="row align-items-start">

            {{-- Left Side: Add Opening Balance Form --}}
            {{-- এখানে align-self-start use করা হয়েছে যাতে এই column নিজের content height অনুযায়ী থাকে --}}
            <div class="col-xl-4 col-lg-5 align-self-start">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom">
                        <div class="d-flex align-items-center">
                            <div class="me-2">
                                <span class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                                      style="width: 32px; height: 32px; pointer-events: none;">
                                    <i class="fas fa-plus"></i>
                                </span>
                            </div>
                            <div>
                                <h5 class="mb-0">Add Opening Balance</h5>
                                <small class="text-muted">Create a new opening balance entry</small>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <form action="{{ route('admin.provident-fund.adjustments.store') }}" method="POST">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label fw-semibold">Select Employee <span class="text-danger">*</span></label>
                                <select name="employee_id" class="form-control" required>
                                    <option value="">-- Select Employee --</option>
                                    @foreach($employees as $emp)
                                        <option value="{{ $emp->id }}" {{ old('employee_id') == $emp->id ? 'selected' : '' }}>
                                            {{ $emp->name }} ({{ $emp->e_id }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">Amount <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number"
                                           step="0.01"
                                           name="amount"
                                           class="form-control"
                                           value="{{ old('amount') }}"
                                           placeholder="Enter opening balance"
                                           required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">Note</label>
                                <textarea name="note"
                                          rows="4"
                                          class="form-control"
                                          placeholder="e.g. Imported from old system">{{ old('note') }}</textarea>
                            </div>

                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i> Save Opening Balance
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Right Side: Records Table --}}
            <div class="col-xl-8 col-lg-7 mt-4 mt-lg-0">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom">
                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                            <div>
                                <h5 class="mb-0">Opening Balance History</h5>
                                <small class="text-muted">All provident fund opening balance records</small>
                            </div>
                        </div>
                    </div>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover table-bordered align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 13%;" class="text-center">Date</th>
                                        <th style="width: 30%;">Employee</th>
                                        <th style="width: 16%;" class="text-end">Amount</th>
                                        <th style="width: 16%;" class="text-center">Type</th>
                                        <th>Note</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($transactions as $txn)
                                        @php
                                            $employeeName = $txn->employee->name ?? $txn->teacher->name ?? 'N/A';
                                            $employeeCode = $txn->employee->e_id ?? $txn->teacher->teacher_code ?? null;
                                        @endphp

                                        <tr>
                                            <td class="text-center">
                                                <div class="fw-semibold">
                                                    {{ optional($txn->performed_at)->format('d M Y') ?? '-' }}
                                                </div>
                                            </td>

                                            <td>
                                                <div class="fw-semibold text-dark">
                                                    {{ $employeeName }}
                                                </div>
                                                @if($employeeCode)
                                                    <small class="text-muted d-block mt-1">
                                                        Employee ID: {{ $employeeCode }}
                                                    </small>
                                                @endif
                                            </td>

                                            <td class="text-end">
                                                <span class="fw-bold text-success fs-6">
                                                    ৳ {{ number_format((float)($txn->amount ?? 0), 2) }}
                                                </span>
                                            </td>

                                            <td class="text-center">
                                                <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2">
                                                    Opening Balance
                                                </span>
                                            </td>

                                            <td>
                                                @if(!empty($txn->note))
                                                    <span class="text-dark">{{ $txn->note }}</span>
                                                @else
                                                    <span class="text-muted">No note added</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-5">
                                                <div class="d-flex flex-column align-items-center justify-content-center">
                                                    <div class="mb-3">
                                                        <i class="fas fa-folder-open text-muted" style="font-size: 42px;"></i>
                                                    </div>
                                                    <h6 class="mb-1">No Opening Balance Records Found</h6>
                                                    <p class="text-muted mb-0">
                                                        Add a new provident fund opening balance to see records here.
                                                    </p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @if($transactions->hasPages())
                        <div class="card-footer bg-white border-top">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                <small class="text-muted">
                                    Showing {{ $transactions->firstItem() ?? 0 }} to {{ $transactions->lastItem() ?? 0 }}
                                    of {{ $transactions->total() }} entries
                                </small>
                                <div>
                                    {{ $transactions->links() }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>
@endsection