@extends('master.app')
@section('title', 'Employee Advance')

@section('body')
<main class="app-content">
    <section>
        <div class="card shadow-sm border-0">

            {{-- Header --}}
            <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                <div>
                    <h4 class="mb-0">Employee Advance</h4>
                    <small class="text-muted">
                        Advance of <strong>{{ $employee->name }}</strong>
                    </small>
                </div>

                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ route('employees.show', $employee->id) }}" class="btn btn-sm btn-outline-dark">
                        <i class="fa fa-arrow-left"></i> Back Profile
                    </a>

                    <a href="{{ route('employee_payment.report_show', $employee->id) }}"
                       class="btn btn-sm btn-outline-secondary">
                        <i class="fa fa-file-text-o"></i> Report
                    </a>

                    <button class="btn btn-sm btn-outline-primary" type="button"
                            data-mdb-toggle="collapse" data-mdb-target="#filterBox" aria-expanded="false">
                        <i class="fa fa-filter"></i> Filters
                    </button>

                    <a data-mdb-toggle="modal" data-mdb-target="#exampleModal"
                       class="btn btn-sm btn-primary text-light">
                        <i class="fa fa-plus"></i> Add Advance
                    </a>
                </div>
            </div>

            <div class="card-body">

                @include('general.valert')

                {{-- Quick Summary Cards --}}
                <div class="row g-3 mb-3">
                    <div class="col-md-3">
                        <div class="card border-0 shadow-0" style="background: rgba(13,110,253,.06); border-radius:16px;">
                            <div class="card-body">
                                <small class="text-muted">Filtered Records</small>
                                <div class="h5 mb-0">{{ $totalCount ?? 0 }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card border-0 shadow-0" style="background: rgba(25,135,84,.07); border-radius:16px;">
                            <div class="card-body">
                                <small class="text-muted">Filtered Total Amount</small>
                                <div class="h5 mb-0">{{ number_format((float)($totalAmount ?? 0), 2) }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card border-0 shadow-0" style="background: rgba(255,193,7,.12); border-radius:16px;">
                            <div class="card-body">
                                <small class="text-muted">Today</small>
                                <div class="h5 mb-0">{{ date('Y-m-d') }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card border-0 shadow-0" style="background: rgba(108,117,125,.08); border-radius:16px;">
                            <div class="card-body">
                                <small class="text-muted">Employee ID</small>
                                <div class="h5 mb-0">#{{ $employee->id }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Smart Filter Box (GET) --}}
                <div class="collapse @if(request()->filled('title') || request()->filled('payment') || (request()->filled('from_date') && request()->filled('to_date'))) show @endif" id="filterBox">
                    <div class="card border-0 mb-3" style="background:#f8fafc; border-radius:16px;">
                        <div class="card-body">
                            <form method="GET" action="{{ route('employee_payment.index', $employee->id) }}" class="row g-2 align-items-end">
                                <div class="col-md-4">
                                    <div class="form-outline">
                                        <input type="text" name="title" id="f_title"
                                               value="{{ request('title') }}"
                                               class="form-control">
                                        <label class="form-label" for="f_title">Title contains</label>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-outline">
                                        <input type="text" name="payment" id="f_payment"
                                               value="{{ request('payment') }}"
                                               class="form-control">
                                        <label class="form-label" for="f_payment">Payment equals</label>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label mb-1">From</label>
                                    <input type="date" name="from_date" value="{{ request('from_date') }}" class="form-control">
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label mb-1">To</label>
                                    <input type="date" name="to_date" value="{{ request('to_date') }}" class="form-control">
                                </div>

                                <div class="col-12 d-flex gap-2 mt-2">
                                    <button class="btn btn-sm btn-primary">
                                        <i class="fa fa-search"></i> Apply
                                    </button>

                                    <a href="{{ route('employee_payment.index', $employee->id) }}" class="btn btn-sm btn-outline-secondary">
                                        <i class="fa fa-refresh"></i> Reset
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Table --}}
                <div class="table-responsive">
                    <table class="table align-middle text-center table-striped">
                        <thead class="table-light">
                            <tr>
                                <th style="width:70px;">#</th>
                                <th>Title</th>
                                <th style="width:140px;">Date</th>
                                <th style="width:160px;">Payment</th>
                                <th style="width:140px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($payments as $row)
                                <tr>
                                    <td>{{ $payments->firstItem() + $loop->index }}</td>
                                    <td class="text-start">
                                        <div class="fw-semibold">{{ $row->title }}</div>
                                        <div class="small text-muted text-truncate" style="max-width:360px;">
                                            {{ $row->details }}
                                        </div>
                                    </td>
                                    <td>{{ $row->date }}</td>
                                    <td class="fw-semibold">{{ number_format((float)$row->payment, 2) }}</td>
                                    <td class="text-nowrap">
                                        <a href="{{ route('employee_payment.edit', $row->id) }}"
                                           class="btn btn-sm btn-light border shadow-0 me-1"
                                           data-mdb-toggle="tooltip" title="Edit">
                                            <i class="fa fa-pencil text-primary"></i>
                                        </a>

                                        {{-- NOTE: Better is DELETE form, but your route is GET. Keep this for now. --}}
                                        <a href="{{ route('employee_payment.delete', $row->id) }}"
                                           class="btn btn-sm btn-light border shadow-0"
                                           onclick="return confirm('Are you sure you want to delete this item?')"
                                           data-mdb-toggle="tooltip" title="Delete">
                                            <i class="fa fa-trash text-danger"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-muted py-4">No records found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div class="d-flex justify-content-end mt-3">
                    {{ $payments->links('pagination::bootstrap-4') }}
                </div>

            </div>
        </div>
    </section>
</main>

{{-- Keep your modals --}}
@include('HR.employees.advance.create-modal')
{{-- old filter modal not needed now --}}
{{-- @include('HR.employees.advance.filter-modal') --}}
@endsection

@section('pageJs')
<script type="text/javascript">
    $(".app-menu").removeClass("active");
    $("#nav_hri").addClass("active");
    $("#hri").addClass("is-expanded");
    $("#nav_emp_account").addClass("active");

    // Prevent double submit (good)
    $('form').submit(function() {
        $(this).find(':submit').attr('disabled', 'disabled');
        setTimeout(() => {
            $(this).find(':submit').attr('disabled', false);
        }, 1200);
    });
</script>
@endsection