@extends('layout.app')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">

            <div class="breadcrumb-main user-member justify-content-sm-between ">
                <div class=" d-flex flex-wrap justify-content-center breadcrumb-main__wrapper">
                    <div class="d-flex align-items-center user-member__title justify-content-center me-sm-25">
                        <h4 class="text-capitalize fw-500 breadcrumb-title">Expense </h4>
                        <span class="sub-title ms-sm-25 ps-sm-25">Home</span>
                    </div>

                    <form action="/" class="d-flex align-items-center user-member__form my-sm-0 my-2">
                        <img src="{{ asset('assets/img/svg/search.svg') }}" alt="search" class="svg">
                        <input class="form-control me-sm-2 border-0 box-shadow-none" type="search" placeholder="Search by Name" aria-label="Search">
                    </form>

                </div>
                <div class="action-btn">
                    <a href="#" class="btn px-15 btn-primary" data-bs-toggle="modal" data-bs-target="#new-expense-modal">
                        <i class="las la-plus fs-16"></i>Add Expense</a>

                    <!-- Modal -->
<div class="modal fade new-member" id="new-expense-modal" role="dialog" tabindex="-1" aria-labelledby="NewExpense" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content radius-xl">
            <div class="modal-header">
                <h6 class="modal-title fw-500" id="NewExpense">Add New Expense</h6>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <img src="{{ asset('assets/img/svg/x.svg') }}" alt="x" class="svg">
                </button>
            </div>
            <div class="modal-body">
                <div class="new-member-modal">
                   <!-- Modal Form -->
                    <form id="ExpenseForm">
                        @csrf

                        <!-- Created At -->
                        <div class="d-flex new-member-calendar">
                            <div class="form-group w-100 me-sm-15 form-group-calender">
                                <label for="created_at">Date</label>
                                <input type="date" name="created_at" class="form-control" value="{{ old('created_at', date('Y-m-d')) }}" required>
                            </div>
                        </div>



                        <!-- Amount -->
                        <div class="form-group w-100 me-sm-15 form-group-calender">
                            <label for="amount">Amount</label>
                            <input type="number" step="0.01" name="amount" class="form-control" placeholder="Enter Amount" required>
                        </div>
                         </div>

                        <!-- Account Heading -->
                         <div class="d-flex new-member-calendar">
                        <div class="form-group w-100 me-sm-15 form-group-calender">
                            <label for="account_heading">Account Heading</label>
                            <select name="account_heading" class="form-control js-example-basic-single js-states">
                                <option value="" selected>Select Account Heading</option>
                                @foreach ($Headings as $heading)
                                    <option value="{{ $heading->headings }}">{{ $heading->headings }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Payment Mode -->
                        <div class="form-group w-100 me-sm-15 form-group-calender">
                            <label for="payment_mode">Payment Mode</label>
                            <select name="payment_mode" class="form-control js-example-basic-single js-states">
                                <option value="" selected>Select Payment Mode</option>
                                @foreach ($PaymentModes as $mode)
                                    <option value="{{ $mode->payment_mode }}">{{ $mode->payment_mode }}</option>
                                @endforeach
                            </select>
                        </div></div>

                        <!-- Description -->
                        <div class="form-group mb-20">
                            <label for="description">Description</label>
                            <textarea name="description" class="form-control" rows="3" placeholder="Enter Description"></textarea>
                        </div>

                        <!-- Reference -->
                        <div class="form-group mb-20">
                            <label for="reference">Reference</label>
                            <input type="text" name="reference" class="form-control" placeholder="Enter Reference">
                        </div>


                        

                        <!-- Action Buttons -->
                        <div class="button-group d-flex pt-25">
                            <!-- Submit Button (Handled by AJAX) -->
                            <button type="submit" class="btn btn-primary btn-default btn-squared">Submit</button>
                            <button type="button" class="btn btn-light btn-default btn-squared fw-400 text-capitalize b-light color-light" data-bs-dismiss="modal">
                                Cancel
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal End -->

                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="userDatatable global-shadow border-light-50 p-30 bg-white radius-xl w-100 mb-30">
                <div class="table-responsive">
                    <table class="table mb-10 table-border">
                        <thead>
                            <tr class="userDatatable-header">
                                <th>
                                    <div class="d-flex align-items-center">
                                        <div class="custom-checkbox  check-all">
                                            <input class="checkbox" type="checkbox" id="check-44">
                                            <label for="check-44">
                                                <span class="checkbox-text userDatatable-title">Date</span>
                                            </label>
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <span class="userDatatable-title">Headings</span>
                                </th>
                                <th>
                                    <span class="userDatatable-title">Description</span>
                                </th>
                                <th>
                                    <span class="userDatatable-title">Reference</span>
                                </th>
                                <th>
                                    <span class="userDatatable-title">Amount</span>
                                </th>
                                <th>
                                    <span class="userDatatable-title">Payment Mode</span>
                                </th>
                                <th>
                                    <span class="userDatatable-title float-end">action</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($expenses as $expense )
                                
                            
                            <tr>
                                <td>
                                    <div class="d-flex">
                                        <div class="userDatatable__imgWrapper d-flex align-items-center">
                                            <div class="checkbox-group-wrapper">
                                                <div class="checkbox-group d-flex">
                                                    <div class="checkbox-theme-default custom-checkbox checkbox-group__single d-flex">
                                                        <input class="checkbox" type="checkbox" id="check-grp-12">
                                                        <label for="check-grp-12"></label>
                                                    </div>
                                                </div>

                                            </div></a> </div>
                                            
                                        <div class="userDatatable-content">
                                           {{ $expense->created_at }}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="userDatatable-content">
                                        {{ $expense->account_heading }}
                                    </div>
                                </td>
                                <td>
                                    <div class="userDatatable-content">
                                        {{ $expense->description }}
                                    </div>
                                </td>
                                <td>
                                    <div class="userDatatable-content">
                                        {{ $expense->reference }}
                                    </div>
                                </td>
                                <td>
                                    <div class="userDatatable-content">
                                       {{ $expense->amount }}
                                    </div>
                                </td>
                                <td>
                                    <div class="userDatatable-content">
                                       {{ $expense->payment_mode }}
                                    </div>
                                </td>
                                <td>
                                    <ul class="orderDatatable_actions mb-0 d-flex flex-wrap">
                                        
                                      <li>
                                    <a href="{{ route('expense.edit', $expense->id) }}" class="edit">
                                        <i class="uil uil-edit"></i>
                                    </a>
                                </li>
                                        <li>
                                            <a href="#" class="remove delete-expense" data-id="{{ $expense->id }}">
                                                <i class="uil uil-trash-alt"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>





                            @endforeach
                        </tbody>
                    </table>
                </div>
               <div class="d-flex justify-content-end pt-30">
    <nav class="dm-page">
        <ul class="dm-pagination d-flex">
            <li class="dm-pagination__item">
                <!-- Previous Page Link -->
                @if ($expenses->onFirstPage())
                    <span class="dm-pagination__link pagination-control disabled">
                        <span class="la la-angle-left"></span>
                    </span>
                @else
                    <a href="{{ $expenses->previousPageUrl() }}" class="dm-pagination__link pagination-control">
                        <span class="la la-angle-left"></span>
                    </a>
                @endif

                <!-- Page Numbers -->
                @foreach ($expenses->getUrlRange(1, $expenses->lastPage()) as $page => $url)
                    @if ($page == $expenses->currentPage())
                        <a href="#" class="dm-pagination__link active"><span class="page-number">{{ $page }}</span></a>
                    @else
                        <a href="{{ $url }}" class="dm-pagination__link"><span class="page-number">{{ $page }}</span></a>
                    @endif
                @endforeach

                <!-- Next Page Link -->
                @if ($expenses->hasMorePages())
                    <a href="{{ $expenses->nextPageUrl() }}" class="dm-pagination__link pagination-control">
                        <span class="la la-angle-right"></span>
                    </a>
                @else
                    <span class="dm-pagination__link pagination-control disabled">
                        <span class="la la-angle-right"></span>
                    </span>
                @endif
            </li>

            <!-- Page Selection Dropdown -->
            <li class="dm-pagination__item">
                <div class="paging-option">
                    <select name="page-number" class="page-selection" id="page-selection">
                        <option value="10" @if(request('per_page') == 10) selected @endif>10/page</option>
                        <option value="20" @if(request('per_page') == 20) selected @endif>20/page</option>
                        <option value="40" @if(request('per_page') == 40) selected @endif>40/page</option>
                        <option value="60" @if(request('per_page') == 60) selected @endif>60/page</option>
                    </select>
                </div>
            </li>
        </ul>
    </nav>
</div>

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

<!-- jQuery (Must be included before using $) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    $(document).ready(function() {
        $(".delete-expense").click(function(e) {
            e.preventDefault();
            let expenseId = $(this).data("id");

            Swal.fire({
                title: "Are you sure?",
                text: "This action cannot be undone!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/accounts/expense/delete/" + expenseId,
                        type: "DELETE",
                        data: { _token: "{{ csrf_token() }}" },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire("Deleted!", "Expense has been deleted.", "success")
                                    .then(() => location.reload()); // Refresh after confirmation
                            } else {
                                Swal.fire("Error!", "Something went wrong.", "error");
                            }
                        }
                    });
                }
            });
        });
    });

    $(document).ready(function () {
        $('#ExpenseForm').submit(function (e) {
            e.preventDefault(); // Prevent page reload

            let formData = new FormData(this); // Get form data

            $.ajax({
                url: "{{ route('account.expense.store') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Expense record added successfully!',
                        showConfirmButton: false,
                        timer: 2000
                    });

                    $('#ExpenseForm')[0].reset(); // Reset form
                    $('#new-expense-modal').modal('hide'); // Close modal

                    // Refresh the page after the SweetAlert closes
                    setTimeout(function () {
                        location.reload(); // Refresh page to get updated data
                    }, 2000);
                },
                error: function (xhr) {
                    let errors = xhr.responseJSON.errors;
                    let errorMessage = "Please fix the following errors:<br>";
                    
                    $.each(errors, function (key, value) {
                        errorMessage += "- " + value + "<br>";
                    });

                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error!',
                        html: errorMessage
                    });
                }
            });
        });
    });
</script>

@endsection