@extends('layouts.app')


@section('css')
<link rel="stylesheet" href="assets/libs/dropify/css/dropify.min.css">
<link rel="stylesheet" href="assets/libs/dropify/css/dropify.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/css/bootstrap-select.min.css" integrity="sha512-g2SduJKxa4Lbn3GW+Q7rNz+pKP9AWMR++Ta8fgwsZRCUsawjPvF/BxSMkGS61VsR9yinGoEgrHPGPn2mrj8+4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@endsection

@section('js')
<script src="assets/libs/dropify/js/dropify.min.js"></script>
<script src="assets/libs/dropzone/min/dropzone.min.js"></script>
<script src="assets/js/pages/form-fileuploads.init.js"></script>
<script src="js/add-product.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/bootstrap-select.min.js" integrity="sha512-yrOmjPdp8qH8hgLfWpSFhC/+R9Cj9USL8uJxYIveJZGAiedxyIxwNw4RsLDlcjNlIRR4kkHaDHSmNHAkxFTmgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script>
    $('.selectpicker').selectpicker();
    var exceptions_items = []
</script>
@endsection

@section('content')
<!-- Begin page -->
<div id="wrapper">
    @include('layouts.components.admin.navbar')

    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="content-page">

        @if(Session::has('done'))
        <div class="alert alert-success my-4" role="alert">
            {{Session::get('done')}}
          </div>
        @endif
        @if ($errors->any())
        @foreach ($errors->all() as $error)
        <div class="alert alert-danger my-1" role="alert">
            {{$error}}
          </div>
        @endforeach
    @endif
        <form action="" class="py-4" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label for="simpleinput" class="form-label">الاسم</label>
                <input required type="text" name="name" id="simpleinput" class="form-control">
            </div>
            <div class="mb-3">
                <label for="simpleinput" class="form-label">سعر الشراء </label>
                <input required type="number" name="price" id="simpleinput" class="form-control">
            </div>@if (Auth::user()->role != "seller")
            <div class="mb-3">
                <label for="simpleinput" class="form-label">الحد الأدنى</label>
                <input

                required type="number" name="min_price" id="simpleinput" class="form-control">
            </div>@endif
            @if (Auth::user()->role != "seller")
            <div class="mb-3">
                <label for="simpleinput" class="form-label">الحد الأقصى</label>
                <input

             required type="number" name="max_price" id="simpleinput" class="form-control">
            </div>@endif
            <div class="mb-3">
                <label for="simpleinput" class="form-label">معلومات حول المنتج</label>
                <textarea required type="text" name="details" id="simpleinput" class="form-control"> </textarea>
            </div>
            <div class="mb-3">
                <label for="simpleinput" class="form-label">التصنيفات</label>
 
                @foreach ($Categories as $Category)
                            <div class="row my-1">
                                <div class="col " scope="row">
                                    <input type="checkbox" value="{{$Category->name}}" _name="type" onclick="updatetypes(this)"> {{$Category->name}} 
                                    <button class="btn" type="button" onclick="$(this).parent().parent().find('.sub').toggle();$(this).text($(this).text() == 'اظهار' ?  'اخفاء':'اظهار')">اظهار</button>
                                </div>
                                
                                @foreach (json_decode($Category->{"sub_categories"}) as $key => $sub_category)
                                    <div class="row my-1 mx-4 sub" style="display: none">
                                        <div class="col" scope="row">← <input type="checkbox" _name="sub_categories" _parent="{{$Category->name}}" value="{{$sub_category}}" onclick="updatetypes(this)"> {{$sub_category}} </div>
                                    </div>
                                @endforeach
                                </div>
                @endforeach
              <div id="hidden_selected_categories">
            </div>

            </div>

            <div class="row mx-3">
                <div class="col-sm-12 col-lg-6 d-flex justify-content-between align-items-center"> 
                <label for="inputState">المقاسات</label>
                    
                    <select id="_sizes"class="selectpicker" multiple onchange="updateInputs(this)">
                        @foreach ($sizes as $size) 
                            <option>{{$size->size}}</option>
                        @endforeach
                  </select></div>
                <div class="col-sm-12 col-lg-6 d-flex justify-content-between align-items-center">
                    <label for="inputState">الالوان</label>

                    <select id="_colors" class="selectpicker" multiple onchange="updateInputs(this)">
                        @foreach ($colors as $color) 
                        <option>{{$color->color}}</option>
                    @endforeach
                      </select>
                </div>
            </div>

            <div id="more_items">
            </div>


            <hr>
            <label  class="p-1" for="">اختيار صورة مصغرة </label>
            <input required data-max-file-size="5M" type="file" name="icon" data-plugins="dropify" data-height="300">
            <hr>
            <label class="p-1" for="">اختيار صورة اضافية</label>
            <div class="row multi_image">
                <div class="py-2 ">
                    <input required data-max-file-size="5M" type="file" name="images[]" multiple data-plugins="dropify" data-height="300">
                </div>
            </div>

            <hr>
            <div class="row p-3">
                <button type="submit" class="btn btn-soft-success btn-block">اضافة</button>
            </div>

        </form>



        <!-- Footer Start -->
        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <script>
                            document.write(new Date().getFullYear())

                        </script> &copy; Powered by {{env('website_name')}}
                    </div>
                    <div class="col-md-6">
                        <div class="text-md-end footer-links d-none d-sm-block">
                            <a href="javascript:void(0);">About Us</a>
                            <a href="javascript:void(0);">Help</a>
                            <a href="javascript:void(0);">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end Footer -->

    </div>
    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->
</div>
<!-- Right bar overlay-->
<div class="rightbar-overlay"></div>


@endsection