@extends('layouts.app')
@section('breadcrumb')
<div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
    <h4 class="mb-sm-0">Disbursements &mdash; {{ \Carbon\Carbon::parse($date)->format('D, d M Y') }}</h4>
    <div class="page-title-right">
        <ol class="breadcrumb m-0">
            <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ url('disbursements') }}">Disbursements</a></li>
            <li class="breadcrumb-item active">Create</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div>
            <h5 class="mb-0">
                <i class="fas fa-calendar-alt text-primary me-2"></i>
                {{ \Carbon\Carbon::parse($date)->format('l, d F Y') }}
            </h5>
        </div>
        @php
            $approvedDisbursements = $disbursements->where('status', 'Approved');
            $pendingDisbursements  = $disbursements->where('status', 'Pending');
            $hasApproved = $approvedDisbursements->count() > 0;
        @endphp
        @if($hasApproved)
            <span class="badge bg-success fs-6">
                <i class="fas fa-check-circle me-1"></i>
                {{ $approvedDisbursements->count() }} Approved Transaction(s)
            </span>
        @endif
    </div>

    <div class="card-body">

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                <i class="fas fa-check-circle"></i> {{ 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">
                <i class="fas fa-exclamation-circle"></i>
                @foreach($errors->all() as $error)
                    {{ $error }}
                @endforeach
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- ======================================================
             APPROVED TRANSACTIONS — READ-ONLY, ALWAYS SHOWN FIRST
             ====================================================== --}}
        @if($hasApproved)
        <div class="mb-4">
            <h6 class="text-success fw-bold mb-3">
                <i class="fas fa-lock me-1"></i> Approved Transactions (Read-Only)
            </h6>
            <div class="table-responsive">
                <table class="table table-bordered table-sm align-middle">
                    <thead class="table-success">
                        <tr>
                            <th>#</th>
                            <th>Personnel</th>
                            <th>Supplier</th>
                            <th>Amount</th>
                            <th>Reason</th>
                            <th>Balance After</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($approvedDisbursements as $approved)
                        <tr class="table-light">
                            <td>{{ $approved->orderNo }}</td>
                            <td>{{ $approved->personel->name ?? '-' }}</td>
                            <td>{{ $approved->supplier->name ?? '-' }}</td>
                            <td class="text-end fw-bold">{{ number_format($approved->amount, 2) }}</td>
                            <td>{{ $approved->reason }}</td>
                            <td class="text-end">{{ number_format($approved->balance, 2) }}</td>
                            <td>
                                <span class="badge bg-success">Approved</span>
                            </td>
                        </tr>
                        @endforeach
                        <tr class="table-success fw-bold">
                            <td colspan="3" class="text-end">Approved Sub-Total:</td>
                            <td class="text-end">{{ number_format($approvedDisbursements->sum('amount'), 2) }}</td>
                            <td colspan="3"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <hr class="border-2 border-success opacity-50">
        @endif

        {{-- ======================================================
             NEW / PENDING TRANSACTIONS — EDITABLE REPEATER FORM
             ====================================================== --}}
        <h6 class="fw-bold mb-3">
            <i class="fas fa-edit me-1 text-primary"></i>
            {{ $hasApproved ? 'Add / Edit Pending Transactions' : 'New Disbursements' }}
        </h6>

        <form action="{{ url('disbursements') }}" method="POST" id="disbursementForm">
            @csrf
            <input type="hidden" name="date" value="{{ $date }}">

            {{-- Pass approved items back as hidden JSON so the controller can skip them --}}
            @foreach($approvedDisbursements as $approved)
                <input type="hidden"
                       name="items[]"
                       value='{{ json_encode([
                           "personel_id" => $approved->personel_id,
                           "supplier_id" => $approved->supplier_id,
                           "amount"      => $approved->amount,
                           "reason"      => $approved->reason,
                           "status"      => "Approved"
                       ]) }}'>
            @endforeach

            <div class="repeater">
                <div class="table-responsive">
                    <table class="table table-bordered align-middle">
                        <thead class="table-light">
                            <tr>
                                <th width="28%">Personnel &amp; Reason</th>
                                <th width="28%">Supplier</th>
                                <th width="20%">Amount</th>
                                <th width="10%" class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody data-repeater-list="items">
                            <tr data-repeater-item>
                                <td>
                                    <select class="form-control form-select select2 personel_id" name="personel_id" required>
                                        <option value="">Select Personnel</option>
                                        @foreach($personels as $personel)
                                            <option value="{{ $personel->id }}">{{ $personel->name }}</option>
                                        @endforeach
                                    </select>
                                    <textarea name="reason"
                                              class="form-control reason mt-2"
                                              placeholder="Reason for disbursement"
                                              rows="2"></textarea>
                                </td>
                                <td>
                                    <select class="form-control form-select select2 supplier_id" name="supplier_id" required>
                                        <option value="">Select Supplier</option>
                                        @foreach($suppliers as $supplier)
                                            <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="number"
                                           name="amount"
                                           class="form-control amount"
                                           placeholder="0.00"
                                           step="0.01"
                                           min="0"
                                           required>
                                    {{-- status hidden — new items are always Pending --}}
                                    <input type="hidden" name="status" value="Pending">
                                </td>
                                <td class="text-center">
                                    <button type="button" data-repeater-delete class="btn btn-sm btn-danger">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <button type="button" data-repeater-create class="btn btn-primary btn-sm mb-3">
                    <i class="fas fa-plus me-1"></i> Add Row
                </button>
            </div>

            {{-- Grand Total --}}
            <div class="row justify-content-end mt-3">
                <div class="col-md-4">
                    @if($hasApproved)
                    <div class="mb-2">
                        <label class="form-label text-success fw-bold">Approved Sub-Total:</label>
                        <input type="text"
                               id="approved-total"
                               class="form-control text-end fw-bold"
                               value="{{ number_format($approvedDisbursements->sum('amount'), 2) }}"
                               disabled>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">New Pending Sub-Total:</label>
                        <input type="text" id="pending-total" class="form-control text-end" disabled>
                    </div>
                    @endif
                    <div class="mb-2">
                        <label class="form-label fw-bold">Grand Total:</label>
                        <input type="text" id="grand-total" class="form-control text-end fw-bold bg-light" disabled>
                    </div>
                </div>
            </div>

            <div class="d-flex align-items-center justify-content-between mt-3">
                <a href="{{ url('disbursements') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i> Back
                </a>
                <button type="submit" class="btn btn-success" id="saveBtn">
                    <i class="fas fa-save me-1"></i> Save Disbursements
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('customcss')
<style>
    .table td, .table th { vertical-align: middle; }
    .repeater .select2-container { width: 100% !important; }
    textarea.form-control { resize: vertical; min-height: 60px; }
