@extends('layout.admin')

@section('content')
    <main class="page-content">
        <!--breadcrumb-->
        <x-breadcrumb first="Home Page" second="About Section" :url="route('admin.homebanners.show')" button-text="Back" />
        <!--end breadcrumb-->


        <div class="card">
            <div class="card-body">
                <div class="border p-3 rounded">
                    {{-- <h6 class="mb-0 text-uppercase">Contact Form</h6>
                <hr /> --}}
                    <form class="row g-3" method="post" action="{{ route('admin.homepage.about-section') }}"
                        enctype="multipart/form-data">

                        @if (session('error'))
                            <x-alert type="danger" :message="session('error')" />
                        @elseif (session('success'))
                            <x-alert type="success" :message="session('success')" />
                        @endif

                        @csrf
                        <div class="col-12">
                            <div class="upload-image-video-list">
                                <div class="image-video-upload">
                                    <div class="image_upload_container">
                                        <label class="form-label">Section Image</label>
                                        <input type="file"
                                            class="form-control @error('image_file')
                                                is-invalid
                                            @enderror"
                                            accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG, .webp, .WEBP" name="image_file"
                                            onchange="imageupload(this)" required>
                                        @error('image_file')
                                            <x-form-alert message="Please add section image" />
                                        @enderror
                                        <input type="hidden" class="form-control" name="image" placeholder="Select.."
                                            value="">
                                    </div>
                                    <br>
                                    <div class="image-placeholder-container">
                                        <img src="{{ asset('admin/assets/upload/banners/1920x1080.svg') }}"
                                            alt="previe-image" class="product-image-placeholder" style="max-width: 200px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Descroption</label>
                            <textarea id="" name="description" rows="10"
                                class="form-control @error('description')
                                is-invalid
                            @enderror"
                                required></textarea>
                            @error('description')
                                <x-form-alert message="Please add description" />
                            @enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label">Image Name/ Alt Text</label>
                            <input type="text"
                                class="form-control @error('alt_text')
                        is-invalid
                        @enderror"
                                name="alt_text" value="" required>
                            @error('alt_text')
                                <x-form-alert message="Please add image name/ alt text" />
                            @enderror
                        </div>
                        <br>
                        <div class="col-12">
                            <h3>Add Highlights</h3>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Name</label>
                                    <input type="text" class="form-control" name="name[]" value="" required />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Value</label>
                                    <input type="text" class="form-control" name="value[]" value="" required />
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Name</label>
                                    <input type="text" class="form-control" name="name[]" value="" required />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Value</label>
                                    <input type="text" class="form-control" name="value[]" value="" required />
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Name</label>
                                    <input type="text" class="form-control" name="name[]" value="" required />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Value</label>
                                    <input type="text" class="form-control" name="value[]" value="" required />
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Name</label>
                                    <input type="text" class="form-control" name="name[]" value="" required />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Value</label>
                                    <input type="text" class="form-control" name="value[]" value="" required />
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Name</label>
                                    <input type="text" class="form-control" name="name[]" value="" required />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Value</label>
                                    <input type="text" class="form-control" name="value[]" value="" required />
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Name</label>
                                    <input type="text" class="form-control" name="name[]" value="" required />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Value</label>
                                    <input type="text" class="form-control" name="value[]" value="" required />
                                </div>
                            </div>
                            @error('alt_text')
                                <x-form-alert message="Please add image name/ alt text" />
                            @enderror
                        </div>
                        <div class="col-12">
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary" style="width: 100px;">Add</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('js-add')
    <script>
        const imageupload = (input) => {
            // console.log(input.parentNode);
            const placeholder = input.parentNode.parentNode.querySelector('.product-image-placeholder');
            const profileImageInput = input.parentNode.querySelector('[name="image_file"]');
            let formData = new FormData();
            console.log(formData);
            let new_image = input.files[0];
            let preview = URL.createObjectURL(new_image);
            if (new_image.type == 'video/mp4') {
                input.parentNode.parentNode.querySelector('.image-placeholder-container').innerHTML = `
                    <video width="200" height="" controls="">
                        <source src="${preview}" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                `;
            } else {
                input.parentNode.parentNode.querySelector('.image-placeholder-container').innerHTML = `
                    <img src="${preview}"
                    alt="previe-image" class="product-image-placeholder"
                    style="max-width: 200px;">
                `;
            }
            profileImageInput.value = new_image.name;
        }
    </script>
@endsection