@section('title',$title)
@section('description',$description)
@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">{{ trans('menu.user-table') }}</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-member">
                        <i class="las la-plus fs-16"></i>Add new Headings</a>


<!-- Modal -->
<div class="modal fade new-member" id="new-member" role="dialog" tabindex="-1" aria-labelledby="staticBackdropLabel" 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="staticBackdropLabel">Add New Heading</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">
                    <form id="headingsForm">
                        @csrf <!-- CSRF Token for security -->

                        <!-- Heading Name Input -->
                        <div class="form-group mb-20">
                            <input type="text" class="form-control" name="headings" id="headingsName" placeholder="Enter Heading Name">
                        </div>

                        <!-- Type Dropdown -->
                        <div class="form-group mb-20">
                            <label for="type">Select Type</label>
                            <select class="form-control" name="type" id="type">
                                <option value="Income">Income</option>
                                <option value="Expense">Expense</option>
                            </select>
                        </div>

                        <!-- Buttons -->
                        <div class="button-group d-flex pt-25">
                            <button type="submit" class="btn btn-primary btn-default btn-squared text-capitalize">
                                Create Heading
                            </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 id="successMessage" class="alert alert-success mt-2" style="display: none;">
                        Heading added successfully!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->



                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="userDatatable global-shadow border-light-0 p-30 bg-white radius-xl w-100 mb-30">
                <div class="table-responsive">
                    <table class="table mb-0 table-borderless">
                        <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">Accounts Headings</span>
                                            </label>
                                        </div>
                                    </div>
                                </th>
                                
                                    <th>
                                        <span class="userDatatable-title">Type</span>
                                    </th>
                               
                                <th>
                                    <span class="userDatatable-title float-end">action</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($headings as $heading)
                                <tr id="row-{{ $heading->id }}"> <!-- Unique row ID for deletion -->
                                    <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-{{ $heading->id }}">
                                                            <label for="check-grp-{{ $heading->id }}"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="content">
                                                {{ $heading->headings }}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="userDatatable-content">
                                            {{ $heading->type }}
                                        </div>
                                    </td>
                                    <td>
                                        <ul class="orderDatatable_actions mb-0 d-flex flex-wrap">
                                            
                                            <li>
                                                <a href="javascript:void(0);" class="remove" data-id="{{ $heading->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">
                                <a href="#" class="dm-pagination__link pagination-control"><span class="la la-angle-left"></span></a>
                                <a href="#" class="dm-pagination__link"><span class="page-number">1</span></a>
                                <a href="#" class="dm-pagination__link active"><span class="page-number">2</span></a>
                                <a href="#" class="dm-pagination__link"><span class="page-number">3</span></a>
                                <a href="#" class="dm-pagination__link pagination-control"><span class="page-number">...</span></a>
                                <a href="#" class="dm-pagination__link"><span class="page-number">12</span></a>
                                <a href="#" class="dm-pagination__link pagination-control"><span class="la la-angle-right"></span></a>
                                <a href="#" class="dm-pagination__option">
                                </a>
                            </li>
                            <li class="dm-pagination__item">
                                <div class="paging-option">
                                    <select name="page-number" class="page-selection">
                                        <option value="20">20/page</option>
                                        <option value="40">40/page</option>
                                        <option value="60">60/page</option>
                                    </select>
                                </div>
                            </li>
                        </ul>
                    </nav>


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

<!-- Include jQuery first -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Bootstrap JS (Ensure modal functionality) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

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

<script>
$(document).ready(function () {
    $("#headingsForm").submit(function (e) {
        e.preventDefault(); // Prevent default form submission

        var headingName = $("#headingsName").val();
        var type = $("#type").val(); // Get selected type

        $.ajax({
            url: "{{ route('account.headings.store') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                headings: headingName,
                type: type // Include type in request
            },
            success: function (response) {
                if (response.success) {
                    // First, properly close the Bootstrap modal
                    var modal = $("#new-member");
                    modal.modal("hide");

                    // Wait until the modal is fully hidden before showing the alert
                    modal.on("hidden.bs.modal", function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Heading created successfully!',
                            showConfirmButton: false,
                            timer: 2000 // Alert disappears after 2 sec
                        });

                        $("#headingsForm")[0].reset(); // Reset form
                        setTimeout(() => location.reload(), 2000); // Reload page after 2 sec
                    });
                }
            },
            error: function (xhr) {
                let errorMessage = "Something went wrong!";
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMessage = Object.values(xhr.responseJSON.errors).join("\n");
                }

                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: errorMessage,
                    showConfirmButton: false,
                    timer: 3000 // Alert disappears after 3 sec
                });
            }
        });
    });
});




$(document).ready(function () {
    $(".remove").click(function () {
        var headingId = $(this).data("id"); // Get heading ID
        var row = $("#row-" + headingId); // Get the table row for deletion

        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: "{{ route('accounts.heading.delete') }}",
                    type: "DELETE",
                    data: {
                        _token: "{{ csrf_token() }}", // CSRF token for security
                        id: headingId // Send heading ID
                    },
                    success: function (response) {
                        if (response.success) {
                            row.fadeOut(500, function () {
                                $(this).remove(); // Remove row from table
                            });

                            Swal.fire({
                                icon: "success",
                                title: "Deleted!",
                                text: "Heading has been removed.",
                                showConfirmButton: false,
                                timer: 2000
                            });
                        }
                    },
                    error: function (xhr) {
                        Swal.fire({
                            icon: "error",
                            title: "Error!",
                            text: "Failed to delete heading.",
                            showConfirmButton: false,
                            timer: 2000
                        });
                    }
                });
            }
        });
    });
});



</script>

@endsection