@extends('layouts.app')

@section('title', 'Account Details - ' . $account->name)

@push('plugin-styles')
<link rel="stylesheet" href="{{ asset('theme/vendors/datatables.net-bs5/dataTables.bootstrap5.css') }}">
<link rel="stylesheet" href="{{ asset('theme/vendors/flatpickr/flatpickr.min.css') }}">
<link rel="stylesheet" href="{{ asset('theme/vendors/sweetalert2/sweetalert2.min.css') }}">
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Account Details</h5>
                    <a href="{{ route('accounts.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Back to Accounts
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h6 class="text-muted">Account Information</h6>
                        <table class="table table-sm">
                            <tr>
                                <th width="150">Account Name:</th>
                                <td>{{ $account->name }}</td>
                            </tr>
                            <tr>
                                <th>Chart of Account:</th>
                                <td>{{ $account->chartOfAccount ? $account->chartOfAccount->name : 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th>Contact Type:</th>
                                <td>{{ $account->contact ? ucfirst(str_replace('_', ' ', $account->contact->type)) : 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th>Contact Name:</th>
                                <td>{{ $account->contact ? $account->contact->name : 'N/A' }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted">Account Standing</h6>
                        <div class="row">
                            <div class="col-6">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h4 class="text-success">{{ $account->formatted_balance }}</h4>
                                        <small class="text-muted">Current Balance</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        @if($account->balance > 0)
                                            @if($account->contact && in_array($account->contact->type, ['customer']))
                                                <h4 class="text-warning">{{ $account->formatted_balance }}</h4>
                                                <small class="text-muted">Amount to Collect</small>
                                            @else
                                                <h4 class="text-danger">{{ $account->formatted_balance }}</h4>
                                                <small class="text-muted">Amount to Pay</small>
                                            @endif
                                        @elseif($account->balance < 0)
                                            @if($account->contact && in_array($account->contact->type, ['customer']))
                                                <h4 class="text-danger">{{ format_currency(abs($account->balance)) }}</h4>
                                                <small class="text-muted">Amount We Owe</small>
                                            @else
                                                <h4 class="text-success">{{ format_currency(abs($account->balance)) }}</h4>
                                                <small class="text-muted">Amount They Owe</small>
                                            @endif
                                        @else
                                            <h4 class="text-info">0.00</h4>
                                            <small class="text-muted">Settled</small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <div class="row text-center">
                                <div class="col-6">
                                    <strong>Total Debits:</strong><br>
                                    <span class="text-primary">{{ $account->formatted_total_debits }}</span>
                                </div>
                                <div class="col-6">
                                    <strong>Total Credits:</strong><br>
                                    <span class="text-primary">{{ $account->formatted_total_credits }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="accordion mb-3" id="transactionFilterAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="transactionFilterHeading">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transactionFilterCollapse" aria-expanded="false" aria-controls="transactionFilterCollapse">
                                Transaction Filters
                            </button>
                        </h2>
                        <div id="transactionFilterCollapse" class="accordion-collapse collapse" aria-labelledby="transactionFilterHeading" data-bs-parent="#transactionFilterAccordion">
                            <div class="accordion-body">
                                <div class="row g-3 align-items-end">
                                    <div class="col-md-3">
                                        <label class="form-label">Transaction Type</label>
                                        <select id="filterTransactionType" class="form-select">
                                            <option value="">All Types</option>
                                            <option value="debit">Debit</option>
                                            <option value="credit">Credit</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Reference Type</label>
                                        <select id="filterReferenceType" class="form-select">
                                            <option value="">All References</option>
                                            <option value="PurchaseOrder">Purchase Order</option>
                                            <option value="Qc">QC</option>
                                            <option value="FactoryInvoice">Factory Invoice</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Date Range</label>
                                        <input id="filterTransactionDateRange" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD">
                                    </div>
                                    <div class="col-md-3">
                                        <button type="button" class="btn btn-primary" id="btnApplyTransactionFilters">
                                            <i class="fas fa-search me-2"></i>Apply Filters
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary ms-2" id="btnResetTransactionFilters">
                                            <i class="fas fa-times me-2"></i>Clear
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <h6 class="mb-3">Transaction History</h6>
                <div class="table-responsive">
                    <table class="table table-hover" id="accountTransactionsTable">
                        <thead class="table-light">
                            <tr>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Amount</th>
                                <th>Reference</th>
                                <th>Chart of Account</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('theme/vendors/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('theme/vendors/datatables.net/dataTables.js') }}"></script>
<script src="{{ asset('theme/vendors/datatables.net-bs5/dataTables.bootstrap5.js') }}"></script>
<script src="{{ asset('theme/vendors/select2/select2.min.js') }}"></script>
<script src="{{ asset('theme/vendors/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('theme/vendors/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
$(document).ready(function() {
    // Initialize date range picker
    flatpickr('#filterTransactionDateRange', { mode: 'range', dateFormat: 'Y-m-d' });

    var transactionsTable = $('#accountTransactionsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("accounts.transactions", $account) }}',
            data: function(d) {
                d.transaction_type = $('#filterTransactionType').val();
                d.reference_type = $('#filterReferenceType').val();
                const dr = document.getElementById('filterTransactionDateRange').value;
                if (dr && dr.includes(' to ')) {
                    const parts = dr.split(' to ');
                    d.date_from = parts[0];
                    d.date_to = parts[1];
                }
            }
        },
        columns: [
            {data: 'created_at', name: 'created_at', render: function(data) { return new Date(data).toLocaleDateString(); }},
            {data: 'transaction_type', name: 'transaction_type'},
            {data: 'amount', name: 'amount'},
            {data: 'reference_name', name: 'reference_name'},
            {data: 'chart_of_account_name', name: 'chart_of_account_name'}
        ],
        order: [[0, 'desc']],
        pageLength: 25
    });

    // Filter event handlers
    $('#btnApplyTransactionFilters, #filterTransactionType, #filterReferenceType').on('click change', function(){
        transactionsTable.draw();
    });

    $('#btnResetTransactionFilters').on('click', function(){
        $('#filterTransactionType').val('');
        $('#filterReferenceType').val('');
        document.getElementById('filterTransactionDateRange').value = '';
        transactionsTable.draw();
    });
});
</script>
@endpush
