@extends('layouts.app')
@section('content')


    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Edit Comics</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Dashboarda</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-md-12">
                    @if(session('success') || session('error'))
                        <div class="alert {{ session('success') ? 'alert-success' : 'alert-danger' }}">
                            {{ session('success') ?? session('error') }}
                        </div>
                    @endif
                    <div class="card card-primary">
                        <form method="post" action="{{ route('admin.comics.update', request()->route('id')) }}" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control" id="name" name="name" value="{{ $data->name }}" placeholder="Enter Name">
                                </div>
                                @error('name')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                                <div class="form-group">
                                    <label for="name">Facebook</label>
                                    <input type="url" class="form-control" id="name" name="facebook" value="{{ $data->facebook }}" placeholder="Enter Facebook">
                                </div>

                                <div class="form-group">
                                    <label for="name">Instagram</label>
                                    <input type="url" class="form-control" id="name" name="instagram" value="{{ $data->instagram }}" placeholder="Enter Instagram">
                                </div>
                                <div class="form-group">
                                    <label for="youtube">Youtube</label>
                                    <input type="url" class="form-control" id="youtube" name="youtube" value="{{ $data->youtube }}" placeholder="Enter Youtube">
                                </div>
                                <div class="form-group">
                                    <label for="tiktok">TikTok</label>
                                    <input type="url" class="form-control" id="tiktok" name="tiktok" value="{{ $data->tiktok }}" placeholder="Enter TikTok">
                                </div>
                                <div class="form-group">
                                    <label for="name">Twitter</label>
                                    <input type="url" class="form-control" id="name" name="twitter" value="{{ $data->twitter }}" placeholder="Enter Twitter">
                                </div>
                                <div class="form-group">
                                    <label for="date">Detail</label>
                                    <textarea name="detail"  class="form-control" id="detail" cols="30" rows="10">{!! $data->detail !!}</textarea>
                                </div>
                                @error('detail')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                                <div class="form-group">
                                    <label for="link">Featured</label>
                                    <select class="form-control" id="link" name="featured">
                                        <option value="">Select Featured</option>
                                        <option value="1" {{$data->featured == '1'  ? 'selected' : ''}}>Yes</option>
                                        <option value="0" {{$data->featured == '0'  ? 'selected' : ''}}>No</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="link">Status</label>
                                    <select class="form-control" id="link" name="status">
                                        <option value="">Select Status</option>
                                        <option value="1" {{$data->status == '1'  ? 'selected' : ''}}>Active</option>
                                        <option value="0" {{$data->status == '0'  ? 'selected' : ''}}>Inactive</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="image">Profile Image</label>
                                    <input type="file" class="form-control" id="image" name="image">
                                </div>
                                <div class="form-group">
                                    @foreach ($profile_img as $image)
                                        <img src="{{ $image->getUrl() }}" alt="{{ $image->name }}" height="150" width="150">
                                    @endforeach
                                </div>
                                <br>
                                <h3>Shows Images</h3>

                                    <!-- Loop through and display saved images -->
                                <div id="image-container">
                                @for ($i = 1; $i <= 3; $i++) <!-- Loop for 3 image fields -->
                                    <div class="form-group">
                                        <label for="img{{ $i }}">Image {{ $i }}</label>
                                        <input type="file" class="form-control" name="img[]" id="img{{ $i }}">

                                    @if (isset($shows_img[$i - 1])) <!-- Check if image exists for the current index -->
                                        <img src="{{ $shows_img[$i - 1]->getUrl() }}" alt="{{ $shows_img[$i - 1]->name }}" width="100" height="100">
                                        @endif
                                    </div>
                                    @endfor
                                </div>
{{--                                <button type="button" id="add-image" class="btn btn-success">Add Image</button>--}}

                                <!-- Initial input field for new uploads -->




                                <br>
                                <br>

{{--                                <div class="form-group">--}}
{{--                                    @foreach ($shows_img as $image)--}}
{{--                                        <img src="{{ $image->getUrl() }}" alt="{{ $image->name }}" height="150" width="150">--}}
{{--                                    @endforeach--}}
{{--                                </div>--}}
                            </div>

                            <div class="card-footer">
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input type="hidden" name="status" value="0">
                                        <input type="checkbox" class="form-check-input" name="status" value="1" {{ $data->status == 1 ? 'checked' : '' }}>Show/Hide
                                    </label>
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>

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

@endsection

@push('comics_script')

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let counter = 1;

            const addButton = document.getElementById("add-image");
            const imageContainer = document.getElementById("image-container");

            addButton.addEventListener("click", function () {
                counter++;

                const newInput = document.createElement("div");
                newInput.className = "form-group";
                newInput.innerHTML = `
                <label for="img${counter}">Image</label>
                <div class="input-group">
                    <input type="file" class="form-control" name="img[]" id="img${counter}">
                    <button type="button" class="delete-image btn btn-danger">Delete</button>
                </div>`;

                imageContainer.appendChild(newInput);

                newInput.querySelector(".delete-image").addEventListener("click", function () {
                    newInput.remove();
                });
            });

            document.querySelector(".delete-image").addEventListener("click", function () {
                document.querySelector(".form-group").remove(); // Remove the initial row
            });
        });
    </script>
    {{--<script>
        document.addEventListener("DOMContentLoaded", function () {
            let counter = 3; // Start counter at 3 since 3 inputs are already present

            const addButton = document.getElementById("add-image");
            const imageContainer = document.getElementById("image-container");

            // Function to toggle the Add Image button
            function toggleAddButton() {
                addButton.disabled = counter >= 3; // Disable button when counter is 3 or more
            }

            // Function to add a new input field dynamically
            function addImageField() {
                counter++;

                const newInput = document.createElement("div");
                newInput.className = "form-group";
                newInput.innerHTML = `
            <label for="img${counter}">Image ${counter}</label>
            <input type="file" class="form-control" name="img[]" id="img${counter}">`;

                imageContainer.appendChild(newInput);
            }

            // Add event listener for Add Image button
            addButton.addEventListener("click", function () {
                addImageField();
                toggleAddButton();
            });

            toggleAddButton();
        });

    </script>--}}
@endpush