@extends('layout.admin')

@section('title')
    {{ $form_type }} Banner
@endsection

@section('content')
    <main class="page-content">
        <!--breadcrumb-->
        <x-breadcrumb first="Home Page" second="Add Banner" :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="@php if($form_type == 'Add') {
                            echo route('admin.homebanners.add');
                        } else {
                            echo route('admin.homebanners.edit', $id);
                        } @endphp"
                        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">Banner Image</label>
                                        <input type="file"
                                            class="form-control @error('product_image_file')
                                        is-invalid
                                        @enderror"
                                            accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG, .webp, .WEBP"
                                            name="product_image_file" onchange="imageupload(this)">
                                        @error('product_image_file')
                                            <x-form-alert message="Please add banner image" />
                                        @enderror
                                        <input type="hidden" class="form-control" name="product_image"
                                            placeholder="Select.."
                                            value="@php if($form_type == 'Edit') {
                                                echo $data->banner_image;
                                            } else {
                                                echo old('product_image');
                                            } @endphp">
                                    </div>
                                    <br>
                                    <div class="image-placeholder-container">
                                        @if ($form_type == 'Edit')
                                            <img src="{{ asset('admin/assets/upload/banners/') }}/{{ $data->banner_image }}"
                                                alt="previe-image" class="product-image-placeholder"
                                                style="max-width: 200px;">
                                        @else
                                            <img src="https://placehold.co/1920x1080@2x.png" alt="previe-image"
                                                class="product-image-placeholder" style="max-width: 200px;">
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Banner Text</label>
                            <input type="text"
                                class="form-control @error('banner_text')
                            is-invalid
                            @enderror"
                                name="banner_text"
                                value="@php if($form_type == 'Edit') {
                                    echo $data->banner_text;}
                                else {
                                    echo old('banner_text');
                                } @endphp">
                            @error('banner_text')
                                <x-form-alert message="Please add the banner text" />
                            @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="@php if($form_type == 'Edit') {
                                    echo $data->alt_text;
                                 } else {
                                    echo old('alt_text');
                                 } @endphp">
                            @error('alt_text')
                                <x-form-alert message="Please add image name/ alt text" />
                            @enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label">Order ID</label>
                            <input type="text"
                                class="form-control @error('order_id')
                        is-invalid
                        @enderror"
                                name="order_id"
                                value="@php if($form_type == 'Edit') {
                                    echo $data->order_id;
                                } else {
                                    echo old('order_id');
                                } @endphp"
                                required>
                            @error('order_id')
                                <x-form-alert message="Please enter region name" />
                            @enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label">Display</label>
                            <select name="display" id="display" class="form-control">
                                <option value="1"
                                    @php if($form_type == 'Edit' && $data->status == 1) echo 'selected'; @endphp>Show
                                </option>
                                </option>
                                <option value="0"
                                    @php if($form_type == 'Edit' && $data->status == 0) echo 'selected'; @endphp>Hide
                                </option>
                                </option>
                            </select>
                        </div>
                        <div class="col-12">
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary"
                                    style="width: 100px;">@php
                                        if ($form_type == 'Edit') {
                                            echo 'Update';
                                        } else {
                                            echo 'Submit';
                                    } @endphp</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="product_image"]');
            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