@extends('layouts.admin')
<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" id="pageheader">
        <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 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>
        <div class="row">
            <div class="col-sm-12">
                <div class="">
                    <form action="{{ route('product.update', $product->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="form-floating mb-3 ar">
                            <input type="text" class="form-control" name="name_ar" value="{{ $product->name_ar }}"
                                id="name_ar" placeholder="name@example.com">
                            <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-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->id == $product->category_id ? 'selected' : '' }}> <a
                                                        href="{{ url('/allproducts', $child->name) }}">{{ $child->name }}</a>
                                                </option>
                                            @endforeach
                                            <option value="{{ $category->id }}" class="bg-white textmain"
                                                {{ $category->id == $product->category_id ? 'selected' : '' }}>
                                                {{ $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">
                            <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->id == $product->brand_id ? 'selected' : '' }}>{{ $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=" mb-3">
                            <img src="{{ url('products/' . $product->image) }}" class="my-2" alt=""
                                width="200px" id="uploadedImage">
                            <br>
                            <label for="image" class="my-1">صورة المنتج</label>
                            <input type="file" class="form-control form-control-lg" name="image" id="image"
                                accept="image/*" onchange="readURL(this)">
                            @error('image')
                                <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="description_ar" style="height: 200px" placeholder="Leave a comment here"
                                id="description_ar">{{ $product->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-group">
                            <strong>الوصف بالعربي</strong>
                            <input id="x" type="hidden" name="description_ar">
                            <trix-editor input="x" class="trix-content"></trix-editor>
                            @error('description_ar')
                                <div class="mt-3 alert alert-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </div>
                            @enderror
                        </div> --}}
                        <div class="form-group">
                            <strong>الوصف بالعربي</strong>
                            <input id="description_ar" type="hidden" name="description_ar"
                                value="{{ $product->description_ar }}">
                            <trix-editor input="description_ar" class="trix-content"></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">{{ $product->composition_ar }}</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">{{ $product->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">{{ $product->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">{{ $product->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">{{ $product->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">{{ $product->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">{{ $product->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">{{ $product->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">{{ $product->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">{{ $product->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>
                        <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"
                                        {{ $product->status == 1 ? '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>
                        {{-- English fields --}}
                        <div class="form-floating mb-3 en">
                            <input type="text" class="form-control" name="name_en" value="{{ $product->name_en }}"
                                id="name_en" placeholder="name@example.com">
                            <label for="name_en">اسم المنتج بالانجليزية</label>
                            @error('name_ar')
                                <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="description_en" style="height: 200px" placeholder="Leave a comment here"
                                id="description_en">{{ $product->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-group">
                            <strong>الوصف بالانكليزي</strong>
                            <input id="description_en" type="hidden" name="description_en"
                                value="{{ $product->description_en }}">
                            <trix-editor input="description_en" class="trix-content"></trix-editor>
                            @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">{{ $product->composition_en }}</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">{{ $product->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">{{ $product->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">{{ $product->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">{{ $product->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">
                                {{ $product->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">{{ $product->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">{{ $product->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">{{ $product->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">{{ $product->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="my-4 ">
                            <button class="btn mainbutton" type="submit"> تعديل </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
<script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>