@extends('backend.layout.master')
@section('backend-head')
    <!-- DataTables CSS -->
    <link href="{{ asset('backend/css/plugins/dataTables.bootstrap.css') }}" rel="stylesheet">
@endsection
@section('backend-main')
    @if (session()->has('cat-created'))
        <div class="row" style="margin-top: 30px;">
            <div class="col-md-12">
                <p class="alert alert-success">{{ session()->get('cat-created') }}</p>
            </div>
        </div>
    @endif
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">أضافة منتج جديد</h1>
            @include('common.messages')
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <form method="post" action="{{ route('products.store') }}" class="form-product" enctype="multipart/form-data">
                {{ csrf_field() }}

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="section">القسم</label>
                        </div>
                        <div class="col-md-9">
                            <select name="section" id="section" class="form-control js-example-basic-single" onchange="java_script_:show(this.options[this.selectedIndex].value)">
                                <option value="0">--- اختر من القائمة ---</option>
                                <option value="1">السيارات</option>
                                <option value="2">العقارات</option>
                                <option value="3">غير ذلك</option>
                            </select>
                        </div>
                    </div>
                </div>


                <div class="form-group" id="hiddenDivCars" style="display:none; width: 100%">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="car_cat">التصنيف</label>
                        </div>
                        <div class="col-md-9">
                            <select name="car_cat" id="car_cat" class="form-control js-example-basic-single" onchange="java_script_:show1(this.options[this.selectedIndex].value)">
                                <option value="0">--- اختر من القائمة ---</option>
                                @foreach ($cars_cats as $cars_cat)
                                    <option value="{{ $cars_cat->id }}">{{ $cars_cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-3">
                            <label for="brand_id">النوع</label>
                        </div>
                        <div class="col-md-9">
                            <select name="brand_id" id="brand_id" class="form-control js-example-basic-single">
                                <option value="0">--- اختر نوع السيارة ---</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}">{{ $brand->ar }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-3">
                            <label for="type_id">الفئة</label>
                        </div>
                        <div class="col-md-9">
                            <select name="type_id" id="type_id" class="form-control js-example-basic-single">
                                <option value="0">--- اختر النوع اولا ---</option>

                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-3">
                            <label for="car_Year">سنة الصنع</label>
                        </div>
                        <div class="col-md-9">
                            <select name="car_Year" id="car_Year" class="form-control js-example-basic-single">
                                @foreach ($years as $year)
                                    <option value="{{ $year->year }}">{{ $year->year }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>


                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-3">
                            <label for="condition">حالة السيارة</label>
                        </div>
                        <div class="col-md-9">
                            <select name="condition" id="condition" class="form-control js-example-basic-single">
                                <option value="new">جديدة</option>
                                <option value="used">مستعملة</option>
                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-3">
                            <label for="tramsmission">ناقل الحركة</label>
                        </div>
                        <div class="col-md-9">
                            <select name="tramsmission" id="tramsmission" class="form-control js-example-basic-single">
                                <option value="regular">عادي</option>
                                <option value="automatic">اوتوماتيك</option>
                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-3">
                            <label for="color">لون السيارة</label>
                        </div>
                        <div class="col-md-9">
                            <select name="color" id="color" class="form-control js-example-basic-single">
                                @foreach ($colors as $color)
                                    <option value="{{ $color->id }}">{{ $color->ar }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                </div>





                <div class="form-group" id="hiddenDivlands" style="display:none; width: 100%">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="land_cat">التصنيف</label>
                        </div>
                        <div class="col-md-9">
                            <select name="land_cat" id="land_cat" class="form-control js-example-basic-single" onchange="java_script_:show2(this.options[this.selectedIndex].value)">
                                <option value="0">--- اختر من القائمة ---</option>
                                @foreach ($lands_cats as $lands_cat)
                                    <option value="{{ $lands_cat->id }}">{{ $lands_cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>


                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-3">
                            <label for="surface">المساحة بالمتر المربع</label>
                        </div>
                        <div class="col-md-9">
                            <input type="text" id="surface" name="surface" class="form-control" value="{{ old('surface') }}" placeholder="مساحة العقار بالمتر المربع">
                        </div>
                    </div>

                </div>


                <div class="form-group" id="hiddenDivlands2" style="display:none; width: 100%">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="rooms">عدد الغرف</label>
                                    </div>
                                    <div class="col-md-9">
                                        <select name="rooms" id="rooms" class="form-control js-example-basic-single">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">اكثر</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="bathrooms">عدد الحمامات</label>
                                    </div>
                                    <div class="col-md-9">
                                        <select name="bathrooms" id="bathrooms" class="form-control js-example-basic-single">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">اكثر</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group" id="hiddenDivcats" style="display:none; width: 100%">
                    <div class="row">
                        <div class="col-md-12">
                            <div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="category_id">التصنيف</label>
                                        </div>
                                        <div class="col-md-9">
                                            <select name="category_id" id="category_id" class="form-control js-example-basic-single">
                                                <option value="0">--- اختر التصنيف ---</option>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="subcategory_id">التصنيف الفرعي</label>
                                        </div>
                                        <div class="col-md-9">
                                            <select name="subcategory_id" id="subcategory_id" class="form-control js-example-basic-single">

                                            </select>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="title">العنوان</label>
                        </div>
                        <div class="col-md-9">
                            <input type="text" id="title" name="title" class="form-control" value="{{ old('title') }}" required placeholder="عنوان مميز للاعلان">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="description">الوصف</label>
                        </div>
                        <div class="col-md-9">
                            <textarea name="description" class="form-control" id="description" cols="30" rows="5" required placeholder="وصف الاعلان بالتفصيل">{{ old('description') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="price">السعر</label>
                        </div>
                        <div class="col-md-9">
                            <input type="text" id="price" name="price" class="form-control" value="{{ old('price') }}" required placeholder="السعر المراد الحصول عليه">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="city">المدينة</label>
                        </div>
                        <div class="col-md-9">
                            <select class="js-example-basic-single form-control" name="city" id="city">
                                @foreach ($countries as $country)
                                    <optgroup label="{{ $country->ar }}">
                                        @foreach ($country->cities as $city)
                                            <option value="{{ $city->ar }}">{{ $city->ar }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

 <div class="form-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="user_id">الكاتب</label>
                        </div>
                        <div class="col-md-9">
                            <select name="user_id" id="user_id" class="form-control">
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="picture">الصورة الرئيسية</label>
                        </div>
                        <div class="col-md-9">
                            <input type="file" id="picture" name="picture" >
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="images">الصور الفرعية</label>
                        </div>
                        <div class="col-md-4">
                            <input type="file" name="images[]" id="images" multiple>
                        </div>
                        <div class="col-md-4">
                            <span style="display: inline-block; margin-top: 15px; color: #959595;">الحد الاقصي المسموح به 3 صور</span>
                        </div>
                    </div>
                </div>





               

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="checkbox">
                                <label>
                                    <input value="1" type="checkbox" name="status">مفعل
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <input type="submit" class="form-control btn btn-primary" value="اضافة">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('backend-footer')
    <!-- DataTables JavaScript -->
    <script src="{{ asset('backend/js/jquery/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('backend/js/bootstrap/dataTables.bootstrap.min.js') }}"></script>
    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
        $(document).ready(function() {
            $('#dataTables-example').dataTable();
        });
    </script>
    {{--<script>--}}
        {{--$('#images').change(function(){--}}
            {{--if(this.files.length>3)--}}
                {{--alert('الحد الأقصى المسموح به هو 3 صور')--}}
        {{--});--}}
        {{--// Prevent submission if limit is exceeded.--}}
        {{--$('#images').submit(function(){--}}
            {{--if(this.files.length>3)--}}
                {{--alert('الحد الأقصى المسموح به هو 3 صور')--}}
        {{--});--}}
    {{--</script>--}}

    <script>
        function show(aval) {
            if (aval == "1") {
                hiddenDivCars.style.display='inline-block';
                hiddenDivlands.style.display='none';
                hiddenDivlands2.style.display='none';
                hiddenDivcats.style.display='none';
            }
            else if (aval == "2") {
                hiddenDivCars.style.display='none';
                hiddenDivcats.style.display='none';
                hiddenDivlands.style.display='inline-block';
                hiddenDivlands2.style.display='inline-block';
            }
            else{
                hiddenDivCars.style.display='none';
                hiddenDivlands.style.display='none';
                hiddenDivlands2.style.display='none';
                hiddenDivcats.style.display='inline-block';
            }
        }
    </script>




    <script>
        function show2(aval) {
            if (aval == 20) {
                hiddenDivlands2.style.display='inline-block';
            }
            else if (aval == "21") {
                hiddenDivlands2.style.display='inline-block';
            }
            else if (aval == "22") {
                hiddenDivlands2.style.display='inline-block';
            }
            else if (aval == "25") {
                hiddenDivlands2.style.display='inline-block';
            }
            else if (aval == "26") {
                hiddenDivlands2.style.display='inline-block';
            }
            else if (aval == "27") {
                hiddenDivlands2.style.display='inline-block';
            }
            else if (aval == "86") {
                hiddenDivlands2.style.display='inline-block';
            }
            else if (aval == "87") {
                hiddenDivlands2.style.display='inline-block';
            }
            else if (aval == "88") {
                hiddenDivlands2.style.display='inline-block';
            }
            else{
                hiddenDivlands2.style.display='none';
            }
        }
    </script>
    <script>
        $(document).ready(function () {
 var base_url = $('#base-url').val();
    var current_url = document.URL.substring(base_url.length);
            $('#brand_id').on('change',function(a){
                console.log(a);
                var brand_id = a.target.value;
                $.get(base_url + '/ajax-brand?brand_id='+ brand_id,function(data){
                    $('#type_id').empty();
                    $.each(data,function(index, typeObj){
                        $('#type_id').append('<option value="'+typeObj.id+'">'+typeObj.ar+'</option>');
                    });
                });
            });

            $('#category_id').on('change',function(e){
                console.log(e);
                var cat_id = e.target.value;
                $.get(base_url + '/ajax-subcat?cat_id='+ cat_id,function(data){
                    $('#subcategory_id').empty();
                    $.each(data,function(index, subcatObj){
                        $('#subcategory_id').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');
                    });
                });
            });
        });
    </script>
@endsection