@extends('layouts.app', ['title' => __('Templates')])
@section('admin_title')
{{ __('Blogs') }}
@endsection
@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5">
</div>
<div class="container-fluid mt--7">
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h3 class="mb-0">{{ __('Blogs') }}</h3>
                        </div>
                        <div class="col-4 text-right">
                            <a href="{{ route('admin.blogs.create') }}" class="btn btn-sm btn-primary">{{ __('Add Blog') }}</a>
                            <a href="javascript:void(0);" class="btn btn-sm btn-primary" id="editCustomerBtn">{{ __('Edit Blog') }}</a>
                            <a href="javascript:void(0);" class="btn btn-sm btn-danger" id="deleteCustomerBtn">{{ __('Delete Blog') }}</a>

                        </div>
                    </div>
                </div>
                <div class="col-12">
                    @include('partials.flash')
                </div>
                <div class="table-responsive">
    <table class="table align-items-center table-flush">
        <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">{{ __('Title') }}</th>
                <th scope="col">{{ __('Featured Image') }}</th>
                <th scope="col">{{ __('Status') }}</th>
                <th scope="col">{{ __('Published At') }}</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($blogs as $blog)
                <tr>
                    <td>
                        <input type="checkbox" name="selected_blog" value="{{ $blog->id }}">
                    </td>

                    <td>
                        {{ $blog->title }}
                    </td>

                    <td>
                        @if($blog->featured_image)
                            <img 
                                src="{{ asset('blogs/' . $blog->featured_image) }}" 
                                width="120" 
                                height="70" 
                                class="img-fluid rounded"
                                alt="{{ $blog->title }}"
                            >
                        @else
                            <span class="text-muted">No Image</span>
                        @endif
                    </td>

                    <td>
                        @if($blog->status === 'published')
                            <span class="badge badge-success">{{ __('Published') }}</span>
                        @else
                            <span class="badge badge-warning">{{ __('Draft') }}</span>
                        @endif
                    </td>

                    <td>
                        {{ $blog->created_at ? $blog->created_at->format('d M Y') : '-' }}
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="text-center text-muted">
                        {{ __('No blogs found') }}
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                    </nav>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footers.auth')
</div>
@endsection
@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).on('change', '.customer-radio', function () {
        $('.customer-radio').not(this).prop('checked', false);
    });
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        $('.table').DataTable({
            "columnDefs": [{
                "orderable": false,
                "targets": -1 // Target the last column (Action column)
            }]
        });
    });
    $("[data-target='#modal-edit-category']").on('click', function() {
        var id = $(this).attr('data-id');
        var name = $(this).attr('data-name');
        $('#cat_name').val(name);
        var route = "{{ route('owner.category.update', ':id') }}";
        route = route.replace(':id', id);
        $("#form-edit-category").attr("action", route);
    })
</script>
<script>
    function confirmDelete(categoryId) {
        // Show the confirmation dialog
        Swal.fire({
            title: '{{ __('
            Are you sure ? ') }}',
            text : '{{ __('
            This will delete the category and all related data.This action is irreversible.
            ') }}',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '{{ __('
            Yes,
            delete it!') }}',
            cancelButtonText: '{{ __('
            Cancel ') }}',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // If confirmed, redirect to the delete route
                window.location.href = "{{ route('owner.category.remove', ':id') }}".replace(':id',
                    categoryId);
            }
        });
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        // Get selected customer ID
        function getSelectedCustomerId() {
            return $('input[name="selected_blog"]:checked').val();
        }

        // Edit Customer
        $('#editCustomerBtn').click(function() {
            let customerId = getSelectedCustomerId();
            if (!customerId) {
                Swal.fire("Warning", "Please select a Blog first!", "warning");
                return;
            }
            window.location.href = "/blogs/edit/" + customerId;
        });

        // Delete Customer with SweetAlert Confirmation
        $('#deleteCustomerBtn').click(function() {
            let customerId = getSelectedCustomerId();
            if (!customerId) {
                Swal.fire("Warning", "Please select a Blog first!", "warning");
                return;
            }

            Swal.fire({
                title: "Are you sure?",
                text: "This Blog will be permanently deleted!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/blogs/delete/" + customerId,
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            Swal.fire("Deleted!", "The Blog has been deleted.", "success")
                                .then(() => location.reload());
                        },
                        error: function() {
                            Swal.fire("Error", "Something went wrong.", "error");
                        }
                    });
                }
            });
        });
    });
</script>

@endsection