@extends('template.app')

@section('meta')
@endsection

@section('title')
    User Insert
@endsection

@section('styles')
<link href="{{ asset('assets/css/dropify.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/sweetalert2.bundle.css') }}" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
 <!-- <link id="bsdp-css" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet"> -->
<style>
    .col-sm-5{
        font-size :15px;
    }
    .form-control{
        height: 32px;
        font-size: 14px;
    }
    .input-transparent{
        color: rgba(244, 244, 245, .6);
        background: rgba(0, 0, 0, .24);
        border-color: rgba(0, 0, 0, .09);
    }
    .custom-form-spacing {
      margin-bottom: 5px;
    }
    
    
    .buttons-group {
        margin-top: 15px;
        padding: 10px;
    }
    
    .btn-sm {
        padding: 0.25rem 1.5rem;
        margin-top: 20px;
        justify-content: center;
    }
    .buttons-group .btn {
        padding: 26px 60px;
        font-size: 14px;
        border-radius: 4px;
    }
</style>
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Users</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('user') }}" class="text-muted">Users</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Insert</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('user.insert') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('POST')

                           <div class="column-layout">
                            <div class="form-group">
                                <label for="first_name">First Name</label>
                                <input type="text" name="first_name" id="first_name" class="form-control input-transparent" placeholder="Please enter first name" value="{{ @old('first_name') }}">
                                <span class="kt-form__help error first_name"></span>
                            </div>
                            <div class="form-group">
                                <label for="last_name">Last Name</label>
                                <input type="text" name="last_name" id="last_name" class="form-control input-transparent" placeholder="Please enter last name" value="{{ @old('last_name') }}">
                                <span class="kt-form__help error last_name"></span>
                            </div>
                            <div class="form-group">
                                <label for="contact_number">Contact Number</label>
                                <input type="text" name="contact_number" id="contact_number" class="form-control input-transparent" placeholder="Please enter contact number" value="{{ @old('contact_number') }}">
                                <span class="kt-form__help error contact_number"></span>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" name="email" class="form-control input-transparent" placeholder="Please enter email" value="{{ @old('email') }}">
                                <span class="kt-form__help error email"></span>
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" name="password" class="form-control input-transparent" placeholder="Please enter password">
                                <span class="text-danger">* Leave blank for default password</span>
                                <span class="kt-form__help error password"></span>
                            </div>
                            <div class="form-group">
                                <label for="branch">Branch</label>
                                <select class="form-control input-transparent" name="branch[]" id="branch" multiple>
                                    @if(isset($branch) && $branch->isNotEmpty())
                                        @foreach($branch AS $row)
                                            <option value="{{ $row->id }}"> {{ $row->name }} </option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error branch"></span>
                            </div>
                            <div class="form-group">
                                <label for="role">Role</label>
                                <select class="form-control input-transparent" name="role" id="role">
                                    <option value="">Select role</option>
                                    @if(isset($roles) && $roles->isNotEmpty())
                                        @foreach($roles as $role)
                                            <option value="{{ $role->id }}">{{ ucfirst(str_replace('_', ' ', $role->name)) }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error role"></span>
                            </div>
                            <div class="form-group">
                                <label for="department">Department</label>
                                <select class="form-control input-transparent" name="department" id="department">
                                    <option value="">Select Department</option>
                                    @if(isset($department) && $department->isNotEmpty())
                                        @foreach($department as $departments)
                                            <option value="{{ $departments->id }}">{{ $departments->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error department"></span>
                            </div>
                            <div class="form-group">
                                <label for="team_name">Team Selection</label>
                                <select class="form-control input-transparent" name="team_name" id="team_name">
                                    <option value="">Select Team</option>
                                    @if(isset($team) && $team->isNotEmpty())
                                        @foreach($team AS $row)
                                            <option value="{{ $row->id }}"> {{ $row->team_name }} </option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error team_name"></span>
                            </div>
                            <div class="form-group">
                                <label for="joining_date">Joining Date</label>
                                <input 
                                    type="text" 
                                    name="joining_date" 
                                    id="joining_date" 
                                    class="form-control hasDatepicker" 
                                    placeholder="dd-mm-yyyy" 
                                    value="{{ old('joining_date') }}">
                                <span class="kt-form__help error joining_date"></span>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn waves-effect waves-light btn-sm btn-rounded btn-outline-primary">Submit</button>
                                <a href="{{ route('exchange') }}" class="btn waves-effect waves-light btn-sm btn-rounded btn-outline-secondary">Back</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('assets/js/dropify.min.js') }}"></script>
<script src="{{ asset('assets/js/promise.min.js') }}"></script>
<script src="{{ asset('assets/js/sweetalert2.bundle.js') }}"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<!-- <script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script> -->

<script>
    $( "#joining_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
    $(document).ready(function(){
        $("#contact_number").keypress(function(e){
            var keyCode = e.keyCode || e.which;
            var $this = $(this);
            //Regex for Valid Characters i.e. Numbers.
            var regex = new RegExp("^[0-9\b]+$");

            var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
            // for 10 digit number only
            if ($this.val().length > 9) {
                e.preventDefault();
                return false;
            }
            if (e.charCode < 54 && e.charCode > 47) {
                if ($this.val().length == 0) {
                    e.preventDefault();
                    return false;
                } else {
                    return true;
                }
            }
            if (regex.test(str)) {
                return true;
            }
            e.preventDefault();
            return false;
        });
    });
</script>
<script>
    // $(document).ready(function(){
    //     $('.dropify').dropify({
    //         messages: {
    //             'default': 'Drag and drop profile image here or click',
    //             'remove':  'Remove',
    //             'error':   'Ooops, something wrong happended.'
    //         }
    //     });

    //     var drEvent = $('.dropify').dropify();

    //     var dropifyElements = {};
    //     $('.dropify').each(function () {
    //         dropifyElements[this.id] = false;
    //     });

    //     drEvent.on('dropify.beforeClear', function(event, element){
    //         id = event.target.id;
    //         if(!dropifyElements[id]){
    //             var url = "";
    //                 //                 Swal.fire({
    //                     title: 'Are you sure want delete this image?',
    //                     text: "",
    //                     type: 'warning',
    //                     showCancelButton: true,
    //                     confirmButtonColor: '#3085d6',
    //                     cancelButtonColor: '#d33',
    //                     confirmButtonText: 'Yes'
    //                 }).then(function (result){
    //                     if (result.value){
    //                         Swal.fire('Deleted!', 'Deleted Successfully.', 'success');
    //                         dropifyElements[id] = true;
    //                         element.clearElement();
    //                     }else{
    //                         Swal.fire('Cancelled', 'Discard Last Operation.', 'error');
    //                     }
    //                 });
    //                 return false;
    //                 //         } else {
    //             dropifyElements[id] = false;
    //             return true;
    //         }
    //     });
    // });
</script>

<script>
    $(document).ready(function() {
        var form = $('#form');
        $('.kt-form__help').html('');
        form.submit(function(e) {
            $('.help-block').html('');
            $('.m-form__help').html('');
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: new FormData($(this)[0]),
                dataType: 'json',
                async: false,
                processData: false,
                contentType: false,
                success: function(json) {
                    return true;
                },
                error: function(json) {
                    if (json.status === 422) {
                        e.preventDefault();
                        var errors_ = json.responseJSON;
                        $('.kt-form__help').html('');
                        $.each(errors_.errors, function(key, value) {
                            $('.' + key).html(value);
                        });
                    }
                }
            });
        });
    });
</script>
@endsection