</style>
@endsection

@section('customjs')
<script>
$(document).ready(function () {

    var approvedTotal = {{ $approvedDisbursements->sum('amount') }};

    // ── Repeater setup ────────────────────────────────────────────────────────
    var $repeater = $('.repeater').repeater({
        initEmpty: true,
        show: function () {
            $(this).slideDown();
            // Re-init Select2 inside new row
            $(this).find('.select2').select2({ width: '100%' });
            $('.select2-container').remove();
                $('.select2').select2()
            bindEvents($(this));
            calculateTotals();
        },
        hide: function (deleteElement) {
            $(this).slideUp(function () {
                $(this).remove();
                calculateTotals();
            });
            // slideUp callback receives the function, call deleteElement separately
            deleteElement();
        }
    });

    // ── Pre-populate pending rows (from old() or existing pending records) ───
    @php
        $pendingForJs = $pendingDisbursements->map(fn($d) => [
            'personel_id' => (string) $d->personel_id,
            'supplier_id' => (string) $d->supplier_id,
            'amount'      => $d->amount,
            'reason'      => $d->reason,
            'status'      => $d->status,
        ])->values()->toArray();
    @endphp

    @if(old('items'))
        // Restore from validation failure (old input)
        var oldItems = @json(old('items'));
        var pendingOld = oldItems.filter(function(i) {
            var parsed = (typeof i === 'string') ? JSON.parse(i) : i;
            return parsed.status !== 'Approved';
        });
        if (pendingOld.length > 0) {
            $repeater.setList(pendingOld.map(function(i) {
                return (typeof i === 'string') ? JSON.parse(i) : i;
            }));
        } else {
            $repeater.setList([{}]);
        }
    @elseif(count($pendingForJs) > 0)
        $repeater.setList(@json($pendingForJs));
    @else
        // Start with one blank row
        $repeater.setList([{}]);
    @endif

    // Init Select2 & events on all existing rows
    $('.repeater [data-repeater-item]').each(function () {
        $(this).find('.select2').select2({ width: '100%' });
        bindEvents($(this));
    });

    calculateTotals();

    // ── Event binding for each row ────────────────────────────────────────────
    function bindEvents(item) {
        item.find('.amount').on('input', function () {
            calculateTotals();
        });
    }

    // ── Totals calculation ────────────────────────────────────────────────────
    function calculateTotals() {
        var pendingTotal = 0;
        $('.repeater [data-repeater-item] .amount').each(function () {
            pendingTotal += parseFloat($(this).val()) || 0;
        });

        var grandTotal = approvedTotal + pendingTotal;

        $('#pending-total').val(pendingTotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
        $('#grand-total').val(grandTotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
    }

    // ── Save guard: warn if no pending rows have been filled ─────────────────
    $('#disbursementForm').on('submit', function () {
        var hasRows = false;
        $('.repeater [data-repeater-item] .amount').each(function () {
            if (parseFloat($(this).val()) > 0) hasRows = true;
        });
        if (!hasRows) {
            if (!confirm('No new pending amounts entered. Save anyway?')) {
                return false;
            }
        }
        $('#saveBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Saving...');
    });

    // ── Auto-hide alerts ──────────────────────────────────────────────────────
    setTimeout(function () { $('.alert').fadeOut('slow'); }, 5000);
});
</script>
@endsection