@extends('layouts.app')

@section('title', 'Finance - Chart of Accounts')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row align-items-center mb-4">
                <div class="col-sm-6">
                    <h1 class="m-0" style="font-weight: 700; color: #1a1a1a;">Journals</h1>
                    <p class="text-muted">Manage all Journals here</p>
                </div>
                <div class="col-sm-6 d-flex justify-content-end gap-3">
                    <button class="btn btn-outline-secondary px-4 py-2 mr-2" style="border-radius: 8px; font-weight: 600;">
                        Export <i class="fas fa-external-link-alt ml-2" style="font-size: 12px;"></i>
                    </button>
                    <button class="btn btn-finance-create" data-toggle="modal" data-target="#createAccountModal"><i
                            class="fas fa-plus"></i> Create New
                    </button>
                    @livewire('finance.journal.create')
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <!-- Filter Bar -->
            @include('admin.finance.partials.journal-filter-option')

            <!-- Table Card -->
            <div class="card chart-of-accounts-card shadow-none border-0">
                <div class="card-header bg-white border-bottom-0 pt-4 px-4">
                    <div class="dropdown">
                        <button class="btn btn-white dropdown-toggle border p-2" type="button" data-toggle="dropdown"
                            style="border-radius: 8px;">
                            <i class="fas fa-th-large text-muted"></i>
                        </button>
                        <div class="dropdown-menu shadow-sm border-0" style="border-radius: 12px;">
                            <a class="dropdown-item py-2" href="#"><i class="fas fa-list mr-2 text-muted"></i> List
                                View</a>
                            <a class="dropdown-item py-2" href="#"><i class="fas fa-th mr-2 text-muted"></i> Grid
                                View</a>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table finance-table chart-of-accounts-table m-0">
                            <thead>
                                <tr>
                                    <th style="width: 60px;" class="text-center">SN</th>
                                    <th>Date</th>
                                    <th>Journal</th>
                                    <th>Amount (N)</th>
                                    <th>Reference No</th>
                                    <th>Reporting Method</th>
                                    <th>Status</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach ($journals as $index => $journal)
                                    <tr class="account-row">
                                        <td class="text-center">
                                            {{ ++$index }}
                                        </td>
                                        <td>{{ $journal->date?->format('d, M Y H:IA') }}</td>
                                        <td>{{ $journal->journal_no }}</td>
                                        <td>{{ number_format($journal->total_debit, 2) }}</td>
                                        <td>{{ $journal->reference }}</td>
                                        <td>{{ $journal->reporting_method }}</td>
                                        <td>
                                            @if ($journal->status == 'posted')
                                                <span class="badge badge-success"
                                                    style="background:#e7f7ee;color:#2d8a57;border-radius:20px;padding:6px 12px;font-weight:600;">
                                                    {{ strtoupper($journal->status) }}
                                                </span>
                                            @elseif ($journal->status == 'draft')
                                                <span class="badge badge-success"
                                                    style="background:#e7f7ee;color:#685aff;border-radius:20px;padding:6px 12px;font-weight:600;">
                                                    {{ strtoupper($journal->status) }}
                                                </span>
                                            @else
                                                <span class="badge badge-success"
                                                    style="background:#e7f7ee;color:#960000;border-radius:20px;padding:6px 12px;font-weight:600;">
                                                    {{ strtoupper($journal->status) }}
                                                </span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if ($journal->status == 'draft')
                                                <button class="btn btn-finance-create" data-toggle="modal"
                                                    data-target="#updateAccountModal{{ $journal->id }}"><i
                                                        class="far fa-edit"></i>
                                                </button>
                                                @livewire('finance.journal.edit', ['journal' => $journal])
                                            @else
                                                <a href="{{ route('admin.finance.journal.show', $journal->id) }}"
                                                    class="action-view-circle d-inline-flex align-items-center justify-content-center">
                                                    <i class="far fa-eye"></i>
                                                </a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer bg-white ">
                    @include('components.pagination', ['records' => $journals])
                </div>
            </div>
        </div>
    </section>


@endsection

{{--
@section('script')

    <script>
        const uploadBox = document.getElementById('uploadBox');
        const fileInput = document.getElementById('fileInput');
        const previewContainer = document.getElementById('previewContainer');

        uploadBox.addEventListener('click', () => fileInput.click());

        fileInput.addEventListener('change', function() {
            previewContainer.innerHTML = "";

            Array.from(this.files).forEach(file => {
                const col = document.createElement('div');
                col.className = "col-md-3 mb-2";

                let content = "";

                // IMAGE PREVIEW
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        col.innerHTML = `
                        <div class="border rounded p-2 text-center">
                            <img src="${e.target.result}" class="img-fluid rounded mb-2">
                            <small>${file.name}</small>
                        </div>
                    `;
                    };
                    reader.readAsDataURL(file);
                } else {
                    // ICON PREVIEW FOR OTHER FILE TYPES
                    let icon = "fa-file";

                    if (file.name.match(/\.pdf$/i)) icon = "fa-file-pdf text-danger";
                    else if (file.name.match(/\.doc|\.docx$/i)) icon = "fa-file-word text-primary";
                    else if (file.name.match(/\.xls|\.xlsx$/i)) icon = "fa-file-excel text-success";

                    col.innerHTML = `
                    <div class="border rounded p-3 text-center">
                        <i class="fas ${icon} fa-2x mb-2"></i>
                        <div class="small text-truncate">${file.name}</div>
                    </div>
                `;
                }

                previewContainer.appendChild(col);
            });
        });
    </script>
@endsection
 --}}