@extends('admin.layouts.app')
@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid my-2">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Create newsLetter</h1>
                    </div>
                    <div class="col-sm-6 text-right">
                        <a href="{{ route('newsLetter.index') }}" class="btn btn-primary">Back</a>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content">
            <!-- Default box -->
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert" style="position: relative;">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"
                        style="position: absolute; top: 0; right: 0;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <ul style="margin-bottom: 0;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="container-fluid">
                <form action="{{ route('newsLetter.store') }}" method="POST" enctype="multipart/form-data" id="serviceForm">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="name">NewsLetter Name</label>
                                        <input type="text" name="name" id="name" class="form-control"
                                            placeholder="NewsLetter Name" value="{{ old('name') }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="slug">Slug</label>
                                        <input type="text" readonly name="slug" id="slug" class="form-control"
                                            placeholder="Slug"  value="{{ old('slug') }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="image">NewsLetter Image</label>
                                        <input type="file" name="image" id="image" class="form-control"onchange="previewImage(this, 'image-preview')">
                                        <img id="image-preview" src="#" alt="NewsLetter Image Preview" style="display: none; margin-top:0.5rem; max-width: 30%">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="image">NewsLetter Slider Image</label>
                                        <input type="file" name="slider_image" id="slider_image" class="form-control"onchange="previewImage(this, 'slider_image-preview')">
                                        <img id="slider_image-preview" src="#" alt="NewsLetter Slider Image Preview" style="display: none; margin-top:0.5rem; max-width: 30%">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="images">Add NewsLetter Multiple Images</label>
                                        <input type="file" name="multipleImages[]" id="multipleImages" accept="image/*" class="form-control" multiple onchange="previewMultpleImages(this, 'multipleImages-preview')">
                                        <div id="multipleImages-preview" class="mt-2"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="pb-5 pt-3">
                        <button type="submit" class="btn btn-primary">Create</button>
                        <a href="{{ route('newsLetter.index') }}" class="btn btn-outline-dark ml-3">Cancel</a>
                    </div>
                </form>

            </div>
            <!-- /.card -->
        </section>
    </div>
@endsection
@section('customJs')
    <script>
        $(document).ready(function() {
            // Function to generate slug from name
            function generateSlug(name) {
                return name.trim().toLowerCase().replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-');
            }

            // Handle input event on name input
            $('#name').on('input', function() {
                var name = $(this).val(); // Get the value of name input
                var slug = generateSlug(name); // Generate slug from name
                $('#slug').val(slug); // Set slug value to slug input
            });
        });

        function previewImage(input, previewId) {
        var preview = document.getElementById(previewId);
        var file = input.files[0];
        var reader = new FileReader();

        reader.onload = function() {
            preview.src = reader.result;
            preview.style.display = 'block';
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = '#';
            preview.style.display = 'none';
        }
    }

    function previewMultpleImages(input, previewId) {
            var preview = document.getElementById(previewId);
            preview.innerHTML = ''; // Clear previous previews

            if (input.files) {
                var filesAmount = input.files.length;

                for (var i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();

                    reader.onload = function(event) {
                        var img = document.createElement('img');
                        img.setAttribute('src', event.target.result);
                        img.setAttribute('style', 'max-width: 30%; margin-right: 5px;');
                        preview.appendChild(img);
                    }

                    reader.readAsDataURL(input.files[i]);
                }
            }
        }
    </script>
@endsection