@extends('layout.admin')

@section('title')
    Team Management | Group {{ $type }}
@endsection

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

        <!--breadcrumb-->
        <x-breadcrumb first="Team Management" second="Group {{ $type }}" :url="route('admin.team.group')" 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.team.group.edit', $id);
                        else
                            echo route('admin.team.group.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">
                            <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