@extends('layouts.master')
<style>
      .switch {
            position: relative;
            display: block;
            vertical-align: top;
            width: 68px;
            height: 20px;
            margin: 0 10px 10px 20px;
/*            background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);*/
/*            background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);*/
            border-radius: 18px;
            box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            box-sizing: content-box;
        }

        .switch-input {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            box-sizing: content-box;
        }

        .switch-label {
            width: 70px;
            position: relative;
            display: block;
            height: 28px;
            font-size: 14px;
            text-transform: uppercase;
/*            background: #eceeef;*/
            background: red;
            border-radius: inherit;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
            box-sizing: content-box;
        }

        .switch-label:before,
        .switch-label:after {
            position: absolute;
            top: 50%;
            margin-top: -.5em;
            line-height: 1;
            -webkit-transition: inherit;
            -moz-transition: inherit;
            -o-transition: inherit;
            transition: inherit;
            box-sizing: content-box;
        }

        .switch-label:before {
            content: attr(data-off);
            right: 11px;
/*            color: #aaaaaa;*/
            color: #FFFFFF;
            text-shadow: 0 1px rgba(255, 255, 255, 0.5);
        }

        .switch-label:after {
            content: attr(data-on);
            left: 11px;
            color: #FFFFFF;
            text-shadow: 0 1px rgba(0, 0, 0, 0.2);
            opacity: 0;
        }

        .switch-input:checked~.switch-label {
/*            background: #1b84ff;*/
            background:green;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
        }

        .switch-input:checked~.switch-label:before {
            opacity: 0;
        }

        .switch-input:checked~.switch-label:after {
            opacity: 1;
        }

        .switch-handle {
            position: absolute;
            top: 2px;
            right: 42px;
            width: 24px;
            height: 24px;
            background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
            background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
            border-radius: 100%;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        }

        .switch-handle:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -6px 0 0 -6px;
            width: 12px;
            height: 12px;
            background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
            background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
            border-radius: 6px;
            box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
        }

        .switch-input:checked~.switch-handle {
            left: 45px;
            box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
        }

        .switch-label,
        .switch-handle {
            transition: All 0.3s ease;
            -webkit-transition: All 0.3s ease;
            -moz-transition: All 0.3s ease;
            -o-transition: All 0.3s ease;
        }
