@extends('admin.admin_dashboard')
@section('admin')

<div class="container-fluid py-4">
    <div class="card shadow-sm p-4 mb-4">
        <h3 class="mb-4 text-primary fw-bold">Bank Reconciliation</h3>

        {{-- Reconciliation Form --}}
        <form id="reconcile-form" method="POST" action="{{ route('reconciliation.check') }}">
            @csrf
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Select Month</label>
                    <input type="month" name="month" class="form-control" required>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">Bank Statement Closing Balance</label>
                    <input type="number" step="0.01" name="bank_balance" class="form-control" required>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">Bank Account</label>
                    <select name="account_id" class="form-select" required>
                        <option value="">-- Select Account --</option>
                        @foreach ($accounts as $account)
                            <option value="{{ $account->id }}">
                                {{ $account->name }} ({{ number_format($account->balance, 2) }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <input type="hidden" step="0.01" name="bank_charges" value="0">
                <input type="hidden" name="force" id="force" value="false" />
            </div>

            <div class="mt-4 text-end">
                <button type="button" class="btn btn-success btn-lg" id="submit-btn">
                    <i class="bx bx-check-circle me-1"></i> Reconcile
                </button>
            </div>
        </form>
    </div>

    {{-- Reconciled Months --}}
  <div class="card shadow-sm p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="text-primary fw-bold mb-0">Bank Reconciliations by Account</h4>

        {{-- Year Filter --}}
        <form method="GET" action="{{ route('bank.reconciliation.reconcile') }}" class="d-flex align-items-center gap-2">
            <label for="year" class="form-label fw-semibold mb-0">Filter by Year:</label>
            <select name="year" id="year" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                @php
                    $startYear = 2025;
                    $currentYear = now()->year;
                    $selectedYear = request('year', $currentYear);
                @endphp
                @for ($y = $startYear; $y <= $currentYear; $y++)
                    <option value="{{ $y }}" {{ $selectedYear == $y ? 'selected' : '' }}>{{ $y }}</option>
                @endfor
            </select>
        </form>
    </div>

    @if($reconciledMonths->count())
        <div class="accordion" id="accountsAccordion">
            @foreach ($reconciledMonths as $accountId => $months)
                @php $account = $months->first(); @endphp

                <div class="accordion-item mb-2 shadow-sm">
                    <h2 class="accordion-header" id="heading-{{ $accountId }}">
                        <button class="accordion-button collapsed" type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse-{{ $accountId }}"
                                aria-expanded="false"
                                aria-controls="collapse-{{ $accountId }}">
                            {{ $account->account_code }} — {{ $account->account_name }}
                        </button>
                    </h2>

                    <div id="collapse-{{ $accountId }}"
                         class="accordion-collapse collapse"
                         aria-labelledby="heading-{{ $accountId }}"
                         data-bs-parent="#accountsAccordion">
                        <div class="accordion-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover table-bordered mb-0">
                                    <thead class="table-light text-center">
                                        <tr>
                                            <th>Month</th>
                                            <th>Opening Balance</th>
                                            <th>Closing Balance</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
 <tbody>
@foreach ($months as $m)
    @php
        $monthCarbon = \Carbon\Carbon::createFromFormat('Y-m', $m->month);
        $monthYear = $monthCarbon->year;
        $monthLabel = $monthCarbon->format('F Y');
    @endphp
    @if ($monthYear == $selectedYear)
        <tr class="clickable-row" 
            data-account="{{ $accountId }}" 
            data-month="{{ $m->month }}" 
            style="cursor: pointer;">
            
            <td class="text-primary fw-semibold">{{ $monthLabel }}</td>
            <td class="text-end">{{ number_format($m->opening_balance ?? 0, 0) }}</td>
            <td class="text-end">{{ number_format($m->system_balance ?? 0, 0) }}</td>
            <td class="text-center">
                @if (!empty($m->status))
                    <span class="badge bg-success">{{ ucfirst($m->status) }}</span>
                @else
                    <span class="badge bg-secondary">N/A</span>
                @endif
            </td>
        </tr>
    @endif
@endforeach
</tbody>


                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="alert alert-info text-center">No reconciled months found.</div>
    @endif
</div>


</div>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.clickable-row').forEach(function (row) {
        row.addEventListener('click', function () {
            const accountId = this.dataset.account;
            const month = this.dataset.month;
            const year = month.split('-')[0]; // Extract year from "YYYY-MM"
            
            // Redirect to the details page (existing route)
            const url = `{{ route('bank.reconciliation.index') }}?bank_account_id=${accountId}&month=${month}&year=${year}`;
            window.location.href = url;
        });
    });
});
</script>
@endpush



<script>
$(document).ready(function () {
    function showResultPopup(data) {
        const htmlContent = `
            <p><b>Month:</b> ${data.month}</p>
            <p><b>System Balance:</b> ${Number(data.systemBalance).toLocaleString()}</p>
            <p><b>Bank Balance:</b> ${Number(data.bankBalance).toLocaleString()}</p>
            <p><b>Adjusted Bank Balance:</b> ${Number(data.adjustedBankBalance).toLocaleString()}</p>
            <p><b>Difference:</b> ${Number(data.difference).toLocaleString()}</p>
        `;
        Swal.fire({
            title: 'Reconciliation Result',
            html: htmlContent,
            icon: 'info',
            confirmButtonText: 'Close'
        });
    }

    $('#submit-btn').click(function (e) {
        e.preventDefault();
        const formData = $('#reconcile-form').serialize();

        $.ajax({
            url: "{{ route('reconciliation.check') }}",
            type: "POST",
            data: formData,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function (response) {
                if (response.status === 'exists') {
                    Swal.fire({
                        title: 'Already Reconciled',
                        text: response.message,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, Overwrite',
                        cancelButtonText: 'Cancel'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#force').val('true');
                            $('#submit-btn').click();
                        }
                    });
                } else if (response.status === 'success') {
                    Swal.fire({
                        title: 'Reconciled!',
                        text: response.message,
                        icon: 'success',
                        showCancelButton: true,
                        confirmButtonText: 'View Result',
                        cancelButtonText: 'Close'
                    }).then((result) => {
                        if (result.isConfirmed) showResultPopup(response);
                    });
                } else if (response.status === 'difference_not_zero') {
                    Swal.fire({
                        title: 'Difference Not Zero',
                        html: response.message + `<br><b>Difference:</b> ${Number(response.difference).toLocaleString()}`,
                        icon: 'error',
                        showCancelButton: true,
                        confirmButtonText: 'View Result',
                        cancelButtonText: 'Close'
                    }).then((result) => {
                        if (result.isConfirmed) showResultPopup(response);
                    });
                }
            },
            error: function () {
                Swal.fire('Error!', 'Something went wrong.', 'error');
            }
        });
    });
});
</script>



@endsection