@extends('backend.layout.main')

@section('content')
<div class="page-wrapper">
    <div class="content">

        <div class="page-header">
            <h3 class="page-title">Slider Management</h3>
        </div>

        <div class="card mb-4">
  
                                             <div class="card-header bg-primary">
                <h4 class="card-title text-white">Add / Update Slider</h4>
            </div>
            <div class="card-body">
                <form id="sliderForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="id">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>Position</label>
                            <input type="number" name="position" id="position" class="form-control" placeholder="Enter position">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Slider Image</label>
                            <input type="file" name="image" id="image" class="form-control">
                            <img id="preview" src="" class="mt-2" style="width:60px;display:none;">
                        </div>
                    </div>
                    <div class="text-end">
                        <button type="submit" class="btn btn-primary" id="submitBtn">Save</button>
                        <button type="button" class="btn btn-secondary" id="resetBtn" style="display:none;">Cancel Update</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h4 class="card-title">All Sliders</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="sliderTable" class="table table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Image</th>
                                <th>Position</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection


@push('scripts')
<script>
$(document).ready(function() {

    fetchData();

    function fetchData() {
        $.get("{{ route('admin.sliders.fetch') }}", function(res) {
            let rows = '';
            $.each(res.data, function(i, item) {
                rows += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.image ? `<img src="{{ asset('') }}${item.image}" width="60">` : '-'}</td>
                    <td>${item.position ?? '-'}</td>
                    <td class="text-center">
                        <button class="toggle-status btn btn-sm ${item.status ? 'btn-success' : 'btn-danger'}" data-id="${item.id}">
                            ${item.status ? 'Show' : 'Hide'}
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-sm edit" data-item='${JSON.stringify(item)}'><i class="fa-solid text-info fa-edit"></i></button>
                        <button class="btn btn-sm delete" data-id="${item.id}"><i class="fa-solid text-danger fa-trash"></i></button>
                    </td>
                </tr>`;
            });
            $('#sliderTable tbody').html(rows);
        });
    }

    $('#sliderForm').submit(function(e) {
        e.preventDefault();
        let formData = new FormData(this);
        $.ajax({
            url: "{{ route('admin.sliders.store') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(res) {
                toastr.success(res.message);
                $('#sliderForm')[0].reset();
                $('#id').val('');
                $('#preview').hide();
                $('#resetBtn').hide();
                $('#submitBtn').text('Save');
                fetchData();
            }
        });
    });

    $(document).on('click', '.edit', function() {
        let item = $(this).data('item');
        $('#id').val(item.id);
        $('#position').val(item.position);
        if (item.image) {
            $('#preview').attr('src', "{{ asset('') }}" + item.image).show();
        } else {
            $('#preview').hide();
        }
        $('#submitBtn').text('Update');
        $('#resetBtn').show();
        $('html, body').animate({ scrollTop: 0 }, 'fast');
    });

    $('#resetBtn').click(function() {
        $('#sliderForm')[0].reset();
        $('#id').val('');
        $('#preview').hide();
        $('#resetBtn').hide();
        $('#submitBtn').text('Save');
    });

    $(document).on('click', '.delete', function() {
        if (!confirm('Are you sure you want to delete this slider?')) return;
        let id = $(this).data('id');
        $.ajax({
            url: "{{ url('admin/sliders/delete') }}",
            type: "DELETE",
            data: { _token: '{{ csrf_token() }}', id: id },
            success: function(res) {
                if (res.success) toastr.success(res.message);
                else toastr.error(res.message);
                fetchData();
            }
        });
    });

    $(document).on('click', '.toggle-status', function() {
        let id = $(this).data('id');
        $.ajax({
            url: "{{ url('admin/sliders/toggle') }}",
            type: "PATCH",
            data: { _token: '{{ csrf_token() }}', id: id },
            success: function(res) {
                toastr.success(res.message);
                fetchData();
            }
        });
    });
});
</script>
@endpush