@extends('layout.admin')

@section('title')
    Region {{ $type }}
@endsection

@section('content')
    <main class="page-content">
        <!--breadcrumb-->

        <x-breadcrumb first="Region" :second="$type" :url="route('admin.regions')" 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($type == 'Edit') echo route('admin.regions.edit', $id); else echo route('admin.regions.add'); @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">
                            <label class="form-label">Name</label>
                            <input type="text"
                                class="form-control @error('name')
                        is-invalid
                        @enderror"
                                name="name"
                                value="@php if($type == 'Edit') {
                                            echo $data->name;
                                        } else {
                                            echo old('name');
                                        } @endphp"
                                required>
                            @error('name')
                                <x-form-alert message="Please enter region name" />
                            @enderror
                        </div>
                        <div class="col-12">
                            <div class="upload-image-video-list">
                                <div class="image-video-upload">
                                    <div class="image_upload_container">
                                        <label class="form-label">Region Map</label>
                                        <input type="file"
                                            class="form-control @error('image_file')
                                                is-invalid
                                            @enderror"
                                            accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG, .webp, .WEBP, .svg, .SVG"
                                            name="image_file" onchange="imageupload(this)"
                                            @php if($type == 'Add')  echo 'required'; @endphp>
                                        @error('image_file')
                                            <x-form-alert message="Please add map image" />
                                        @enderror
                                        <input type="hidden" class="form-control" name="image" placeholder="Select.."
                                            value="@php if($type == 'Edit') {
                                                echo $data->region_map;
                                            } else {
                                                echo old('image');
                                            } @endphp">
                                    </div>
                                    <br>
                                    @if ($type == 'Edit')
                                        <div class="image-placeholder-container">
                                            <img src="{{ asset('admin/assets/upload/region') }}/{{ $data->region_map }}"
                                                alt="previe-image" class="product-image-placeholder"
                                                style="max-width: 200px;">
                                        </div>
                                    @else
                                        <div class="image-placeholder-container">
                                            <img src="https://placehold.co/500x500@2x.png"
                                                alt="previe-image" class="product-image-placeholder"
                                                style="max-width: 200px;">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </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($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($type == 'Edit' && $data->status == 1) echo 'selected'; @endphp>Show
                                </option>
                                </option>
                                <option value="0"
                                    @php if($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;">
                                    @if ($type == 'Edit')
                                        Update
                                    @else
                                        Add
                                    @endif
                                </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