@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>{{__("Staff")}}</h1>
            <p>{{__("All Staff 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" => "staff"])}}">{{__("Technicians")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Staff")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{$leader->full_name}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Technician")}}</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 Staff")}}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("admin.technician.staff.store", ["leader_id" => $leader->id])}}" 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" id="ServicesBox" >
                                                    @foreach($leader->technician->services as $service)
                                                        <div class="col-lg-3">
                                                            <div class="form-group">
                                                                <div class="animated-checkbox">
                                                                    <label>
                                                                        <input type="checkbox"  class="services-checkbox checked-creator-action" value="{{$service->id}}">
                                                                        <span class="label-text">{{$service->name}}</span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </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</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="text/javascript" src="{{asset("assets/js/plugins/select2.min.js")}}"></script>
    <script type="text/javascript">
        $('#UsersTypesSelect').select2();
    </script>

@endsection