@extends('layouts.admin.app')

@section('content')

<div class="container-fluid py-4">
	<div class="row">
		<div class="col-12">
			<div class="card my-4">
				<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
					<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
						<h6 class="text-white text-capitalize ps-3">Category List
							<i class="material-icons ms-auto text-white cursor-pointer catModal" data-type="Add" style="float: right; margin: 0 25px;" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Add Category">add</i>
						</h6>
					</div>
				</div>
                <input type="hidden" id="requestURL" value="{{ route('admin.blog_calegory.index') }}">


                <div class="card-body px-0 pb-2">
					<div class="table-responsive p-4">
						<table class="table align-items-center mb-0" id="data_table">
							<thead>
								<tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Category Name</th>
                                    <th class="">Action</th>
								</tr>
							</thead>
							<tbody>
                                @if(count($categories) >0)
                                @foreach($categories as $category)
								<tr>
                                    <td>
									<div class="d-flex flex-column justify-content-center">
                                        <h6 class="mb-0 text-sm c-name">{{ $category->name }}</h6>
                                    </div>
                                    </td>
									<td class="align-middle text-center text-sm d-flex gap-2">
                                        <a href="javascript:;" class="text-secondary font-weight-bold text-xs catModal" data-id="{{ $category->id }}" data-type="Edit" data-toggle="tooltip" data-original-title="Edit user">
                                            <button class="btn btn-primary" type="submit"><i class="material-icons">edit</i></button>
                                        </a>
                                        <form action="{{ route('admin.blog_calegory.destroy') }}" id="deleteform" method="post">
                                            @csrf
                                            @method('DELETE')
                                            <!-- Hidden input field to pass the ID -->
                                            <input type="hidden" name="id" value="{{ base64_encode($category->id) }}">
                                            <button class="btn btn-primary" type="submit">
                                                <i class="material-icons">delete</i>
                                            </button>
                                        </form>
									</td>
								</tr>
                                @endforeach
                                @endif
							</tbody>
						</table>
                        <div class="pagination-container justify-content-center " style="padding: 10px;">
                        </div>
					</div>
				</div>
			</div>
		</div>
	</div>

    @include('layouts.admin.footer')
</div>

<div class="modal" id="catModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <!-- Modal content-->
        <form id="catForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><span class="mdl_title"></span> Category</h4>
                    <button type="button" class="btn close" data-bs-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="input-group input-group-outline" style="margin: 12px 0;">
                        <label style="padding:8px 12px;margin: unset;">Category Name</label>
                        <input type="text" style="padding:unset;width: 50%;" class="form-control category-name" name="name">
                        <input type="hidden" name="id" class="form-id">
                        <br><span class="text-danger w-100 text-center e-lable field-name"></span>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="input-group input-group-outline" style="margin: 12px 0;">
                        <label style="padding:8px 12px;margin: unset;">Category Slug</label>
                        <input type="text" style="padding:unset;width: 50%;" class="form-control category-slug" name="slug">
                        <input type="hidden" name="id" class="form-id">
                        <br><span class="text-danger w-100 text-center e-lable field-slug"></span>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary catSave">Save</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                    <br><span class="text-danger w-100 text-center e-lable field-error" ></span>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
.flex.justify-between.flex-1.sm\:hidden
{
    display: none
}
</style>
    <script>
   // Open Modal for Add/Edit
$(document).on('click', '.catModal', function () {
    $('.mdl_title').html($(this).attr('data-type'));
    $('.e-lable').html('');

    if ($(this).attr('data-type') == 'Edit') {
        var name = $(this).closest('tr').find('.c-name').html();
        $('.form-name').val(name);
        $('.form-id').val($(this).attr('data-id'));
        $('.catSave').html('Update');
    } else {
        $('.catSave').html('Save');
        $('#catForm')[0].reset();
        $('.form-id').val('');
    }

    $('#catModal').modal('show');
});

// Store or Update
$(document).on('click', '.catSave', function () {
    var formData = new FormData($("#catForm")[0]);
    var id = $('.form-id').val();
    var url = "{{ route('admin.blog_calegory.store') }}";

    if ($(this).text().trim() === 'Update') {
        formData.append('id', id);
    }

    $.ajax({
        url: url,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function () {
            $('.e-lable').html('');
            layon();
        },
        success: function (data) {
            if (data.success == false) {
                $.each(data.message, function (key, value) {
                    $('.field-' + key).html(value);
                });
            } else {
                $('#catModal').modal('hide');
                toastr.success('Saved Successfully!', '', { timeOut: 3000 });

                setTimeout(function() {
                    FetchData();
                }, 500); // 0.5 second ke delay ke baad Fetch
            }
            layoff();
        },
        error: function (xhr) {
            console.log(xhr.responseText);
            layoff();
        }
    });
});

// Delete
$(document).on("submit", "#deleteform", function (e) {
    e.preventDefault();
    var url = $(this).attr('action');
    var formData = new FormData(this);

    var csrfToken = $('meta[name="csrf-token"]').attr('content');

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': csrfToken
        }
    });

    $.ajax({
        url: url,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function () {
            layon();
        },
        success: function (data) {
            if (data.success == false) {
                $.each(data.message, function (key, value) {
                    toastr.error(value, '', { timeOut: 5000 });
                });
            } else {
                toastr.success('Deleted Successfully!', '', { timeOut: 3000 });

                setTimeout(function() {
                    FetchData();
                }, 500);
            }
            layoff();
        },
        error: function (xhr) {
            console.log(xhr.responseText);
            layoff();
        }
    });
});

// Fetch Table Data
// function FetchData() {
//     var url = $('#requestURL').val();

//     $.ajax({
//         url: url + '?t=' + new Date().getTime(), // random param for no-cache
//         type: "GET",
//         beforeSend: function () {
//             layon();
//         },
//         success: function (data) {
//             $('.table-responsive').html(data); // Replace table content
//             layoff();
//         },
//         error: function (xhr) {
//             console.log(xhr.responseText);
//             layoff();
//         }
//     });
// }
function FetchData(){
    var url = $('#requestURL').val(); // Tumhare page me hidden input me URL hai
    console.log("Fetching data from: " + url);

    $.ajax({
        url: url,
        type: "GET",
        beforeSend: function () {
            layon();
        },
        success: function (data) {
            $('.table-responsive').html(data); // Pura table ka HTML replace karna
            layoff();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            layoff();
        }
    });
}


// slug
document.addEventListener('DOMContentLoaded', function () {
        //alert('ssss');
        const nameInput = document.querySelector('.category-name');

        const slugInput = document.querySelector('.category-slug');

        if (nameInput && slugInput) {
            nameInput.addEventListener('keyup', function () {
                let slug = this.value
                    .toLowerCase()
                    .trim()
                    .replace(/[\s\W-]+/g, '-')   // Replace spaces and non-word chars with hyphens
                    .replace(/^-+|-+$/g, '');    // Remove starting/ending hyphens
                slugInput.value = slug;
            });
        }
    });
    </script>
@endsection