@extends('layouts.app')
@push('page_style')
<style>
        #example1_filter {
            display: flex;
            justify-content: end;
        }

        .status-toggle {
            width: 40px;
            height: 20px;
            appearance: none;
            background-color: #dc3545; /* red */
            outline: none;
            border-radius: 20px;
            position: relative;
            cursor: pointer;
            transition: 0.4s;
        }

        .status-toggle:checked {
            background-color: #28a745; /* green */
        }

        .status-toggle::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            top: 1px;
            left: 1px;
            transition: 0.4s;
        }

        .status-toggle:checked::before {
            transform: translateX(20px);
        }

    </style>
@endpush
@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Comics</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item active">Comics</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    @if(session('success') || session('error'))
                        <div class="alert {{ session('success') ? 'alert-success' : 'alert-danger' }}">
                            {{ session('success') ?? session('error') }}
                        </div>
                    @endif

                    <div class="card">
                        <a href="{{ route('admin.add.comics') }}">
                            <button class="btn btn-primary">Create Comics</button>
                        </a>

                        <div class="card-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Image</th>
                                    <th>Featured</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($comics as $item)
                                    <tr>
                                        <td>{{ $item->id }}</td>
                                        <td>{{ $item->name }}</td>
                                        <td>

                                            @foreach ($item->image as $image)
                                                <img src="{{ $image->getUrl() }}" alt="{{ $image->name }}" width="150" height="150">
                                            @endforeach

                                        </td>
                                        <td>
                                            @if ($item->featured == 1)
                                                <input type="checkbox" checked disabled>
                                            @else
                                                <input type="checkbox" disabled>
                                            @endif
                                        </td>
                                        <td>
                                                  <span class="{{$item->status === 1 ? 'badge badge-pill badge-success' : 'badge badge-pill badge-danger'}}">
                                                {{$item->status === 1 ? 'Show' : 'Hide'}}</span>

                                        </td>
                                        <td>
                                            <a href="{{ route('admin.edit.comics', $item->id) }}" class="btn btn-primary">Edit</a>
                                            <a href="{{ route('admin.comics.destroy', $item->id) }}" class="btn btn-danger">Delete</a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@push('page_scripts')
{{--<script>--}}
{{--        document.addEventListener("DOMContentLoaded", function () {--}}
{{--            @if(session('success'))--}}
{{--                toastr.success("{{ session('success') }}");--}}
{{--            @elseif(session('error'))--}}
{{--                toastr.error("{{ session('error') }}");--}}
{{--            @endif--}}
{{--        });--}}

{{--     document.querySelectorAll('.status-toggle').forEach(function(toggle) {--}}
{{--        toggle.addEventListener('change', function() {--}}
{{--            const id = this.dataset.id;--}}
{{--            const status = this.checked ? 1 : 0;--}}

{{--            // Use Blade to generate the named route with a placeholder--}}
{{--            const url = `{{ route('admin.comics.status.update', ':id') }}`.replace(':id', id);--}}

{{--            const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');--}}

{{--            fetch(url, {--}}
{{--                method: 'POST',--}}
{{--                headers: {--}}
{{--                    'Content-Type': 'application/json',--}}
{{--                    'X-CSRF-TOKEN': token--}}
{{--                },--}}
{{--                body: JSON.stringify({ status })--}}
{{--            })--}}
{{--            .then(response => response.json())--}}
{{--            .then(data => {--}}
{{--                if (data.success) {--}}
{{--                    toastr.success("Status updated!");--}}
{{--                } else {--}}
{{--                    toastr.error("Failed to update status.");--}}
{{--                }--}}
{{--            });--}}
{{--        });--}}
{{--    });--}}
{{--</script>--}}

@endpush