@php use App\Models\AttendanceSetup;use App\Models\warehouse;use App\Models\weakened; @endphp
@extends('admin.layouts.app')
@section('title',get_setting('site_name').' Staff Create')
@section('content')
    <style>
        @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
        @import url('https://fonts.googleapis.com/css?family=Raleway');

        .box {
            display: block;
            min-width: 300px;
            height: 300px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
        }

        .upload-options {
            position: relative;
            height: 75px;
            background-color: #615DAD;
            cursor: pointer;
            overflow: hidden;
            text-align: center;
            transition: background-color ease-in-out 150ms;
        }

        .upload-options:hover {
            background-color: #7fb1b3;
        }

        .upload-options input {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }

        .upload-options label {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            font-weight: 400;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            overflow: hidden;
        }

        .upload-options label::after {
            content: 'add';
            font-family: 'Material Icons';
            position: absolute;
            font-size: 2.5rem;
            color: #e6e6e6;
            top: calc(50% - 2.5rem);
            left: calc(50% - 1.25rem);
            z-index: 0;
        }

        .upload-options label span {
            display: inline-block;
            width: 50%;
            height: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            vertical-align: middle;
            text-align: center;
        }

        .upload-options label span:hover i.material-icons {
            color: lightgray;
        }

        .js--image-preview {
            height: 225px;
            width: 100%;
            position: relative;
            overflow: hidden;
            background-image: url('');
            background-color: white;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .js--image-preview::after {
            content: "photo_size_select_actual";
            font-family: 'Material Icons';
            position: relative;
            font-size: 4.5em;
            color: #e6e6e6;
            top: calc(50% - 3rem);
            left: calc(50% - 2.25rem);
            z-index: 0;
        }

        .js--image-preview.js--no-default::after {
            display: none;
        }

        .js--image-preview:nth-child(2) {
            background-image: url('http://bastianandre.at/giphy.gif');
        }

        i.material-icons {
            transition: color 100ms ease-in-out;
            font-size: 2.25em;
            line-height: 55px;
            color: white;
            display: block;
        }

        .drop {
            display: block;
            position: absolute;
            background: #615DAD;
            border-radius: 100%;
            transform: scale(0);
        }

        .animate {
            animation: ripple 0.4s linear;
        }

        @keyframes ripple {
            100% {
                opacity: 0;
                transform: scale(2.5);
            }
        }

    </style>

    <div class="row">
        <div class="col-lg-10 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0 h6">{{__('Employee Information')}}</h5>
                </div>

                <form class="form-horizontal" action="{{ route('staffs.store') }}" method="POST"
                      enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="name">{{__('Name')}}</label>
                                    <div class="col-sm-8">
                                        <input type="text" placeholder="{{__('Name')}}" id="name" name="name"
                                               class="form-control" value="{{old('name')}}" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="name">{{__('Department')}}</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="department" id="">
                                            <option value="">Select Department</option>
                                            @foreach(\App\Models\Department::all() as $department)
                                                <option
                                                    value="{{$department->id}}" {{old('department')==$department->id?'selected':''}}>{{$department->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="name">{{__('Designation')}}</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="designation" id="">
                                            <option value="">Select Designation</option>
                                            @foreach(\App\Models\Designation::all() as $designation)
                                                <option
                                                    value="{{$designation->id}}" {{old('designation')==$designation->id?'selected':''}} >{{$designation->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>


                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="mobile">{{__('Phone')}}</label>
                                    <div class="col-sm-8">
                                        <input type="text" placeholder="{{__('Phone')}}" id="mobile" name="mobile"
                                               class="form-control" value="{{old('mobile')}}" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="DOB">{{__('Date Of Birth')}}</label>
                                    <div class="col-sm-8">
                                        <input type="date" placeholder="{{__('Phone')}}" id="DOB" name="DOB"
                                               class="form-control" value="{{old('DOB')}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="joining">{{__('Joining Date')}}</label>
                                    <div class="col-sm-8">
                                        <input type="date" placeholder="{{__('Phone')}}" id="joining" name="joining"
                                               class="form-control" value="{{old('joining')}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="joining">{{__('Employee Type')}}</label>
                                    <div class="col-sm-8">
                                        <select name="employee_type" id="" class="form-control">
                                            <option value="full_time">Full-time</option>
                                            <option value="part_time">Part-time</option>
                                            <option value="contractor">Contractor</option>
                                            <option value="remote">Remote</option>
                                            <option value="intern">Intern</option>
                                        </select>
                                    </div>
                                </div>


                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="warehouse">{{__('Warehouse')}}</label>
                                    <div class="col-sm-8">
                                        <select name="warehouse_id" required class="form-control aiz-selectpicker"
                                                data-live-search="true">
                                            <option value="">Select Warehouse</option>
                                            @foreach(warehouse::all() as $ware)
                                                @if(auth()->user()->user_type!='admin')
                                                    @if($ware->id==auth()->user()->warehouse_id)
                                                        <option
                                                            value="{{$ware->id}}" {{old('warehouse_id')==$ware->id?'selected':''}}>{{$ware->name}}</option>
                                                    @endif
                                                @else
                                                    <option
                                                        value="{{$ware->id}}" {{old('warehouse_id')==$ware->id?'selected':''}}>{{$ware->name}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="warehouse">{{__('Weekend Type')}}</label>
                                    <div class="col-sm-8">
                                        <select name="weekend_id" required class="form-control aiz-selectpicker"
                                                data-live-search="true">
                                            <option value="">Select Weekend Type</option>
                                            @foreach(weakened::all() as $weekend)
                                                @if(auth()->user()->user_type=='admin')

                                                    <option
                                                        value="{{$weekend->id}}" {{old('weekend_id')==$weekend->id?'selected':''}}>{{$weekend->name}}</option>

                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="warehouse">{{__('Attendance Shift')}}</label>
                                    <div class="col-sm-8">
                                        <select name="attendance_setup_id" required
                                                class="form-control aiz-selectpicker"
                                                data-live-search="true">
                                            <option value="">Select Attendance Shift</option>
                                            @foreach(AttendanceSetup::all() as $attendance)
                                                @if(auth()->user()->user_type=='admin')

                                                    <option
                                                        value="{{$attendance->id}}"{{old('attendance_setup_id')==$attendance->id?'selected':''}}>{{$attendance->shift_name}}</option>

                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4  col-from-label"
                                           for="warehouse">{{__('Leave Group')}}</label>
                                    <div class="col-sm-8">
                                        <select name="leave_group_id" required
                                                class="form-control aiz-selectpicker"
                                                data-live-search="true">
                                            <option value="">Select Leave Group</option>
                                            @foreach(\App\Models\leave_group::all() as $leave)

                                                <option value="{{$leave->id}}">{{$leave->name}}</option>

                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-4">
                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="name">{{__('Gender')}}</label>
                                    <div class="col-sm-8">
                                        <select name="gender" required class="form-control aiz-selectpicker">
                                            <option value="">Select Gender</option>
                                            <option
                                                value="Male" {{old('gender')=='Male'?'selected':''}}>{{__('Male')}}</option>
                                            <option
                                                value="Female" {{old('gender')=='Female'?'selected':''}}>{{__('Female')}}</option>
                                            <option
                                                value="Others" {{old('gender')=='Others'?'selected':''}}>{{__('Others')}}</option>

                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="name">{{__('Blood Group')}}</label>
                                    <div class="col-sm-8">
                                        <select name="blood_group" required class="form-control aiz-selectpicker">
                                            <option value="">Select Blood Group</option>
                                            @foreach(blood_group() as $blood)
                                                <option
                                                    value="{{$blood}}" {{old('blood_group')==$blood?'selected':''}}>{{$blood}}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>


                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="name">{{__('Religion')}}</label>
                                    <div class="col-sm-8">
                                        <select name="religion" required class="form-control aiz-selectpicker">
                                            <option value="">Select Religion</option>
                                            <option value="Islam" {{old('religion')=='Islam'?'selected':''}}>Islam
                                            </option>
                                            <option value="Hinduism" {{old('religion')=='Hinduism'?'selected':''}}>
                                                Hinduism
                                            </option>
                                            <option value="Buddhism" {{old('religion')=='Buddhism'?'selected':''}}>
                                                Buddhism
                                            </option>
                                            <option
                                                value="Christianity" {{old('religion')=='Christianity'?'selected':''}}>
                                                Christianity
                                            </option>
                                            <option value="Unknown" {{old('religion')=='Unknown'?'selected':''}}>
                                                Unknown
                                            </option>

                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="name">{{__('Marital Status')}}</label>
                                    <div class="col-sm-8">
                                        <select name="marital_status" required class="form-control aiz-selectpicker">
                                            <option value="">Select Marital Status</option>
                                            <option value="Single" {{old('marital_status')=='Single'?'selected':''}}>
                                                Single
                                            </option>
                                            <option value="Married" {{old('marital_status')=='Married'?'selected':''}}>
                                                Married
                                            </option>
                                            <option value="Widowed" {{old('marital_status')=='Widowed'?'selected':''}}>
                                                Widowed
                                            </option>
                                            <option
                                                value="Divorced" {{old('marital_status')=='Divorced'?'selected':''}}>
                                                Divorced
                                            </option>
                                            <option
                                                value="Separated" {{old('marital_status')=='Separated'?'selected':''}}>
                                                Separated
                                            </option>

                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="name">{{__('NID/Birth No')}}</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" name="nid" id=""
                                               placeholder="NID or Birth No" value="{{old('nid')}}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="name">{{__('Nationality')}}</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" name="nationality" id=""
                                               placeholder="" value="{{old('nationality')}}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="name">{{__('Employee Code')}}</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" value="{{old('emp_code')}}"
                                               name="emp_code" id=""
                                               placeholder="">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="email">{{__('Email')}}</label>
                                    <div class="col-sm-8">
                                        <input type="text" placeholder="{{__('Email')}}" id="email" name="email"
                                               class="form-control" value="{{old('email')}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1"
                                           for="password">{{__('Password')}}</label>
                                    <div class="col-sm-8">
                                        <input type="password" placeholder="{{__('Password')}}" id="password"
                                               name="password"
                                               class="form-control" autocomplete="new-password" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-from-label mt-1" for="name">{{__('Role')}}</label>
                                    <div class="col-sm-8">
                                        <select name="role_id" required class="form-control aiz-selectpicker">
                                            <option value="">Select Role</option>
                                            <option
                                                value="employee" {{old('role_id')=='employee'?'selected':''}}>{{__('Employee')}}</option>
                                            @foreach($roles as $role)
                                                <option
                                                    value="{{$role->id}}" {{old('role_id')==$role->id?'selected':''}}>{{$role->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-3">
                                <div class="box">
                                    <div class="js--image-preview"></div>
                                    <div class="upload-options">
                                        <label>
                                            <input type="file" name="image" class="image-upload" accept="image/*"/>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="form-group mb-0 text-right">
                            <button type="submit" class="btn btn-sm btn-primary">{{__('Save')}}</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

@endsection
@section('script')
    <script !src="">
        function initImageUpload(box) {
            let uploadField = box.querySelector('.image-upload');

            uploadField.addEventListener('change', getFile);

            function getFile(e) {
                let file = e.currentTarget.files[0];
                checkType(file);
            }

            function previewImage(file) {
                let thumb = box.querySelector('.js--image-preview'),
                    reader = new FileReader();

                reader.onload = function () {
                    thumb.style.backgroundImage = 'url(' + reader.result + ')';
                }
                reader.readAsDataURL(file);
                thumb.className += ' js--no-default';
            }

            function checkType(file) {
                let imageType = /image.*/;
                if (!file.type.match(imageType)) {
                    throw 'Datei ist kein Bild';
                } else if (!file) {
                    throw 'Kein Bild gewählt';
                } else {
                    previewImage(file);
                }
            }

        }

        // initialize box-scope
        var boxes = document.querySelectorAll('.box');

        for (let i = 0; i < boxes.length; i++) {
            let box = boxes[i];
            initDropEffect(box);
            initImageUpload(box);
        }


        /// drop-effect
        function initDropEffect(box) {
            let area, drop, areaWidth, areaHeight, maxDistance, dropWidth, dropHeight, x, y;

            // get clickable area for drop effect
            area = box.querySelector('.js--image-preview');
            area.addEventListener('click', fireRipple);

            function fireRipple(e) {
                area = e.currentTarget
                // create drop
                if (!drop) {
                    drop = document.createElement('span');
                    drop.className = 'drop';
                    this.appendChild(drop);
                }
                // reset animate class
                drop.className = 'drop';

                // calculate dimensions of area (longest side)
                areaWidth = getComputedStyle(this, null).getPropertyValue("width");
                areaHeight = getComputedStyle(this, null).getPropertyValue("height");
                maxDistance = Math.max(parseInt(areaWidth, 10), parseInt(areaHeight, 10));

                // set drop dimensions to fill area
                drop.style.width = maxDistance + 'px';
                drop.style.height = maxDistance + 'px';

                // calculate dimensions of drop
                dropWidth = getComputedStyle(this, null).getPropertyValue("width");
                dropHeight = getComputedStyle(this, null).getPropertyValue("height");

                // calculate relative coordinates of click
                // logic: click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center
                x = e.pageX - this.offsetLeft - (parseInt(dropWidth, 10) / 2);
                y = e.pageY - this.offsetTop - (parseInt(dropHeight, 10) / 2) - 30;

                // position drop and animate
                drop.style.top = y + 'px';
                drop.style.left = x + 'px';
                drop.className += ' animate';
                e.stopPropagation();

            }
        }

    </script>
@endsection