@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">Add</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.store')}}" method="post" id="addUserForm" 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="" class="form-control showPicker" >

                                     <input type="hidden" name="accident_opration" id="accident_opration" value="">
                                     <input type="hidden" name="id" id="id" value="">
                                     <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="" 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}}">{{$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>
                                    <p class="text-danger" id="accidentLocationError"></p>
                                </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="" 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>
                                    <p class="text-danger" id="documentsError"></p>
                                </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="" class="form-control" >
                                       
                                        <button type="button" class="btn btn-outline-secondary" id="togglePassword">
                                            <i class="bi bi-eye-slash" id="toggleIcon"></i>
                                        </button>
                                        @error('password')
                                        <p class="text-danger">{{ $message }} </p>
                                       @enderror 
                                    </div>
                                    <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="" 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}}">{{$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="" 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="" 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">
                                                <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">
                                                <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">
                                    @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}}">
                                            <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>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                                aria-label="Close">Close</button>
                        </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