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

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

    <style>
        #ServicesSelectedBox { display: flex; margin: 15px 10px; flex-wrap: wrap}
        #ServicesSelectedBox .service-item {
            display: none;
            background: var(--primary);
            padding: 5px 15px;
            color: #fff;
            border-radius: 15px;
            margin: 0 5px 8px 0;
        }
        #ServicesSelectedBox .service-item span.text{
            font-size: 17px;
            font-weight: 600;
        }
        #ServicesSelectedBox .service-item span.icon-close{
            margin-left: 7px;
            display: inline-block;
            cursor: pointer;
            font-weight: 400;
            font-size: 14px;
            transition: all .6s;
        }
        #ServicesSelectedBox .service-item span.icon-close:hover{
            color: #ededed;
            transform: rotate(180deg);
            font-weight: 700;
        }
    </style>
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("Create " . $page. " technician")}}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("admin.technician.store", ["page" => $page])}}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Full Name")}}</label>
                                    <input class="form-control @if($errors->has('full_name')) is-invalid @endif" type="text" name="full_name" placeholder="{{__("Enter Full Name")}}" value="{{inputValue("full_name")}}">
                                </div>
                                @error("full_name")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Email")}}</label>
                                    <input class="form-control @if($errors->has('email')) is-invalid @endif" type="text" name="email" placeholder="{{__("Enter Email")}}" value="{{inputValue("email")}}">
                                </div>
                                @error("email")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Region")}}</label>
                                    <select class="form-control @if($errors->has('region')) is-invalid @endif"  name="region">
                                        <option value="1">{{__('كرخ')}}</option>
                                        <option value="2">{{__('رصافة')}}</option>
                                    </select>
                                </div>
                                @error("region")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Phone Number")}} {{__("1")}}</label>
                                    <input class="form-control @if($errors->has('phone_number')) is-invalid @endif" type="text" name="phone_number_1" placeholder="{{__("Enter Phone number")}}" value="{{inputValue("phone_number_1")}}">
                                </div>
                                @error("phone_number_1")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Phone Number")}}  {{__("2")}}</label>
                                    <input class="form-control @if($errors->has('phone_number')) is-invalid @endif" type="text" name="phone_number_2" placeholder="{{__("Enter Phone number")}}" value="{{inputValue("phone_number_2")}}">
                                </div>
                                @error("phone_number_2")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Address")}}</label>
                                    <input class="form-control @if($errors->has('address')) is-invalid @endif" type="text" name="address" placeholder="{{__("Enter address")}}" value="{{inputValue("address")}}">
                                </div>
                                @error("address")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Birthday Date")}}</label>
                                    <input class="form-control @if($errors->has('birth_date')) is-invalid @endif" type="date" name="birth_date" value="{{inputValue("birth_date")}}">
                                </div>
                                @error("birth_date")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Gender")}}</label>
                                    <select class="form-control @if($errors->has('gender')) is-invalid @endif"  name="gender">
                                        <option value="1">{{__('Male')}}</option>
                                        <option value="2">{{__('Female')}}</option>
                                    </select>
                                </div>
                                @error("gender")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("User Category")}}</label>
                                    <select class="form-control @if($errors->has('technician_category')) is-invalid @endif"  name="technician_category">
                                        <option value="3">{{__('Bronze')}}</option>
                                        <option value="2">{{__('Silver')}}</option>
                                        <option value="1">{{__('Gold')}}</option>
                                    </select>
                                </div>
                                @error("technician_category")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Experience Years")}}</label>
                                    <div class="input-group">
                                        <input class="form-control @if($errors->has('experience_years')) is-invalid @endif" type="number" name="experience_years" placeholder="{{__("Enter Experience Years")}}" value="{{inputValue("experience_years")}}">
                                        <div class="input-group-append"><span class="input-group-text"> Years</span></div>
                                    </div>
                                </div>
                                @error("experience_years")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="exampleSelect1" >{{__("Main Specialty")}}</label>
                                    <select class="form-control form-input select2 @if($errors->has('main_specialty')) is-invalid @endif" name="main_specialty[]" id="UsersTypesSelect" multiple="" style="width: 100%">
                                        <optgroup label="Select Types Related it">
                                            @foreach($mainCategories as $category)
                                                <option value="{{$category->id}}">{{$category->name}}</option>
                                            @endforeach
                                        </optgroup>
                                    </select>
                                </div>
                                @error("main_specialty")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="quantity-prices-box col-12" >
                                <div class="row option-quantity-box">
                                    <div class="col-lg-5 col-md-12 ">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{__('Price From')}}</label>
                                                    <input class="form-control" type="text" name="price_from[]" placeholder="{{__('Enter Price')}}" value="">
                                                    <div class="invalid-feedback" style="display: none"></div>
                                                </div>
                                                @error("price_from")
                                                <div class="input-error">{{$message}}</div>
                                                @enderror
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{__('Price To')}}</label>
                                                    <input class="form-control" type="text" name="price_to[]" placeholder="{{__('Enter Price')}}" value="">
                                                    <div class="invalid-feedback" style="display: none"></div>
                                                </div>
                                                @error("price_to")
                                                <div class="input-error">{{$message}}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 col-md-12 m-auto">
                                        <div class="form-group">
                                            <label class="control-label">{{__("Commission")}}</label></span>
                                            <div class="input-group">
                                                <input class="form-control @if($errors->has('application_commission')) is-invalid @endif" type="number" name="application_commission" placeholder="{{__("Enter application commission")}}" value="{{inputValue("application_commission") ?? 0}}">
                                                <div class="input-group-append"><span class="input-group-text">%</span></div>
                                            </div>
                                        </div>
                                        @error("application_commission")
                                        <div class="input-error">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mt-3 mb-3">
                                <span class="btn btn-primary add-new-row"><i class="fas fa-plus"></i> {{__("Add New Row")}}</span>
                            </div>
                            <div class="prices-infinity col-12">
                                <div class="row">
                                    <div class="col-lg-5 col-md-12 ">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{__('Price From')}}</label>
                                                    <input class="form-control" type="text" name="price_from_infinity" placeholder="{{__('Enter Price')}}" value="">
                                                    <div class="invalid-feedback" style="display: none"></div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{__('Price To')}}</label>
                                                    <div class="form-control" style="border-color: #eee;background: #eee;color: #999;font-size: 14px;"><i class='fas fa-infinity'></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-5 col-md-12 m-auto">
                                        <div class="form-group">
                                            <label class="control-label">{{__('Commission')}}</label>
                                            <div class="input-group">
                                                <input class="form-control" type="text" name="commission_infinity" placeholder="{{__('Enter Commission')}}"  value="">
                                                <div class="input-group-append"><span class="input-group-text">%</span></div>
                                            </div>
                                            <div class="invalid-feedback" style="display: none"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <hr>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Profile 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="profile_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>
                        <hr>
                        <div class="row">
                            <div class="col-6">
                                <!-- Button trigger modal -->
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                    {{__("Services")}}
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-xl">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">{{__("Services")}}</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="row">
                                                    {{--                                                    <div class="col-lg-6">--}}
                                                    {{--                                                        <div class="form-group">--}}
                                                    {{--                                                            <label class="control-label">{{__("Main Categories")}}</label>--}}
                                                    {{--                                                            <select class="form-control"  name="main_categories" id="MainCategories" >--}}
                                                    {{--                                                                <option value="">{{__('None')}}</option>--}}
                                                    {{--                                                                @foreach($mainCategories as $category)--}}
                                                    {{--                                                                    <option value="{{$category->id}}" data-sub-url="{{route("ajax.sub_category.index", ["main_id" => $category->id])}}">{{$category->name}}</option>--}}
                                                    {{--                                                                @endforeach--}}
                                                    {{--                                                            </select>--}}
                                                    {{--                                                        </div>--}}
                                                    {{--                                                    </div>--}}
                                                    {{--                                                    <div class="col-lg-6" id="SubCategoriesBox" style="display: none">--}}
                                                    {{--                                                        <div class="form-group">--}}
                                                    {{--                                                            <label class="control-label">{{__("Sub Categories")}}</label>--}}
                                                    {{--                                                            <select class="form-control"  name="subcategories" id="SubCategories">--}}
                                                    {{--                                                                <option value="">{{__('None')}}</option>--}}
                                                    {{--                                                            </select>--}}
                                                    {{--                                                        </div>--}}
                                                    {{--                                                    </div>--}}
                                                    <div class="col-lg-12">
                                                        <div class="tile">
                                                            <div class="tile-body">
                                                                <div class="">
                                                                    <div class="tree-container">
                                                                        <ul class="tree">
                                                                            <div class="row">
                                                                                @foreach($mainCategories as $category)
                                                                                    <div class="col-lg-6">
                                                                                        <li class="has-tree show-sub">
                                                                                            <input type="checkbox" class="remove-all-checkbox mr-1" data-sub-url="{{route("ajax.sub_category.index", ["main_id" => $category->id])}}" value="{{$category->id}}">
                                                                                            <div class="node action-tree" data-id="{{$category->id}}" data-page="create" data-url="{{route("ajax.sub-category.show")}}">
                                                                                                <i class="fas fa-caret-right arrow"></i>
                                                                                                {{$category->name}}
                                                                                            </div>
                                                                                        </li>
                                                                                    </div>
                                                                                @endforeach
                                                                            </div>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr>
                                                <div class="row" id="ServicesBox" style="display: none">

                                                </div>
                                                <div id="ServicesSelectedBox" style="">

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

                            </div>

                            <div class="col-6">
                                <!-- Button trigger modal -->
                                <button type="button" class="btn btn-primary" id="ServicesCommissionButton" data-toggle="modal" data-target="#ServicesCommission" disabled>
                                    {{__("Services Commission")}}
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="ServicesCommission" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-xl">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">{{__("Services Commission")}}</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="col-lg-7" id="ServiceCommission">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </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")

    <!-- Data table plugin-->
    <script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
    <script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable();</script>
    <script type="module" src="{{asset("assets/js/pages/create_technician.js")}}"></script>
    <script type="module" src="{{asset("assets/js/pages/commission.js")}}"></script>
    <script type="module" src="{{asset("assets/js/pages/category.js")}}"></script>

    <script type="text/javascript" src="{{asset("assets/js/plugins/select2.min.js")}}"></script>
    <script type="text/javascript">
        $('#UsersTypesSelect').select2();
    </script>

    @include("admin.commissions.templates")
@endsection