@extends('layouts.app')
@section('title', 'Bank Reconciliation')

@section('css')
<style>
    .reconcile-card {
        border-radius: 12px;
        border: none;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    .summary-card {
        border-radius: 12px;
        border: none;
        transition: transform 0.3s;
    }
    .summary-card:hover {
        transform: translateY(-5px);
    }
    .text-emerald { color: #10b981; }
    .text-rose { color: #f43f5e; }
    .bg-emerald-light { background-color: rgba(16, 185, 129, 0.1); }
    .bg-rose-light { background-color: rgba(244, 63, 94, 0.1); }
    .bg-sky-light { background-color: rgba(14, 165, 233, 0.1); }
</style>
@endsection

@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <x-breadcrumb :langArray="['account.account', 'Bank Reconciliation']"/>
        
        <!-- Selection & Summary Dashboard -->
        <div class="row g-3 mb-4">
            <div class="col-lg-3">
                <div class="card reconcile-card h-100">
                    <div class="card-body">
                        <label class="form-label fw-bold text-muted small text-uppercase">Account</label>
                        <select id="reconcile_account_id" class="form-select select2">
                            <option value="">Choose Bank/Cash Account</option>
                            @foreach($accounts as $account)
                                <option value="{{ $account->id }}" {{ $selected_account_id == $account->id ? 'selected' : '' }}>{{ $account->name }}</option>
                            @endforeach
                        </select>
                        
                        <label class="form-label fw-bold text-muted small text-uppercase mt-3">Filter</label>
                        <select id="reconcile_status" class="form-select">
                            <option value="all">All Transactions</option>
                            <option value="pending" selected>Pending Only</option>
                            <option value="cleared">Cleared Only</option>
                        </select>

                        <label class="form-label fw-bold text-muted small text-uppercase mt-3">From Date</label>
                        <input type="date" id="from_date" class="form-control" value="{{ date('Y-m-01') }}">

                        <label class="form-label fw-bold text-muted small text-uppercase mt-3">To Date</label>
                        <input type="date" id="to_date" class="form-control" value="{{ date('Y-m-t') }}">
                    </div>
                </div>
            </div>

            <!-- Dashboard Stats -->
            <div class="col-lg-9">
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="card summary-card bg-emerald-light h-100">
                            <div class="card-body text-center p-4">
                                <div class="avatar-md bg-emerald text-white rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                                    <i class="bx bx-check-double fs-4"></i>
                                </div>
                                <h6 class="text-emerald mb-1">Reconciled Balance</h6>
                                <h3 class="fw-bold mb-0"><span id="reconciled_balance">0.00</span> <small>{{ $currencySymbol }}</small></h3>
                                <small class="text-muted">Cleared Funds</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card summary-card bg-rose-light h-100">
                            <div class="card-body text-center p-4">
                                <div class="avatar-md bg-rose text-white rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                                    <i class="bx bx-time-five fs-4"></i>
                                </div>
                                <h6 class="text-rose mb-1">Uncleared Total</h6>
                                <h3 class="fw-bold mb-0"><span id="total_uncleared">0.00</span> <small>{{ $currencySymbol }}</small></h3>
                                <small class="text-muted">Pending Net</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card summary-card bg-sky-light h-100">
                            <div class="card-body p-4">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <small class="text-muted text-uppercase fw-bold">Uncleared In</small>
                                    <span class="text-success fw-bold"><span id="uncleared_in">0.00</span> {{ $currencySymbol }}</span>
                                </div>
                                <div class="d-flex align-items-center justify-content-between mb-3">
                                    <small class="text-muted text-uppercase fw-bold">Uncleared Out</small>
                                    <span class="text-danger fw-bold"><span id="uncleared_out">0.00</span> {{ $currencySymbol }}</span>
                                </div>
                                <hr class="my-2">
                                <div class="text-center">
                                    <small class="text-muted">Waiting for clearance</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card reconcile-card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table id="reconciliation-datatable" class="table table-hover align-middle mb-0" style="width:100%">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4">#</th>
                                <th>Date</th>
                                <th>Description / Note</th>
                                <th class="text-end">Debit (In)</th>
                                <th class="text-end">Credit (Out)</th>
                                <th class="text-center">Status</th>
                                <th class="text-center pe-4">Reconcile</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Loaded via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{ versionedAsset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ versionedAsset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
<script>
$(document).ready(function() {
    "use strict";

    $('.select2').select2({ theme: 'bootstrap4', width: '100%' });

    let table = $('#reconciliation-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('account.reconciliation.datatable.list') }}",
            data: function (d) {
                d.account_id = $('#reconcile_account_id').val();
                d.status = $('#reconcile_status').val();
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
            }
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, className: 'ps-4'},
            {data: 'date', name: 'transaction_date'},
            {data: 'description', name: 'note'},
            {data: 'debit', name: 'debit_amount', className: 'text-end text-emerald fw-bold'},
            {data: 'credit', name: 'credit_amount', className: 'text-end text-rose fw-bold'},
            {data: 'status', name: 'status', className: 'text-center'},
            {data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center pe-4'},
        ],
        order: [[0, 'desc']],
        pageLength: 25,
        drawCallback: function() {
            updateSummary();
        }
    });

    function updateSummary() {
        let accountId = $('#reconcile_account_id').val();
        if (!accountId) return;

        $.get("{{ route('account.reconciliation.get-summary') }}", { 
            account_id: accountId,
            from_date: $('#from_date').val(),
            to_date: $('#to_date').val()
        }, function(data) {
            $('#reconciled_balance').text(data.reconciled_balance);
            $('#total_uncleared').text(data.total_uncleared);
            $('#uncleared_in').text(data.uncleared_in);
            $('#uncleared_out').text(data.uncleared_out);
        });
    }

    $('#reconcile_account_id, #reconcile_status, #from_date, #to_date').change(function() {
        table.draw();
    });

    $(document).on('change', '.toggle-reconciliation', function() {
        let id = $(this).data('id');
        let status = $(this).is(':checked') ? 1 : 0;
        let checkbox = $(this);

        $.ajax({
            url: "{{ route('account.reconciliation.update') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                transaction_id: id,
                status: status
            },
            success: function(response) {
                iziToast.success({title: 'Success', message: response.message, position: 'topRight'});
                table.draw(false);
            },
            error: function(xhr) {
                checkbox.prop('checked', !status);
                iziToast.error({title: 'Error', message: 'Failed to update status'});
            }
        });
    });
});
</script>
@endsection