@extends('layouts.master')
@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-end mb-3">
        <a href="{{ route('home') }}" class="btn-back">
            <i class="fas fa-arrow-left me-2"></i> Back to Dashboard
        </a>
    </div>

    <div class="row">
        <!-- Filter Section -->
        <div class="col-lg-4">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-filter me-2"></i> Filter Journals</h5>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('accounts.journals.index') }}" id="filterForm">
                        <div class="mb-3">
                            <label class="form-label"><strong>Date From:</strong></label>
                            <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}" />
                        </div>

                        <div class="mb-3">
                            <label class="form-label"><strong>Date To:</strong></label>
                            <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}" />
                        </div>

                        <div class="mb-3">
                            <label class="form-label"><strong>Status:</strong></label>
                            <select name="status" class="form-control">
                                <option value="">All Status</option>
                                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="posted" {{ request('status') == 'posted' ? 'selected' : '' }}>Posted</option>
                            </select>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn btn-primary me-2">Filter</button>
                            <a href="{{ route('accounts.journals.index') }}" class="btn btn-outline-secondary">Clear</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Table Section -->
        <div class="col-lg-8 mt-4 mt-lg-0">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i> Journal Entries</h5>
                    <a href="{{ route('accounts.journals.create') }}" class="btn btn-success btn-sm">Create Journal</a>
                </div>
                <div class="card-body">
                    @if($journals->isEmpty())
                        <p class="text-muted mb-0">No journal entries found.</p>
                    @else
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>Date</th>
                                        <th>Entry Number</th>
                                        <th>Description</th>
                                        <th>Transaction Type</th>
                                        <th>Total Debit</th>
                                        <th>Total Credit</th>
                                        <th>Status</th>
                                        <th>Created By</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($journals as $journal)
                                    <tr>
                                        <td>{{ date('d/m/Y', strtotime($journal->transaction_date)) }}</td>
                                        <td>{{ $journal->entry_number }}</td>
                                        <td>{{ $journal->description }}</td>
                                        <td>{{ $journal->transaction_type }}</td>
                                        <td>{{ number_format($journal->total_debit, 2) }}</td>
                                        <td>{{ number_format($journal->total_credit, 2) }}</td>
                                        <td>
                                            <span class="badge {{ $journal->status == 'posted' ? 'bg-success' : 'bg-warning text-dark' }}">
                                                {{ ucfirst($journal->status) }}
                                            </span>
                                        </td>
                                        <td>{{ $journal->creator->name ?? 'N/A' }}</td>
                                        <td class="text-center">
                                            <a href="#" class="btn btn-sm btn-info" title="View Details">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-center mt-3">
                            {{ $journals->appends(request()->query())->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.btn-back {
    text-decoration: none;
    color: #1AB9D9;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-back:hover {
    background-color: rgba(26, 185, 217, 0.1);
    text-decoration: none;
}
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 12px 20px;
}
.table th {
    background-color: #f8f9fa;
}
.badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 12px;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    table.table {
        font-size: 0.85rem;
    }
    table.table th,
    table.table td {
        white-space: nowrap;
    }
}
</style>
@endsection