</style>
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-wrap flex-stack pb-7">
                <div class="d-flex flex-wrap align-items-center my-1">
                    <h3 class="fw-bold me-5 my-1">User <span class="text-muted">Edit</span>
                    </h3>
                    <h3 class="fw-bold me-5 my-1"></h3>
                </div>
            </div>
            <div class="card card-flush">
                <div class="card-body">
                    <div class=" pb-lg-11 pb-7">
                        <div class="container">
                        <form action="{{route('myProfile.update')}}" method="post"  enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">

                        <div class="col-md-4">
                                <label class="col-lg-6 col-form-label fw-semibold fs-6 required">Name</label>
                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                     <input type="text" name="name" id="name" value="{{$user->name}}" class="form-control showPicker" >
                                        <input type="hidden" name="id" id="id" value="{{$user->id}}">
                                     <input type="hidden" name="acci_driver_Id" value="">
                                     @error('name')
                                        <p class="text-danger">{{ $message }} </p>
                                     @enderror
                                <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                    <p class="text-danger" id="nameError"></p>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <label class="col-lg-6 col-form-label fw-semibold fs-6">Email</label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="email" name="email" id="email" value="{{$user->email}}" class="form-control showPicker" >
                                        @error('email')
                                        <p class="text-danger">{{ $message }} </p>
                                       @enderror
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                    <p class="text-danger" id="emailError"></p>
                                </div>
                            </div>

                            <div class="col-md-4">
                            @php
                               $user_types = config('custom.user_type');
                            @endphp
                                <label class="col-lg-8 col-form-label fw-semibold fs-6 required">User Type</label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <select class="form-select" data-control="select2"
                                                                data-hide-search="true"
                                                                data-placeholder="Select a User Type"
                                                                id="user_type" name="user_type" >
                                                                <option value="">Please select </option>
                                                                @foreach($user_types as $key => $user_type)
                                                                <option value="{{$key}}" @if($key == $user->user_type) selected @endif>{{$user_type}}</option>
                                                                @endforeach
                                        </select>
                                        @error('user_type')
                                        <p class="text-danger">{{ $message }} </p>
                                       @enderror
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                   
                                </div>
                            </div>                      
                            
                            
                        </div>
                        <div class="row">
                          
                           
                            
                        <div class="col-md-4">
                                <label class="col-lg-8 col-form-label fw-semibold fs-6 required">Username</label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="username" id="username" value="{{ $user->username}}" class="form-control">  
                                        @error('username')
                                        <p class="text-danger">{{ $message }} </p>
                                       @enderror                                    
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                 
                                </div>
                            </div>    
                            
                            <div class="col-md-4">
                                <label class="col-lg-8 col-form-label fw-semibold fs-6 required">Password</label>
                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <div class="input-group">
                                        <input type="password" name="password" id="password" value="{{ $user->password}}" class="form-control" required>
                                     
                                        <button type="button" class="btn btn-outline-secondary" id="togglePassword">
                                            <i class="bi bi-eye-slash" id="toggleIcon"></i>
                                        </button>
                                    
                                    </div>
                                    @error('password')                                      
                                       <p class="text-danger">{{ $message }} </p>
                                      @enderror 
                                    <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                
                                </div>
                            </div>      

                            <div class="col-md-4">
                                <label class="col-lg-8 col-form-label fw-semibold fs-6 ">Commission</label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="number" name="commission" id="commission" value="{{ $user->commission}}" class="form-control ">                                      
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                 
                                </div>
                            </div>
                         </div>
                        <div class="row">
                           
                        <div class="col-md-4">
                                        <label class="col-lg-8 col-form-label fw-semibold fs-6">Branch</label>
                                        <select class="form-select" data-control="select2"
                                                                data-hide-search="true"
                                                                data-placeholder="Select a User Type"
                                                                id="BRANCH" name="BRANCH">
                                                                <option value="">Please select
                                                                </option>
                                                                @foreach($branchs as $branch)
                                                                <option value="{{$branch->BRANCH_ID}}" @if($branch->BRANCH_ID == $user->BRANCH) selected @endif>{{$branch->TITLE}}</option>
                                                                @endforeach
                                        </select>
                                            <div  class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                          
                                        </div>
                            
                                
                                    <div class="col-md-4">
                                        <label class="col-lg-8 col-form-label fw-semibold fs-6 ">Twilio Phone</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" name="TWILIO_PHONE" id="TWILIO_PHONE" value="{{$user->TWILIO_PHONE}}" class="form-control ">
                                            <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        
                                        </div>
                                    </div>   
                                    <div class="col-md-4">
                                        <label class="col-lg-8 col-form-label fw-semibold fs-6 ">Cell Phone</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                <input type="text" name="CELL_PHONE" id="CELL_PHONE" value="{{$user->CELL_PHONE}}" class="form-control ">
                                            <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                          
                                        </div>
                                    </div>   
                                    
                        </div>
                        <div class="row">
                        <div class="col-md-4">
                                        <label class="col-lg-8 col-form-label fw-semibold fs-6 ">Vendor</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <label class="switch">
                                                <input class="switch-input" type="checkbox" name="dark_mode" value="1"
                                                    id="dark_mode_toggle" @if($user->dark_mode == 1) checked @endif>
                                                <span class="switch-label fw-bold" data-on="YES" data-off="NO"></span>
                                                <span class="switch-handle"></span>
                                            </label>
                                            <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                          
                                        </div>
                                    </div>    

                                    <div class="col-md-4">
                                        <label class="col-lg-8 col-form-label fw-semibold fs-6 ">Status</label>
                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <label class="switch">
                                                <input class="switch-input" type="checkbox" name="active" value="1"
                                                    id="active_toggle"  @if($user->active == 1) checked @endif>
                                                <span class="switch-label fw-bold" data-on="YES" data-off="NO"></span>
                                                <span class="switch-handle"></span>
                                            </label>
                                            <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                           
                                        </div>
                                    </div>    

                        </div>
                        <hr>
                        <div class="row">
                            <label class="col-lg-8 col-form-label fw-semibold fs-6">Profile</label>
                            <div class="col-md-12">
                              
                                <div class="d-flex flex-wrap">
                                @php
                                    $str = $user->PROFILES;
                                    $profilearray = explode(',', $str); // Convert the string to an array
                                @endphp

                                @foreach($billprofiles as $key => $billprofile)
                                    <div class="form-check me-3 mb-2" style="width: 20%;">
                                        <input 
                                            type="checkbox" 
                                            class="form-check-input" 
                                            name="PROFILES[]" 
                                            id="profile_{{$billprofile->PRO}}" 
                                            value="{{$billprofile->PRO}}" 
                                            @if(in_array($billprofile->PRO, $profilearray)) checked @endif
                                        >
                                        <label class="form-check-label" for="profile_{{$billprofile->PRO}}">{{$billprofile->NAME}}</label>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                        </div>
                     
                        <div class="mt-10">
                            <button type="submit" id="expensebtn" class="btn btn-primary">submit</button>
                             <a href="{{route('myProfile.index')}}" class="btn btn-secondary">Close</a>
                           
                        </div>
                    </div>
                </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    <script>
    

        $(document).ready(function () {
            $('#togglePassword').on('click', function () {
                const passwordInput = $('#password');
                const toggleIcon = $('#toggleIcon');

                if (passwordInput.attr('type') === 'password') {
                    passwordInput.attr('type', 'text');
                    toggleIcon.removeClass('bi-eye-slash').addClass('bi-eye');
                } else {
                    passwordInput.attr('type', 'password');
                    toggleIcon.removeClass('bi-eye').addClass('bi-eye-slash');
                }
            });
        });
    </script>
@endsection