@extends('layouts.app', ['title' => __('Income')])
@section('admin_title')
{{ __('Income') }}
@endsection
@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5">
    <div class="container-fluid">
        <div class="row mb-4 mt-4">
            <div class="col-md-6">
                <div class="btn-group" role="group" aria-label="Filter">
                    <button type="button" class="btn" data-filter="daily">Daily</button>
                    <button type="button" class="btn" data-filter="weekly">Weekly</button>
                    <button type="button" class="btn" data-filter="monthly">Monthly</button>
                    <button type="button" class="btn" data-filter="quarterly">Quarterly</button>
                    <button type="button" class="btn btn-focus" data-filter="yearly">Yearly</button>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="container-fluid mt--7" style="margin-top: -9.3rem !important;">
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-body">
                    <form action="{{ route("income.store") }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" value="{{ $income->id ?? "" }}" name="income_id">
                        <div class="row">
                            <div class="col-md-1"></div>
                            <div id="form-group-date" class="form-group col-md-5">
                                <label class="form-control-label" for="date">Date</label>
                                <input step=".01" type="date" name="date" id="date" class="form-control"
                                    placeholder="Date"
                                    value="{{ $income->date ?? now()->format('Y-m-d') }}" required>
                            </div>
                            <div id="form-group-expenses_category_id" class="form-group col-md-5">
                                <label class="form-control-label">Category</label><br>

                                <select class="form-control form-control-alternative select2init"
                                    name="expenses_category_id"
                                    id="expenses_category_id">

                                    <option disabled value="">Select Category</option>

                                    @foreach($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ isset($income) && $income->income_category_id == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>

                                    @endforeach
                                </select>

                            </div>
                            <div class="form-group col-md-1"></div>
                            <div class="form-group col-md-1"></div>
                            <div id="form-group-income_source" class="form-group col-md-5">
                                <label class="form-control-label">Income Source</label><br>

                                <select class="form-control form-control-alternative select2init"
                                    name="income_source"
                                    id="income_source">

                                    <option disabled value="">Select Income Source</option>

                                </select>

                            </div>
                            
                              <div id="form-group-memo" class="form-group col-md-5">
                                <label class="form-control-label" for="amount">Memo</label>
                                <input type="text" name="memo" id="memo" class="form-control form-control" value="{{ $income->memo ?? "" }}" required="">
                            </div>
                            <div class="form-group col-md-1"></div>
                            <div class="form-group col-md-1"></div>
                            <div id="form-group-payment_method" class="form-group col-md-5">
                                <label class="form-control-label">Payment Method</label>
                                <select class="form-control form-control-alternative select2init"
                                    name="payment_method"
                                    id="payment_method" required>
                                    <option disabled value="">Select method</option>
                                    <option value="cash" {{ isset($income) && $income->payment_method == 'cash' ? 'selected' : '' }}>Cash</option>
                                    <option value="card" {{ isset($income) && $income->payment_method == 'card' ? 'selected' : '' }}>Card</option>
                                    <option value="online_transfer" {{ isset($income) && $income->payment_method == 'online_transfer' ? 'selected' : '' }}>Online Transfer</option>
                                </select>
                            </div>
                            <div id="form-group-income_source" class="form-group col-md-5">
                                <label class="form-control-label">Deposit to</label><br>

                                <select class="form-control form-control-alternative select2init"
                                    name="deposit_to"
                                    id="deposit_to">

                                </select>

                            </div>
                            <div class="form-group col-md-1"></div>
                            <div class="form-group col-md-1"></div>
                            <div id="form-group-amount" class="form-group col-md-5">
                                <label class="form-control-label" for="amount">Amount</label>
                                <input step=".01" type="number" name="amount" id="amount" class="form-control form-control   " placeholder="USD" value="{{ $income->amount ?? "" }}" required="">
                            </div>
                              <div id="form-group-status" class="form-group col-md-5">
                                <label class="form-control-label">Status</label>
                                <select class="form-control form-control-alternative select2init"
                                    name="status"
                                    id="status" required>
                                    <option value="active" {{ isset($income) && $income->is_active == "active" ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ isset($income) && $income->is_active == "inactive" ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>
                            <div class="form-group col-md-1"></div>
                            <div class="form-group col-md-1"></div>
                            <div class="form-group col-md-10">
                                <label class="form-control-label" for="description">Description</label>
                                <textarea class="form-control form-control-alternative" name="description" id="description" rows="4" cols="50" spellcheck="false" data-ms-editor="true">{{ $income->description ?? "" }}</textarea>
                            </div>
                          
                            <style>
                                .select2-container {
                                    width: 100% !important;
                                }
                            </style>

                          

<div class="col-md-9"></div>
<div class="col-md-1">
    <button type="reset" class="btn btn-secondary">Reset</button>
</div>
<div class="col-md-1">
    <button type="submit" class="btn btn-primary">Save</button>
</div>

                        </div>
                    </form>
                </div>

                <div class="col-12">
                    @include('partials.flash')
                </div>
                <div class="table-responsive">
                    <table class="table align-items-center table-flush">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">{{ __('Date') }}</th>
                                <th scope="col">{{ __('Category') }}</th>
                                <th scope="col">{{ __('Description') }}</th>
                                <th scope="col">{{ __('Payment Method') }}</th>
                                <th scope="col">{{ __('Amount') }}</th>
                                <th scope="col">{{ __('Status') }}</th>
                                <th scope="col">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody id="ordersTable">
                            @forelse ($orders as $order)
                            <tr>
                                <td>{{ $order->created_at->format('Y-m-d H:i:s') }}</td>
                                <td>{{ $order->category?$order->category->name:"" }}</td>
                                <td>{{ $order->description }}</td>
                                <td>{{ $order->payment_method }}</td>
                                <td> @money($order->amount, config('settings.cashier_currency'),config('settings.do_convertion'))</td>
                                <td>
                                    <span class="badge {{ $order->is_active === "active" ? 'badge-success' : 'badge-danger' }}">
                                        {{ $order->is_active ==="active" ? 'active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td>
                                    <a href="javascript:void(0);"
                                        class="btn btn-primary btn-sm edit-btn"
                                        data-id="{{ $order->id }}"
                                        data-date="{{ $order->date }}"
                                        data-amount="{{ $order->amount }}"
                                        data-reference="{{ $order->reference }}"
                                        data-category="{{ $order->income_category_id }}"
                                        data-payment="{{ $order->payment_method }}"
                                        data-status="{{ $order->is_active }}"
                                        data-description="{{ $order->description }}">
                                        Edit
                                    </a>
                                    <a href="javascript:void(0);"
                                        onclick="confirmDelete({{ $order->id }})"
                                        class="btn btn-danger btn-sm">
                                        Delete
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4">No data available</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                    </nav>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footers.auth')
</div>
@endsection
@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "This will permanently delete the income record!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = "/income/delete/" + id;
            }
        });
    }
</script>

<script>
    document.querySelectorAll('.btn-group .btn').forEach(button => {
        button.addEventListener('click', function() {
            const filter = this.dataset.filter;

            fetch(`/orders/filter?filter=${filter}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    const tableBody = doc.querySelector('#ordersTable');

                    // Check if the element exists
                    const ordersTable = document.querySelector('#ordersTable');
                    if (ordersTable && tableBody) {
                        ordersTable.innerHTML = tableBody.innerHTML.trim();
                    } else {
                        console.error('The #ordersTable element was not found in the DOM.');
                    }
                })
                .catch(error => console.error('Error:', error));
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('.edit-btn').click(function() {
            // Get data from button
            const id = $(this).data('id');
            const date = $(this).data('date');
            const amount = $(this).data('amount');
            const reference = $(this).data('reference');
            const category = $(this).data('category');
            const payment = $(this).data('payment');
            const status = $(this).data('status');
            const description = $(this).data('description');

            // Fill the form fields
            $('#income_id').val(id); // Make sure to add id="income_id" to hidden input
            $('#date').val(date);
            $('#amount').val(amount);
            $('#reference').val(reference);
            $('#expenses_category_id').val(category).trigger('change'); // For select2
            $('#payment_method').val(payment).trigger('change'); // For select2
            $('#status').val(status).trigger('change'); // For select2
            $('#description').val(description);

            // Change button text to Update
            $('form button[type="submit"]').text('Save');
        });
    });
</script>

@endsection