@extends('frontend.layouts.app') 
@section('content')
<style type="text/css">
    .inner-pages.hp-6.full .form-group .nice-select {
        width: 100%
    }
    .provider_service{
        padding: 10px 15px;
        width: 100%;
        display: block;
        background: #0e688d;
        color: #fff;
        border-radius: 5px;
        border: 1px solid #dddddd;
        margin-top: 15px;
        text-align: center;
        cursor: pointer;
    }
    .service_pro{
        background: #eeeeee; padding: 15px 30px; padding-bottom: 30px;
    }
</style>

 <!-- START SECTION DASHBOARD -->
        <section class="user-page section-padding">
            <div class="container-fluid">
                <div class="row">
                    
                    @include('frontend.partials.user_side_bar')
                    <div class="col-lg-9 col-md-12">
                    <div class="row">
                    <div class="col-lg-8 col-md-8 col-xs-8 widget-boxed mt-33 mt-0 offset-lg-2 offset-md-3">
                        @include('frontend.partials.user_mobile_side_bar')
                        @if (session('error'))
                              <div class="alert alert-danger alert-dismissable custom-danger-box" style="margin: 15px;">
                                 <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                 <strong> {{ session('error') }} </strong>
                              </div>
                        @endif
                        <div class="widget-boxed-header">
                            <h4>Staff Details</h4>
                        </div>
                        
                        <div class="dashborad-box mb-0">
                            <div class="section-inforamation">
                                <form method="POST" action="{{ route('provider.staff.save') }}"  enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="id" value="{{$user->id}}">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>First Name *</label>
                                                <input type="text" class="form-control" name="first_name" placeholder="Enter your First name" value="{{$user->first_name}}" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Last Name *</label>
                                                <input type="text" class="form-control" name="last_name" placeholder="Enter your Last name" value="{{$user->last_name}}" required>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6 ">
                                            <div class=" form-group ">
                                                <label>Country Code *</label>                                            
                                                <select class="custom-select" name="dial_code" id="dial_code" required>
                                                    <option value="">Select Country Code</option>
                                                    @foreach ($codes as $country)
                                                    <option value="+{{ $country->country_dial_code }}" {{ $country->country_dial_code == $user->dial_code ? "selected" : ""}} >+{{ $country->country_dial_code }}</option>    
                                                    @endforeach                                
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Phone Number *</label>
                                                <input type="text" class="form-control" name="phone_number" maxlength="10" placeholder="800-7700-00" value="{{$user->phone_number}}" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Email *</label>
                                                <input type="email" class="form-control" name="email" placeholder="Enter email" value="{{$user->email}}" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Password @if($user->id == null)* @endif</label>
                                                <input type="password" class="form-control" name="password" placeholder="Enter Password"   @if($user->id == null) required @endif>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <!-- (.jpg, .jpeg, .png formats only.) -->
                                                <label>User Image </label>
                                                <input type="file" name="image"  accept=".jpg, .jpeg, .png">
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6 ">
                                            <div class=" form-group ">
                                                <label>Country *</label>                                            
                                                <select class="custom-select" name="country_id" id="country_id" required>
                                                    <option value="">Select Country</option>
                                                    @foreach ($countries as $country)
                                                    <option value="{{ $country->country_id }}" {{ $country->country_id == $user->country_id ? "selected" : ""}} >{{ $country->country_name }}</option>    
                                                    @endforeach                                
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 ">
                                            <div class="form-group ">
                                                <label>City *</label>                                            
                                                <select class="custom-select" name="city_id" id="city_id" required>
                                                    <option value="">Select City</option>
                                                    @foreach ($cities as $city)
                                                    <option value="{{ $city->id }}" {{ $city->id  == $user->city_id ? "selected" : ""}} >{{ $city->city_name_en }}</option>    
                                                    @endforeach                                
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="control-label">Passport ID</label>
                                                <input class="form-control" type="text" placeholder="Enter Passport ID" maxlength="40" id="passport_id" name="passport_id" value="{{ $user->passport_id }}">
                                            </div> 
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="control-label">Emirates ID</label>
                                                <input class="form-control" type="text" placeholder="Enter Emirates ID" maxlength="20" id="emirates_id" name="emirates_id" value="{{ $user->emirates_id }}">
                                            </div> 
                                        </div>
                                        
                                        
                                        @if($service_types)
                                        <div class="col-md-12 mb-4 service_pro">
                                            <h4>Service Providing Areas</h4>
                                            <div class="row">
                                                @foreach ($service_types as $key => $type)
                                                    <div class="col-md-4 provider_service" >
                                                        <span class="selected" data-id="96">{{$type->name_en}}</span>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        @endif
                                        @if($service_areas)
                                        <div class="col-md-12 mb-4 service_pro">
                                            <h4>Service Providing Areas</h4>
                                            <div class="row">
                                                @foreach ($service_areas as $key => $area)
                                                    <div class="col-md-4 provider_service" >
                                                        <span class="selected" data-id="96">{{$area->name_en}}</span>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        @endif
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>Address *</label>
                                                <textarea name="location" class="form-control" placeholder="Write your address here" required>{{$user->location}}</textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>About Staff *</label>
                                                <textarea name="about_me" class="form-control" placeholder="Write about userself" required>{{$user->about_me}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-lg mt-2">Submit</button>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
                    @include('frontend.partials.user_footer')
                </div>
                </div>
            </div>
        </section>
        <!-- END SECTION DASHBOARD -->

@endsection 

@section('script')
@endsection