@extends('layouts.app')
@push('pg_btn')
    <a href="{{route('users.index')}}" class="btn btn-sm btn-neutral">All Users</a>
@endpush
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-5">
                <div class="card-body">
                    {!! Form::open(['route' => 'users.store', 'files' => true]) !!}
                    <h6 class="heading-small text-muted mb-4">User information</h6>
                        <div class="pl-lg-4">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('name', 'Full Name', ['class' => 'form-control-label']) }}
                                        {{ Form::text('name', null, ['class' => 'form-control']) }}
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('nic', 'CNIC/Passport', ['class' => 'form-control-label']) }}
                                        {{ Form::text('nic', null, ['class' => 'form-control']) }}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('company', 'Company Name', ['class' => 'form-control-label']) }}
                                        {{ Form::select('company', [
                                            'China Power Hub Operating Company (Private) Limited 
(CPHO)' => 'China Power Hub Operating Company (Private) Limited 
(CPHO)'
                                        ], null, ['class' => 'form-control', 'placeholder' => 'Select Company']) }}
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('email', 'E-mail', ['class' => 'form-control-label']) }}
                                        {{ Form::email('email', null, ['class' => 'form-control']) }}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('phone_number', 'Certificate Name', ['class' => 'form-control-label']) }}
                                        {{ Form::text('phone_number', null, ['class' => 'form-control']) }}
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        {{ Form::label('ondate', 'On Date', ['class' => 'form-control-label']) }}
                                        {{ Form::date('ondate', null, ['class' => 'form-control']) }}
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                <div class="form-group">
                                    {{ Form::label('profile_photo', 'Photo', ['class' => 'form-control-label']) }}
                                    <div class="input-group">
                                        {{-- Hidden input field for file upload --}}
                                        <input id="profile_photo" class="form-control d-none" type="file" name="profile_photo" accept="image/*">

                                        {{-- Custom button to trigger the file input --}}
                                        <button type="button" class="btn btn-primary" onclick="document.getElementById('profile_photo').click();">
                                            Choose Photo
                                        </button>
                                    </div>
                                </div>
                            </div>

                                
                             

                                <div class="col-lg-6">
                                        <div class="form-group">
                                            {{ Form::label('title', 'Instructor', ['class' => 'form-control-label']) }}
                                            {{ Form::select('title', $instructor, null, [ 'class'=> 'selectpicker form-control', 'placeholder' => 'Select name...']) }}
                                        </div>
                                </div>




                                <div class="col-lg-6">
                                    <div class="form-group">
                                    <label id="start_label" style="display:none">Start Date</label>
                                    <input type="date" id="startdate" name="startdate" class="form-control" style="display:none" >
                                    </div>
                                </div>


                                <div class="col-lg-6">
                                    <div class="form-group">
                                    <label id="end_lable" style="display:none"> End Date </label>
                                       <input  type="date" id="enddate" name="enddate" class="form-control" style="display:none" >
                                    </div>
                                </div>

                              <!-- RoL ID Defined Here -->
                                <input hidden id="role" class="form-control" type="number"   name="role" value="2">
                                 
                                <input hidden id="password" class="form-control" type="number"   name="role" value="">
                                 
                                <input hidden id="password_confirmation" class="form-control" type="number"   name="role" value="">
                                 
                            </div>
                        </div>
                      
                        <div class="col-lg-4">
                       
                        </div>
                        <!-- Address -->
                        <!-- <h6 class="heading-small text-muted mb-4">Password information</h6>
                        <div class="pl-lg-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        {{ Form::label('password', 'Password', ['class' => 'form-control-label']) }}
                                        {{ Form::password('password', ['class' => 'form-control']) }}


                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        {{ Form::label('password_confirmation', 'Confirm password', ['class' => 'form-control-label']) }}
                                        {{ Form::password('password_confirmation', ['class' => 'form-control']) }}
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <hr class="my-4" />
                        <div class="pl-lg-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="status" value="1" class="custom-control-input" id="status">
                                        {{ Form::label('status', 'Status', ['class' => 'custom-control-label']) }}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="custom-control custom-checkbox">

                                    <input type="checkbox" name="expiry" class="custom-control-input"  id="expiry">
                                        {{ Form::label('expiry', 'expiry', ['class' => 'custom-control-label']) }}
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    {{ Form::submit('Submit', ['class'=> 'mt-5 btn btn-primary']) }}
                                </div>
                            </div>
                        </div>
                    {!! Form::close() !!}
                </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
    <script>
        jQuery(document).ready(function(){
            jQuery('#uploadFile').filemanager('file');
        })


</script>
 
 <script>

            

        jQuery(document).ready(function(){   
            
         



       
            var checkbox = document.querySelector('#expiry');
            var startDate = document.querySelector('#startdate');
            var endDate = document.querySelector('#enddate');
            var start_label = document.querySelector('#start_label');
            var end_lable = document.querySelector('#end_lable');
            

            function updateDateField(){


                if(checkbox.checked){

                   
            
                      startDate.style.display = "block";
                      endDate.style.display = "block";
                      start_label.style.display = "block";
                      end_lable.style.display = "block";
                    
                    
                    
                }else{

                      startDate.style.display = "none";
                      endDate.style.display = "none";
                      start_label.style.display = "none";
                      end_lable.style.display = "none";
                }


            }

            checkbox.addEventListener('change',function(){

                updateDateField();
                

            })


       
           
                

    });

    </script>
@endpush