@extends("layouts.user.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("Products")}}</h1>
            <p>{{__("Products")}}</p>
        </div>

        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="{{route("user.Products.index")}}">{{__("Products")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Create")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("Create New Product ") }}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("user.Products.store",["userType"=>$userType])}}" enctype="multipart/form-data">
                        @csrf

                        @if($userType != "s-mar")
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">{{__("English  Name")}}</label>
                                        <input class="form-control @if($errors->has('name_en')) is-invalid @endif" type="text" name="name_en" placeholder="{{__("Enter Name")}}" value="{{inputValue("name_en")}}" required>
                                    </div>
                                    @error("name_en")
                                    <div class="input-error">{{$message}}</div>
                                    @enderror
                                </div>
                                <input class="form-control" type="hidden"  name="vector_id"  value="1"required>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">{{__("Name Arabic ")}}</label>
                                        <input class="form-control @if($errors->has('name_ar')) is-invalid @endif" type="text" name="name_ar" placeholder="{{__("Enter Name")}}" value="{{inputValue("name_ar")}}"required>
                                    </div>
                                    @error("name_ar")
                                    <div class="input-error">{{$message}}</div>
                                    @enderror
                                </div>
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("English  Description")}}</label>
                                    <textarea class="form-control @if($errors->has('description_en')) is-invalid @endif"  name="description_en" rows="3" cols="50" placeholder="{{__("Enter Description")}}" required>{{inputValue("description_en")}}</textarea>
                                </div>
                                @error("description_en")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Arabic  Description")}}</label>
                                    <textarea class="form-control @if($errors->has('description_ar')) is-invalid @endif"  name="description_ar" rows="3" cols="50" placeholder="{{__("Enter Description")}}" required>{{inputValue("description_ar")}}</textarea>
                                </div>
                                @error("description_ar")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("price for client")}}</label>
                                    <input class="form-control @if($errors->has('price_for_client')) is-invalid @endif" type="number" min="0" name="price_for_client" placeholder="{{__("Enter Price For Client")}}" value="{{inputValue("price_for_client")}}"required>
                                </div>
                                @error("price_for_client")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("price for Garage")}}</label>
                                    <input class="form-control @if($errors->has('price_for_garage')) is-invalid @endif" type="number" min="0" name="price_for_garage" placeholder="{{__("Enter Price For Garage")}}" value="{{inputValue("price_for_garage")}}"required>
                                </div>
                                @error("price_for_garage")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Region")}}</label>
                                    <select class="form-control @if($errors->has('country_of_origin')) is-invalid @endif" name="country_of_origin"required>
                                        <option selected disabled >{{__("selected Country of Origin")}}</option>
                                        @foreach($Countries as $key=> $Country)
                                            <option value="{{$Country->code}}">{{$Country->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error("country_of_origin")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Shipping From")}}</label>
                                    <select class="form-control @if($errors->has('shipping_from')) is-invalid @endif" name="shipping_from"required>
                                        <option selected disabled >{{__("selected Shipping From")}}</option>
                                        @foreach($states as $key=> $name)
                                            <option value="{{$name['name']}}">{{$name['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error("shipping_from")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <hr>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("The Status")}}</label>
                                    <select class="form-control @if($errors->has('widget_status')) is-invalid @endif"  name="widget_status">
                                        <option selected disabled>{{__("selected Widget Status")}}</option>
                                        @foreach($widgetStatus as $status)
                                            <option value="{{$status->id}}">{{$status->{'name_'.\Illuminate\Support\Facades\App::getLocale()} }}</option>
{{--                                            <option value="1">Hello</option>--}}
                                        @endforeach
                                    </select>
                                </div>
                                @error("widget_status")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

{{--                            <div class="col-lg-6">--}}
{{--                                <div class="form-group">--}}
{{--                                    <label class="control-label">{{__("Origin")}}</label>--}}
{{--                                    <select class="form-control @if($errors->has('status_origin')) is-invalid @endif" name="status_origin"required>--}}
{{--                                        <option selected disabled >{{__("selected Status Origin")}}</option>--}}
{{--                                        <option value="1">{{__('Original')}}</option>--}}
{{--                                        <option value="0">{{__('Commercial')}}</option>--}}
{{--                                    </select>--}}
{{--                                </div>--}}
{{--                                @error("status_origin")--}}
{{--                                <div class="input-error">{{$message}}</div>--}}
{{--                                @enderror--}}
{{--                            </div>--}}
{{--                            <div class="col-lg-6">--}}
{{--                                <div class="form-group">--}}
{{--                                    <label class="control-label">{{__("Status")}}</label>--}}
{{--                                    <select class="form-control @if($errors->has('status_use')) is-invalid @endif" name="status_use"required>--}}
{{--                                        <option selected disabled >{{__("selected status Use")}}</option>--}}
{{--                                        <option value="1">{{__('new')}}</option>--}}
{{--                                        <option value="0">{{__('used')}}</option>--}}
{{--                                    </select>--}}
{{--                                </div>--}}
{{--                                @error("status_use")--}}
{{--                                <div class="input-error">{{$message}}</div>--}}
{{--                                @enderror--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="row">--}}
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Supplier Name")}}</label>
                                    <input class="form-control @if($errors->has('supplier_name')) is-invalid @endif" readonly type="text" name="supplier_name" placeholder="{{$providedSection->{"name_".$lang} }}" value="{{$providedSection->{"name_".$lang} }}"  required>
                                </div>
                                @error("supplier_name")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Part Load Weight")}}</label>
                                    <select class="form-control @if($errors->has('load_weight')) is-invalid @endif" name="load_weight" required>
{{--                                        <option selected disabled value=""></option>--}}
                                        @foreach($prices as $price)
                                            @if($price->id == 11)
                                            <option selected  value="{{$price->id}}">{{$price->getNameAttribute()}}</option>
                                            @endif
{{--                                            <option value="{{$price->id}}">{{$price->load_weight_from . " - " . $price->load_weight_to}}</option>--}}
                                        @endforeach
                                    </select>
                                </div>
                                @error("load_weight")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("select service")}}</label>
                                    <select id="select-type" data-region={{$region}}  data-url="{{ route("ajax.dashboard.serviceValue")}}" class="form-control @if($errors->has('type')) is-invalid @endif" name="type" required>
                                        <option selected disabled >{{__("selected type")}}</option>
                                        @foreach($type as $value)
                                            @if($value->service_type == 'ty' && $value->name_en != "All")
                                                <option data-type={{$value->name}} value="{{$value->id}}">{{$value->name}}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                @error("type")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6" style="display:none" id="service-type-d">
                                <div class="form-group">
                                    <label class="control-label" id="label_change">{{__("service value")}}</label>
                                    <select id="service-value-type" class="form-control @if($errors->has('service-value')) is-invalid @endif" name="twier_type" required>
                                        <option selected disabled>{{__("service value")}}</option>
                                    </select>
                                </div>
                                @error("service-value")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6 " style="display:none" id="service-type-ts">
                                <div class="form-group">
                                    <label class="control-label" >{{__("service size")}}</label>
                                    <select id="service-size-type" class="form-control @if($errors->has('service-value')) is-invalid @endif" name="tsize" required>
                                        <option selected disabled >{{__("service value")}}</option>
                                    </select>
                                </div>
                                @error("service-value")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6 " style="display:none" id="service-type-rs">
                                <div class="form-group">
                                    <label class="control-label" id="label_size_change">{{__("service size")}}</label>
                                    <select id="service-rsize-type" class="form-control @if($errors->has('service-value')) is-invalid @endif" name="rsize" required>
                                        <option selected disabled >{{__("service value")}}</option>
                                    </select>
                                </div>
                                @error("service-value")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>


                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Main image")}}</label>
                                    <div class="upload-button-box">
                                        <button class="btn btn-primary form-control button-upload-file" >
                                            <input class="input-file show-uploaded" data-upload-type="single" data-imgs-container-class="main-images" type="file" name="default_image" accept="image/x-png,image/gif,image/jpeg">
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{__("Main image")}}</span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-5 col-sm-6">
                                <div class="main-images"></div>
                            </div>
                        </div>

                        <hr>
                        <div class="row">
{{--                        <div class="row dis-none ads-photo" >--}}
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Product Photo")}}</label>
                                    <div>
                                        <button class="btn btn-primary form-control button-upload-file" >
                                            <input class="input-file show-uploaded" data-upload-type="multi" data-imgs-container-class="uploaded-images" multiple type="file" name="files_attach[]" accept="image/x-png,image/gif,image/jpeg">
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{__("Product Photo")}}</span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-5 col-sm-6">
                                <div class="uploaded-images"></div>
                            </div>
                        </div>


                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Create")}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("scripts")
    <script>

        $(document).ready(function (){
            $("#select-type").on("change",async function () {

                var id = $(this).val(),
                    url = $(this).data("url"),
                    region = $(this).data("region"),

                    servicesizetype = $("#service-size-type"),
                    servicevaluetype = $("#service-value-type"),
                    servicersizetype = $("#service-rsize-type"),

                    htmlElementSize="",
                    htmlElementrSize="",
                    htmlElementType="",
                    callType="get";

                console.log(servicevaluetype);


                return new Promise(resolve => {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type: callType,
                        url: url,
                        data: {id:id,region:region},
                        beforeSend: typeof beforeSendFunction == "function" ? beforeSendFunction : null,
                        success: function( response ) {

                            let data = response.data;
                            data.forEach(function (e){
                                switch (e.service_type){
                                    case "tty":
                                        htmlElementType += `<option value="${e.id}">${e.name}</option>`;
                                        document.getElementById("label_change").innerHTML = "Model brand";
                                        break;
                                    case "ts":
                                        htmlElementSize += `<option value="${e.id}">${e.name}</option>`;
                                        break;
                                    case "rs":
                                        htmlElementrSize += `<option value="${e.id}">${e.name}</option>`;
                                        document.getElementById("label_size_change").innerHTML = "Ring size";
                                        break;
                                }
                            });
                            if(htmlElementType){
                                servicevaluetype.empty().html(htmlElementType).parent().fadeIn()
                                $("#service-type-d").show();
                            }else{
                                $("#service-type-d").hide();
                            }

                            if(htmlElementSize){
                                servicesizetype.empty().html(htmlElementSize).parent().fadeIn()
                                $("#service-type-ts").show();
                            }else{
                                $("#service-type-ts").hide();
                            }

                            if(htmlElementrSize){
                                $("#service-type-rs").show();
                                servicersizetype.empty().html(htmlElementrSize).parent().fadeIn()
                            }else{
                                $("#service-type-rs").hide();
                            }
                            console.log(response);
                        },
                        error : function (response) {
                            console.log(response);
                        }
                    });
                });
            })

        });
    </script>

@endsection