@extends('backend.layouts.app')
@section('title', 'Sliders')
@section('content')
    <div class="content container-fluid">
        <div class="card">
            <div class="card-header">
                <button class="btn btn-primary add" onclick="showModal()">Add Slider</button>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table id="datatable" class="table table-striped table-hover dt-responsive display nowrap">
                        <thead class="thead-dark">
                            <tr>
                                <th>#</th>
                                <th>Image</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Slider Modal -->
    <div class="modal fade" id="sliderModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="sliderForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Add/Edit Slider</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="slider_id">
                        <div class="mb-3">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control" id="title" required>
                        </div>
                        <div class="mb-3">
                            <label>Description</label>
                            <textarea class="form-control" name="description" id="description" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label>Image</label>
                            <input type="file" class="form-control" name="image" id="image" accept="image/*">
                            <!-- image preview  -->
                            <img id="imagePreview" src="" width="100"
                                style="display:none; border:1px solid #ddd; padding:5px;" />
                        </div>
                        <div class="mb-3">
                            <label>Status</label>
                            <select class="form-control form-select" name="status" id="status">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="submitBtn" class="btn btn-success">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function showModal() {
            $('#sliderForm')[0].reset();
            $('#sliderModal').modal('show');
        }
        $(document).ready(function() {
            function loadDataTable() {
                if ($.fn.DataTable.isDataTable('#datatable')) {
                    $('#datatable').DataTable().destroy();
                }

                $('#datatable').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    ajax: '{{ route('sliders.index') }}',
                    columns: [{
                            data: 'id'
                        },
                        {
                            data: 'image'
                        },
                        {
                            data: 'title'
                        },
                        {
                            data: 'description'
                        },
                        {
                            data: 'status'
                        },
                        {
                            data: 'action'
                        }
                    ]
                });
            }

            loadDataTable();

            // Save (Create/Update) Slider
            $('#sliderForm').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(this);

                let sliderId = $('#slider_id').val();
                let url = sliderId ? `/admin/sliders/update/${sliderId}` : '/admin/sliders/store';
                $('#submitBtn').attr('disabled', true);
                $('#submitBtn').text('Uploading...')

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        iziToast.success({
                            title: 'Success',
                            message: response.success
                        });
                        $('#sliderModal').modal('hide');
                        $('#sliderForm')[0].reset();
                        $('#submitBtn').attr('disabled', false);
                        $('#submitBtn').text('Save');
                        loadDataTable();

                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        if (errors) {
                            $.each(errors, function(key, value) {
                                iziToast.error({
                                    title: 'Error',
                                    message: value
                                });
                            });
                        }
                        $('#submitBtn').attr('disabled', false).text('Save');
                    }
                });
            });


            // Edit Slider
            $('body').on('click', '.edit', function() {
                let id = $(this).data('id');

                $.get(`/admin/sliders/edit/${id}`, function(data) {
                    console.log(data);

                    $('#slider_id').val(data.id);
                    $('#title').val(data.title);
                    $('#description').val(data.description);
                    $('#status').val(data.status);
                    // Show previous image if available
                    if (data.image) {
                        $('#imagePreview').attr('src', '/uploads/sliders/' + data.image).show();
                    } else {
                        $('#imagePreview').hide();
                    }
                    $('#sliderModal').modal('show');
                });
            });

            // Delete Slider
            $('body').on('click', '.delete', function() {
                let id = $(this).data('id');
                if (!confirm("Are you sure you want to delete this slider?")) {
                    return;
                }
                $.ajax({
                    url: `/admin/sliders/delete/${id}`,
                    type: 'DELETE',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        iziToast.success({
                            title: 'Deleted',
                            message: response.success
                        });
                        loadDataTable();
                    },
                    error: function(xhr) {
                        iziToast.error({
                            title: 'Error',
                            message: 'Failed to delete the slider'
                        });
                    }
                });
            });
        });
    </script>
@endpush