@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> {{__("Services")}}</h1>
            <p>{{__("Create Services")}}</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("admin.service.index", ["main_id" => $subCategory->mainCategory->id, "sub_id" => $subCategory->id])}}">Services</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Create")}}"</a></li>
        </ul>
    </div>
@endsection

@section("css-links")
    <link rel="stylesheet" href="{{asset("assets/css/utils/week_days.css")}}">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("Create New Service")}}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("ajax.service.store", ["main_id" => $subCategory->mainCategory->id, "sub_id" => $subCategory->id])}}" enctype="multipart/form-data" data-redirect-page="{{route("admin.service.index", ["main_id" => $subCategory->mainCategory->id, "sub_id" => $subCategory->id])}}">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("English Service Name")}}</label>
                                    <input class="form-control" type="text" name="name_en" placeholder="{{__('Enter English Service Name')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Arabic Service Name")}}</label>
                                    <input class="form-control" type="text" name="name_ar" placeholder="{{__('Enter Arabic Service Name')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Urdu Service Name")}}</label>
                                    <input class="form-control" type="text" name="name_ur" placeholder="{{__('Enter Urdu Service Name')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("English Service Note")}}</label>
                                    <input class="form-control" type="text" name="service_note_en" placeholder="{{__('Enter English Service Note')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Arabic Service Note")}}</label>
                                    <input class="form-control" type="text" name="service_note_ar" placeholder="{{__('Enter Arabic Service Note')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Urdu Service Note")}}</label>
                                    <input class="form-control" type="text" name="service_note_ur" placeholder="{{__('Enter Urdu Service Note')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Title Arabic Commission")}}</label>
                                    <input class="form-control" type="text" name="title_comission_ar" placeholder="{{__('Enter Arabic Title Commission')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Title English Commission")}}</label>
                                    <input class="form-control" type="text" name="title_comission_en" placeholder="{{__('Enter English Title Commission')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Title Urdu Commission")}}</label>
                                    <input class="form-control" type="text" name="title_comission_ur" placeholder="{{__('Enter Urdu Title Commission')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Commission")}}</label>
                                    <input class="form-control" type="text" name="addition_commission" placeholder="{{__('Enter Commission')}}" value="0">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Price")}}</label>
                                    <input class="form-control" type="text" name="price" placeholder="{{__('Enter Price')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Price Per Kilo")}}</label>
                                    <input class="form-control" type="text" name="price_per_kilo" placeholder="{{__('Enter Price Per Kilo')}}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
{{--                            <div class="col-lg-6">--}}
{{--                                <div class="form-group">--}}
{{--                                    <label class="control-label">{{__("Guarantee")}}</label>  <span style="color: #f00; font-size: 12px">* guarantee in days</span>--}}
{{--                                    <input class="form-control" type="number" name="guarantee_days" placeholder="{{__('Enter Guarantee')}}" value="0">--}}
{{--                                    <div class="invalid-feedback" style="display: none"></div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="col-lg-6">--}}
{{--                                <div class="form-group">--}}
{{--                                    <label for="exampleSelect1">{{__("Price Type")}}</label>--}}
{{--                                    <select class="form-control" id="PriceType" name="price_type" >--}}
{{--                                        <option value="u" {{selected("price_type", "u")}}>{{__("Unknown")}}</option>--}}
{{--                                        <option value="f" {{selected("price_type", "f")}}>{{__("Fixed")}}</option>--}}
{{--                                        <option value="r" {{selected("price_type", "r")}}>{{__("Range")}}</option>--}}
{{--                                    </select>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="col-lg-6">--}}
{{--                                <label class="control-label">{{__("Is The Notes In His Orders Required ?")}}</label>--}}
{{--                                <div class="toggle-flip">--}}
{{--                                    <label>--}}
{{--                                        <input type="checkbox" class="checked-action" name="notes_required" /><span class="flip-indecator" data-toggle-on="{{__('ON')}}" data-toggle-off="{{__('OFF')}}" ></span>--}}
{{--                                    </label>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="col-lg-6">--}}
{{--                                <label class="control-label">{{__("Does Has Counter in His Orders ?")}}</label>--}}
{{--                                <div class="toggle-flip">--}}
{{--                                    <label>--}}
{{--                                        <input type="checkbox" class="checked-action" name="has_counter" /><span class="flip-indecator" data-toggle-on="{{__('ON')}}" data-toggle-off="{{__('OFF')}}" ></span>--}}
{{--                                    </label>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="col-lg-6 counter-box" style="display:none;">--}}
{{--                                <label class="control-label">{{__("Does Has Quantity in His Orders ?")}}</label>--}}
{{--                                <div class="toggle-flip">--}}
{{--                                    <label>--}}
{{--                                        <input type="checkbox" class="checked-action" name="has_quantity" id="HasCounter" /><span class="flip-indecator" data-toggle-on="{{__('ON')}}" data-toggle-off="{{__('OFF')}}" ></span>--}}
{{--                                    </label>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                        </div>

                        <hr>

                        <div class="row" id="PricesControl"></div>

{{--                        <hr>--}}

                        <div class="row">
{{--                            <div class="col-lg-6">--}}
{{--                                <div id="ServiceAvailability" >--}}
{{--                                    <!-- Button trigger modal -->--}}
{{--                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Schedule">--}}
{{--                                        Schedule Service--}}
{{--                                    </button>--}}

{{--                                    <!-- Modal Time Week Day-->--}}
{{--                                    <div class="modal fade" id="Schedule" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">--}}
{{--                                        <div class="modal-dialog modal-lg">--}}
{{--                                            <div class="modal-content">--}}
{{--                                                <div class="modal-header text-center">--}}
{{--                                                    <h5 class="modal-title" id="exampleModalLabel">Service Availability Control</h5>--}}
{{--                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">--}}
{{--                                                        <span aria-hidden="true">&times;</span>--}}
{{--                                                    </button>--}}
{{--                                                </div>--}}
{{--                                                <div class="modal-body">--}}

{{--                                                    <div class="days-week-box" data-alldays-text="{{__("All Days")}}">--}}
{{--                                                        <div id="DaysSection" >--}}
{{--                                                            <div class="header"><span>Week Days</span></div>--}}
{{--                                                            <div class="days-checkbox-group" id="checkboxes">--}}
{{--                                                                <ul>--}}
{{--                                                                    <li>--}}
{{--                                                                        <input type="checkbox" name="days[sun]" class="days-checkbox" id="sun" @if(old("days") !== null){{checkedFromGroup("days", "sun", "on")}} @else checked @endif />--}}
{{--                                                                        <label for="sun">Sunday</label>--}}
{{--                                                                    </li>--}}
{{--                                                                    <li>--}}
{{--                                                                        <input type="checkbox" name="days[mon]" class="days-checkbox" id="mon" @if(old("days") !== null){{checkedFromGroup("days", "mon", "on")}} @else checked @endif />--}}
{{--                                                                        <label for="mon">Monday</label>--}}
{{--                                                                    </li>--}}
{{--                                                                    <li>--}}
{{--                                                                        <input type="checkbox" name="days[tue]" class="days-checkbox" id="tue" @if(old("days") !== null){{checkedFromGroup("days", "tue", "on")}} @else checked @endif />--}}
{{--                                                                        <label for="tue">Tuesday</label>--}}
{{--                                                                    </li>--}}
{{--                                                                    <li>--}}
{{--                                                                        <input type="checkbox" name="days[wed]" class="days-checkbox" id="wed" @if(old("days") !== null){{checkedFromGroup("days", "wed", "on")}} @else checked @endif />--}}
{{--                                                                        <label for="wed">Wednesday</label>--}}
{{--                                                                    </li>--}}
{{--                                                                    <li>--}}
{{--                                                                        <input type="checkbox" name="days[thur]" class="days-checkbox" id="thur" @if(old("days") !== null){{checkedFromGroup("days", "thur", "on")}} @else checked @endif />--}}
{{--                                                                        <label for="thur">Thursday</label>--}}
{{--                                                                    </li>--}}
{{--                                                                    <li>--}}
{{--                                                                        <input type="checkbox" name="days[fri]" class="days-checkbox" id="fri" @if(old("days") !== null){{checkedFromGroup("days", "fri", "on")}} @else checked @endif />--}}
{{--                                                                        <label for="fri">Friday</label>--}}
{{--                                                                    </li>--}}
{{--                                                                    <li>--}}
{{--                                                                        <input type="checkbox" name="days[sat]" class="days-checkbox" id="sat" @if(old("days") !== null){{checkedFromGroup("days", "sat", "on")}} @else checked @endif />--}}
{{--                                                                        <label for="sat">Saturday</label>--}}
{{--                                                                    </li>--}}
{{--                                                                </ul>--}}
{{--                                                            </div>--}}
{{--                                                            <div id="allChecked" class="days-selected-text mb-4">--}}
{{--                                                                <span>{{__("All Days")}}</span>--}}
{{--                                                            </div>--}}
{{--                                                            <div class="text-center">--}}
{{--                                                                <div class="invalid-feedback days" style="display: none"></div>--}}
{{--                                                            </div>--}}
{{--                                                            <hr>--}}
{{--                                                        </div>--}}
{{--                                                        <div id="TimesSection" >--}}
{{--                                                            <div class="header"><span>Times Settings</span></div>--}}
{{--                                                            <div class="time">--}}
{{--                                                                <div class="row">--}}
{{--                                                                    <div class="col-6  text-center">--}}
{{--                                                                        <div class="form-group">--}}
{{--                                                                            <label>From</label>--}}
{{--                                                                            <input type="time" name="time_from" value="{{old("time_from") !== null ? inputValue("time_from") : "08:00:00"}}" id="TimeFrom">--}}
{{--                                                                            <div class="invalid-feedback" style="display: none"></div>--}}
{{--                                                                        </div>--}}
{{--                                                                    </div>--}}
{{--                                                                    <div class="col-6  text-center">--}}
{{--                                                                        <div class="form-group">--}}
{{--                                                                            <label>To</label>--}}
{{--                                                                            <input type="time" name="time_to" value="{{old("time_to") !== null ? inputValue("time_to") : "23:00:00"}}" id="TimeTo">--}}
{{--                                                                            <div class="invalid-feedback" style="display: none"></div>--}}
{{--                                                                        </div>--}}
{{--                                                                    </div>--}}
{{--                                                                </div>--}}
{{--                                                                <div class="row">--}}
{{--                                                                    <div class="col-6 m-auto text-center">--}}
{{--                                                                        <div class="form-group">--}}
{{--                                                                            <label>Time Slice</label>--}}
{{--                                                                            <input type="number" name="time_slice" value="{{old("time_slice") !== null ? inputValue("time_slice") : 60}}"--}}
{{--                                                                                   min="30" max="360" step="30" id="Slice" data-meridiem-am = "{{__("AM")}}" data-meridiem-pm = "{{__("PM")}}">--}}
{{--                                                                            <span class="ml-2">Minutes</span>--}}
{{--                                                                            <div class="invalid-feedback" style="display: none"></div>--}}
{{--                                                                        </div>--}}

{{--                                                                    </div>--}}
{{--                                                                </div>--}}
{{--                                                                <div class="row mt-2">--}}
{{--                                                                    <div class="col-lg-10 m-auto">--}}
{{--                                                                        <div class="box-checking-container" id="TimeView">--}}
{{--                                                                        </div>--}}
{{--                                                                    </div>--}}
{{--                                                                </div>--}}
{{--                                                                <div class="text-center">--}}
{{--                                                                    <div class="invalid-feedback times" style="display: none"></div>--}}
{{--                                                                </div>--}}
{{--                                                            </div>--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                            <div class="col-lg-6">
                                <div id="ServiceAvailability" >
                                    <!-- Button trigger modal -->
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Questions">
                                        {{__("Questions")}}
                                    </button>

                                    <!-- Modal Time Week Day-->
                                    <div class="modal fade" id="Questions" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header text-center">
                                                    <h5 class="modal-title" id="exampleModalLabel">{{__("General Questions")}}</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="p-2">
                                                        @foreach($questions as $question)
                                                            <div class="form-group mb-2">
                                                                <div class="animated-checkbox">
                                                                    <label>
                                                                        <input type="checkbox" name="questions[]" value="{{$question->id}}"><span class="label-text"> {{$question->text}}</span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Service Photo")}}</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="uploaded-images" type="file" name="service_photo">
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{__("Upload Photo")}}</span>
                                            </span>
                                        </button>
                                    </div>
                                    <div class="invalid-feedback" style="display: none"></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 type="module" src="{{asset("assets/js/pages/service.js")}}"></script>
    <script type="module" src="{{asset("assets/js/pages/services/requests.js")}}"></script>


    @include("admin.service.templates")


@endsection