@extends('layouts.main')
<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
@section('content')
    <div class="container-fluid  mb-5">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 pb-5">
                    <h2 class="textmain">
                        المنتجات </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="container ">
        <div class="row">
            <div class="col-sm-12">
                <div class=" bg-white py-5 px-sm-3">
                    <div class="row mb-3">
                        <div class="col">
                            <h4>
                                اضافة منتج جديد
                            </h4>
                        </div>
                        <div class="col">
                            <input class="d-inline form-check-input" id="showHide" value="1" checked type="checkbox"
                                role="switch" onchange="hideArabic()">
                            <label class="form-check-label" for="showHide"> بالعربي </label>
                            <span class="ms-3">
                                <input class="form-check-input" id="showHideen" value="1" checked type="checkbox"
                                    role="switch" onchange="hideEnglish()">
                                <label class="form-check-label" for="showHideen"> بالانكليزي </label>
                            </span>
                        </div>
                        <div class="col">
                            <h4>
                                <a href="{{ url('allproducts') }}" class="btn btn-secondary float-end"> الرجوع لجدول
                                    المنتجات
                                </a>
                            </h4>
                        </div>
                    </div>
                    @session('success')
                        <div class="alert alert-success" role="alert">
                            {{ session('success') }}
                        </div>
                    @endsession
                    <div class="form-floating">
                        <form action="{{ url('product') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class=" mb-3">
                                <label for="image">صورة المنتج</label>
                                <br>
                                <img src="{{ asset('images/imgicon.svg') }}" class="my-2" alt="No Image"
                                    id="uploadedImage" height='150px'>
                                <br>
                                
                                    <input name="image" type="file" class="my-image-field form-control"
                                    onchange="readURL(this)" required />
                                @error('image')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3">
                                <select class="form-select" name="category_id" id="category_id"
                                    aria-label="Floating label select example">
                                    @foreach ($categories as $category)
                                        @if (!$category->parent)
                                            <optgroup label="{{ $category->name }}" class="bg-light">
                                                @foreach ($category->children as $child)
                                                    <option value="{{ $child->id }}" class="textmain bg-white"
                                                        id="{{ $category->id }}"> {{ $child->name }} </option>
                                                    @foreach ($child->children as $child2)
                                                        <option value="{{ $child2->id }}" class="textmain bg-white"
                                                            id="{{ $category->id }}"> {{ $child2->name }}</option>
                                                    @endforeach
                                                @endforeach
                                                <option value="{{ $category->id }}" class="bg-white textmain">
                                                    {{ $category->name }}
                                                </option>
                                            </optgroup>
                                        @endif
                                    @endforeach
                                </select>
                                <label for="category_id">اختر صنف المنتجات</label>
                                @error('category_id')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 text-dark">
                                <select class="form-select" name="brand_id" id="brand_id"
                                    aria-label="Floating label select example">
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}">{{ $brand->name_ar }}</option>
                                    @endforeach
                                </select>
                                <label for="brand_id">اختر الشركة</label>
                                @error('brand_id')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            {{-- <div class="form-floating mb-3 ar">
                                <textarea class="form-control" style="height: 200px" placeholder="Leave a comment here" id="description_ar"></textarea>
                                <label for="description_ar">الوصف بالعربي</label>
                                @error('description_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div> --}}
                            <div class="form-floating my-3 en">
                                <input type="text" class="form-control text-left" name="name_en" id="name_en"
                                    placeholder="name@example.com" dir="ltr" value="{{ old('name_en') }}">
                                <label for="name_en"> Product Name</label>
                                @error('name_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-group">
                                <strong class="text-left"> Description </strong>
                                <input id="xen" type="hidden" name="description_en" dir="ltr"
                                    value="{{ old('description_en') }}">
                                <trix-editor input="xen" class="trix-content" dir="ltr"></trix-editor>
                                @error('description_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating my-3 ar">
                                <input type="text" class="form-control ar" name="name_ar" id="name_ar"
                                    placeholder="name@example.com" dir="rtl" value="{{ old('name_ar') }}">
                                <label for="name_ar">اسم المنتج</label>
                                @error('name_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-group my-3">
                                <strong>الوصف بالعربي</strong>
                                <input id="x" type="hidden" name="description_ar" dir="rtl"
                                    value="{{ old('description_ar') }}">
                                <trix-editor input="x" class="trix-content" dir="rtl"></trix-editor>
                                @error('description_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            {{-- <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="composition_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="floatingTextarea"></textarea>
                                <label for="floatingTextarea">المكونات</label>
                                @error('composition_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="types_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="types_ar"></textarea>
                                <label for="types_ar">الانواع المستهدفة</label>
                                @error('types_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="dosage_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="dosage_ar"></textarea>
                                <label for="dosage_ar">الجرعة</label>
                                @error('dosage_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="benefits_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="benefits_ar"></textarea>
                                <label for="benefits_ar">الفوائد </label>
                                @error('benefits_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="side_effects_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="side_effects_ar"></textarea>
                                <label for="side_effects_ar">الاضرار الجانبية </label>
                                @error('side_effects_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="time_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="time_ar"></textarea>
                                <label for="time_ar">وقت السحب </label>
                                @error('time_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="warning_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="warning_ar"></textarea>
                                <label for="warning_ar"> التحذيرات والاحتياطات </label>
                                @error('warning_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="storage_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="storage_ar"></textarea>
                                <label for="storage_ar"> التخزين </label>
                                @error('storage_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="prevention_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="prevention_ar"></textarea>
                                <label for="prevention_ar"> موانع الاستخدام </label>
                                @error('prevention_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 ar">
                                <textarea class="form-control" name="packaging_ar" style="height: 200px" placeholder="Leave a comment here"
                                    id="packaging_ar"></textarea>
                                <label for="packaging_ar"> التعبئة </label>
                                @error('packaging_ar')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div> --}}
                            {{-- English fields  --}}
                            {{-- <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="description_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="description_en"></textarea>
                                <label for="description_en"> الوصف بالانجليزي</label>
                                @error('description_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div> --}}
                            {{-- <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="composition_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="floatingTextarea"></textarea>
                                <label for="floatingTextarea">المكونات</label>
                                @error('composition_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="types_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="types_en"></textarea>
                                <label for="types_en">الانواع المستهدفة</label>
                                @error('types_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="dosage_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="dosage_en"></textarea>
                                <label for="dosage_en">الجرعة</label>
                                @error('dosage_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="benefits_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="benefits_en"></textarea>
                                <label for="benefits_en">الفوائد </label>
                                @error('benefits_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="side_effects_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="side_effects_en"></textarea>
                                <label for="side_effects_en">الاضرار الجانبية </label>
                                @error('side_effects_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="time_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="time_en"></textarea>
                                <label for="time_en">وقت السحب </label>
                                @error('time_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="warning_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="warning_en"></textarea>
                                <label for="warning_en"> التحذيرات والاحتياطات </label>
                                @error('warning_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="storage_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="storage_en"></textarea>
                                <label for="storage_en"> التخزين </label>
                                @error('storage_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="prevention_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="prevention_en"></textarea>
                                <label for="prevention_en"> موانع الاستخدام </label>
                                @error('prevention_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                            <div class="form-floating mb-3 en">
                                <textarea class="form-control" name="packaging_en" style="height: 200px" placeholder="Leave a comment here"
                                    id="packaging_en"></textarea>
                                <label for="packaging_en"> التعبئة </label>
                                @error('packaging_en')
                                    <div class="mt-3 alert alert-danger" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div> --}}
                            <div class="form-floating mb-3">
                                <div class="my-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" name="status" value="1" type="checkbox"
                                            role="switch" id="flexSwitchCheckChecked" checked>
                                        <label class="form-check-label" for="flexSwitchCheckChecked">اظهار المنتج </label>
                                    </div>
                                    @error('status')
                                        <div class="mt-3 alert alert-danger" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            {{-- <div class="form-check ">
                                <input class="form-check-input" name="samepage"
                                    {{ session('samepage') == 1 ? 'checked' : '' }} type="checkbox" role="switch"
                        id="flexSwitchCheckChecked1">
                        <label class="form-check-label" for="flexSwitchCheckChecked1">البقاء بهذه الصفحة
                        </label>
                </div> --}}
                            <div class="my-4 ">
                                <button class="btn mainbutton" type="submit"> اضافة </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <script src="{{ url('js/upload.js')  }}"></script>

    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    document.querySelector("#uploadedImage").setAttribute("src", e.target.result);
                    // document.querySelector("#uploadedImage").classlist.remove("d-none");
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        function hideArabic() {
            const input = document.querySelectorAll(".ar");
            for (let i = 0; i < input.length; i++) {
                input[i].toggleAttribute("hidden");
            }
            // input.toggleAttribute("hidden");
        }

        function hideEnglish() {
            const input = document.querySelectorAll(".en");
            for (let i = 0; i < input.length; i++) {
                input[i].toggleAttribute("hidden");
            }
            // input.toggleAttribute("hidden");
        }
    </script>
    <script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
@endsection