@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>{{__("Sub Categories")}}</h1>
            <p>{{__("Create Sub Category")}}</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.main_category.index")}}">{{__("Main Categories")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{$mainCategory->name}}</a></li>
            <li class="breadcrumb-item"><a href="{{route("admin.sub_category.index", ["main_id" => $mainCategory->id])}}">{{__("Sub Categories")}}</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")}}">
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("Create New Sub Category")}}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("admin.sub_category.store", ["main_id" => $mainCategory->id])}}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("English Sub Category Name")}}</label>
                                    <input class="form-control @if($errors->has('name_en')) is-invalid @endif" type="text" name="name_en" placeholder="{{__("Enter English Sub Category Name")}}" value="{{inputValue("name_en")}}">
                                </div>
                                @error("name_en")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Arabic Sub Category Name")}}</label>
                                    <input class="form-control @if($errors->has('name_ar')) is-invalid @endif" type="text" name="name_ar" placeholder="{{__("Enter Arabic Sub Category Name")}}" value="{{inputValue("name_ar")}}">
                                </div>
                                @error("name_ar")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                        </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>
                        <hr> --}}

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Sub Category Photo")}}</label>
                                    <div>
                                        <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="sub_category_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>
                                @error("sub_category_photo")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </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 src="{{asset("assets/js/utils/week_days.js")}}"></script>
    <script  src="{{asset("assets/js/pages/create_sub_category.js")}}"></script>

    <script>
        let htmlElements = ``;
        if(timeFromElement.val() !== null && sliceElement.val() !== null && timeToElement.val() !== null ){
            let parts = (timeFromElement.val()).split(":")
            let timeFrom = parseFloat(`${parseInt(parts[0])}.${(parseInt(parts[1]) / 60) * 10}`)

            parts = (timeToElement.val() === "23:59" ? "24:00" : timeToElement.val()).split(":")

            let timeTo =  parseFloat(`${parseInt(parts[0])}.${(parseInt(parts[1]) / 60) * 10}`)
            let slice = parseFloat(sliceElement.val()) / 60
            if((timeTo - timeFrom) % slice === 0){
                htmlElements += `<div class="box-checking">
                                <input type="checkbox" class="select-all">
                                <label for="">All</label>
                            </div>`;
                for (let time = timeFrom; time < timeTo; time += slice){
                    let endTime = time + slice;
                    let startMinutes = (time - Math.floor(time)) * 60,
                        startHour = time - (time - Math.floor(time)),

                        endMinutes = (endTime - Math.floor(endTime)) * 60,
                        endHour = endTime - (endTime - Math.floor(endTime)),
                        startMeridiem = meridiemAM,
                        endMeridiem = meridiemAM
                    let inputValue = (startHour < 10 ?`0${startHour}` : startHour) + ":" + (startMinutes < 10 ?`0${startMinutes}` : startMinutes)


                    if(startHour >= 12){
                        startHour =  startHour - 12
                        startMeridiem = meridiemPM
                    }
                    if(endHour >= 12){
                        endHour =  endHour - 12
                        if(endHour === 12){
                            endHour = 0
                            endMeridiem = meridiemAM
                        }else
                            endMeridiem = meridiemPM

                    }
                    startHour = startHour < 10 ?`0${startHour}` : startHour;
                    startMinutes = startMinutes < 10 ?`0${startMinutes}` : startMinutes;

                    endHour = endHour < 10 ?`0${endHour}` : endHour;
                    endMinutes = endMinutes < 10 ?`0${endMinutes}` : endMinutes;

                    htmlElements += `
                    <div class="box-checking">
                        <input type="checkbox" name="times[]" class="checkbox" value="${inputValue  }">
                        <label for="">${startHour}:${startMinutes} ${startMeridiem} - ${endHour}:${endMinutes} ${endMeridiem}</label>
                    </div>
                    `;
                }
            }
        }
        $("#TimeView").html(htmlElements)


    </script>
@endsection