@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header>
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Budgets') }}
            </h2>
            <p class="mt-1 text-md text-gray-600">
                {{ __('View and manage budgets') }}
            </p>
        </header>

        <section class="mt-2 mb-6">
            <button
                class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded  w-full text-left font-semibold"
                onclick="toggleAccordion(event)">
                Add New Budget Allocation
            </button>

            <form class="bg-white p-4 rounded-lg shadow-md mt-2 hidden transition duration-300 ease-in-out text-xs"
                action="{{ route('budget.store') }}" method="POST">
                @csrf
                <label for="name" class="block font-semibold text-xs">Name:</label>
                <input type="text" id="name" name="name" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget name" required>

                <label for="description" class="block font-semibold text-xs">Desription:</label>
                <textarea id="description" name="description" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget description" required></textarea>

                <label for="cost" class="block font-semibold text-xs">Cost:</label>
                <input type="number" id="cost" name="cost" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget cost" required>

                <label for="monthly" class="block font-semibold text-xs">Monthly:</label>
                <input type="number" id="monthly" name="monthly" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget monthly" required>

                <label for="yearly" class="block font-semibold text-xs">Yearly:</label>
                <input type="number" id="yearly" name="yearly" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget yearly" required>

                <button type="submit" class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded align-right">
                    Add Budget Allocation
                </button>
            </form>
        </section>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6 text-xs">
            <form action="" method="get" class="w-full flex flex-col gap-2 mb-6">
                <div class="flex flex-row gap-2">
                    <input type="search" class="w-full rounded text-xs" name="search" value="{{ request('search') }}" placeholder="Search budgets...">
                    <button type="submit" class="bg-main-dark text-main-light px-4 py-2 rounded">Search</button>
                </div>
                <div class="flex items-center gap-2 cursor-pointer">
                    <label class="cursor-pointer" for="statusCbx">Show Archived</label>
                    <input type="checkbox" name="status" id="statusCbx" value="all" {{ request('status') == 'all' ? 'checked' : '' }}>
                </div>
            </form>
            <div class="bg-white shadow overflow-x-auto rounded-lg">
                <table class="w-full border-collapse rounded bg-main-light">
                    <thead class="bg-main-dark text-main-light text-sm">
                        <tr>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Budget Name</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Description</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Cost</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Monthly</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Yearly</th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ( $budgets as $budget )
                            <tr>
                                <td class="border p-1 px-3">{{ $budget->name }}</td>
                                <td class="border p-1 px-3">{{ $budget->description }}</td>
                                <td class="border p-1 px-3 text-left">{{ $budget->cost }}</td>
                                <td class="border p-1 px-3 text-left">{{ $budget->monthly }}</td>
                                <td class="border p-1 px-3 text-left">{{ $budget->yearly }}</td>
                                <td class="border p-1 px-3 text-center">
                                    <div class="flex justify-end gap-2 relative">
                                        @if (!$budget->deleted_at)
                                            <div>
                                                <button
                                                    class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-1 px-3 rounded"
                                                    onclick="openModal({{ json_encode($budget) }})">
                                                    Edit
                                                </button>
                                            </div>
                                            <div>
                                                <button class="bg-danger-dark text-danger-light hover:underline active:bg-danger-light active:text-danger-dark text-xs py-1 px-3 rounded"
                                                    onclick="confirmationForm('Are you sure you want to delete this budget?', 'delete-form-{{ $budget->id }}')">Delete</button>
                                                <form id="delete-form-{{ $budget->id }}" class="hidden"
                                                    action="{{ route('budget.destroy', ['id' => $budget->id]) }}"
                                                    method="POST">
                                                    @method('DELETE')
                                                    @csrf
                                                </form>
                                            </div>
                                        @else
                                            <button
                                                class="bg-danger-dark text-danger-light text-xs py-1 px-3 rounded cursor-not-allowed">
                                                Deleted
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="border p-2" colspan="6">No budgets found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-4">
                {{ $budgets->appends(['status' => request('status'), 'search' => request('search')])->links('pagination::tailwind') }}
            </div>
        </section>

        <div id="modal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
                <button onclick="closeModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
                    ✕
                </button>

                <h2 class="text-lg font-semibold mb-4">Edit Budget</h2>
                <form id="edit-form" action="" method="POST">
                    @method('PUT')
                    @csrf
                    <label for="name" class="block font-semibold text-xs">Name:</label>
                    <input type="text" id="name-edit" name="name" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget name" required>

                    <label for="description" class="block font-semibold text-xs">Description:</label>
                    <textarea id="description-edit" name="description" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget description" required></textarea>

                    <label for="cost" class="block font-semibold text-xs">Cost:</label>
                    <input type="number" id="cost-edit" name="cost" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget cost" required>

                    <label for="monthly" class="block font-semibold text-xs">Monthly:</label>
                    <input type="number" id="monthly-edit" name="monthly" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget monthly" required>

                    <label for="yearly" class="block font-semibold text-xs">Yearly:</label>
                    <input type="number" id="yearly-edit" name="yearly" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter budget yearly" required>

                    <button type="submit" class="bg-green-500 text-main-light px-4 py-2 rounded mt-4 w-full">Save Changes</button>
                </form>
            </div>
        </div>
    </main>
@endsection

@section('scripts')
    <script>
        function toggleAccordion(e) {
            const form = e.currentTarget.nextElementSibling;
            form.classList.toggle("hidden");
        }
    </script>

    <script>
        function openModal(data) {
            console.log(data);
            document.getElementById('edit-form').action = '/budget/' + data.id;
            document.getElementById('name-edit').value = data.name;
            document.getElementById('description-edit').value = data.description;
            document.getElementById('cost-edit').value = data.cost;
            document.getElementById('monthly-edit').value = data.monthly;
            document.getElementById('yearly-edit').value = data.yearly;
            document.getElementById('modal').classList.remove('hidden');
        }
        function closeModal() {
            document.getElementById('modal').classList.add('hidden');
        }
    </script>
@endsection