@extends('admin.layout')
@section('custom-style')
<style>
    .alert {
        padding: 2px 10px;
    }

    .thubnail_img {
        width: 100%;
        height: 207px;

    }

    .thubnail_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-fit: contain;
        border-radius: 10px;
    }

    .files input {
        outline: 2px dashed #92b0b3;
        outline-offset: -10px;
        -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
        transition: outline-offset .15s ease-in-out, background-color .15s linear;
        padding: 120px 0px 85px 40%;
        text-align: center !important;
        margin: 0;
        width: 100% !important;
    }

    .files input:focus {
        outline: 2px dashed #92b0b3;
        outline-offset: -10px;
        -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
        transition: outline-offset .15s ease-in-out, background-color .15s linear;
        border: 1px solid #92b0b3;
    }

    .files {
        position: relative
    }

    .files:after {
        pointer-events: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 50px;
        right: 0;
        height: 56px;
        content: "";
        background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
        display: block;
        margin: 0 auto;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .files:before {
        position: absolute;
        bottom: 10px;
        left: 0;
        pointer-events: none;
        width: 100%;
        right: 0;
        height: 57px;
        content: " or drag it here. ";
        display: block;
        margin: 0 auto;
        color: #2ea591;
        font-weight: 600;
        text-transform: capitalize;
        text-align: center;
    }

    .input-group {
        margin-bottom: 2px;
    }
</style>
@endsection
@section('content')
<section class="content-header">
    <h1>
        Production Team
    </h1>
    <ol class="breadcrumb">
        <li><a><i class="fa fa-users"></i> Staff</a></li>
        <li class="active">Create</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <!-- Info boxes -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Create Staff</h3>
                </div>
                @if ($errors->any())
                    <div>
                        @foreach ($errors->all() as $error)
                            <li class="alert alert-danger">{{ $error }}</li>
                        @endforeach
                    </div>
                @endif
                @if(\Session::has('error'))
                    <div>
                        <li class="alert alert-danger">{!! \Session::get('error') !!}</li>
                    </div>
                @endif
                @if(\Session::has('success'))
                    <div>
                        <li class="alert alert-success">{!! \Session::get('success') !!}</li>
                    </div>
                @endif
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <div class="box-body">
                        <div class="row">

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Full Name*</label>
                                        <input type="text" name="name" class="form-control" value="{{old('name')}}"
                                            required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Email*</label>
                                        <input type="email" name="email" class="form-control" value="{{old('email')}}"
                                            required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Phone*</label>
                                        <input type="text" name="phone" class="form-control" value="{{old('phone')}}"
                                            required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>ID No.*</label>
                                        <input type="text" name="id_number" class="form-control"
                                            value="{{old('id_number')}}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Staff No.*</label>
                                        <input type="text" name="staff_number" class="form-control"
                                            value="{{old('staff_number')}}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Title*</label>
                                        <input type="text" name="job_title" class="form-control"
                                            value="{{old('job_title')}}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Department*</label>
                                        <input type="text" name="department" class="form-control"
                                            value="{{old('department')}}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <label>Password*</label>
                                <div class="input-group form-group">
                                    <span class="input-group-addon"><i class="fa fa-code"></i></span>
                                    <input type="password" name="password" id="password" class="form-control"
                                        placeholder="Enter Password" value="{{old('password')}}" required>
                                    <span class="input-group-addon"><i class="fa fa-eye" id="eye-id"
                                            onclick="eyeClickAction();"></i></span>
                                </div>
                            </div>


                            <div class="col-sm-12">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Country*</label>
                                        <select type="text" name="country" class="form-control" required>
                                            @if(isset($countries))
                                                <option value="" disabled selected>Select an option</option>
                                                @foreach($countries as $country)
                                                    @if($country->country_name !== 'All Countries')
                                                        <option value="{{$country->id}}" {{ old('country') == $country->id ? 'selected' : ''}}>{{ $country->country_name }}</option>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Region*</label>
                                        <input type="text" name="region" class="form-control" value="{{old('region')}}"
                                            required>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- Add profile image -->

                        <div class="col-sm-8">
                            <div class="form-group">
                                <div class="form-group files">
                                    <label>Profile Image (Portrait - 1250 * 1333 MX - 2MB)*</label>
                                    <input type="file" name="profile_image" class="form-control"
                                        onchange="readURLProfile(this);" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4" id="show-image-div">
                            <label style="width:100%;text-align:center;">Profile Preview (Portrait)</label>
                            <div class="thubnail_img">
                                <img id="user_profile_image" src="https://via.placeholder.com/1250x1333"
                                    alt="Profile Thumbnail">
                            </div>

                        </div>
                    </div>
                    <!-- end profile image  -->

                    <div class="row" style="padding: 10px;">
                        <div class="col-sm-12">
                            <h4>Assign Permissions:</h4>
                        </div>
                        @isset($modules)
    @foreach($modules as $module)
        <div class="col-sm-12">
            <h5>{{$module->name}}:</h5>
        </div>

        <div class="col-lg-3">
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_view" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_view', old('permission'))) checked @endif @endif>
                </span>
                <input type="text" class="form-control" value="View" readonly>
            </div>
        </div>

        @if($module->name == 'Production Team')
            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_suspend" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_suspend', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="Suspend" readonly>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_activate" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_activate', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="Activate" readonly>
                </div>
            </div>
        @endif

        @if($module->name == 'Video Gallery')
            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_additional_video" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_additional_video', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="Additional video" readonly>
                </div>
            </div>
        @endif
        
        @if(in_array($module->name, ['Video Legal Review', 'Video Editor Review']))
            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_approve_video" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_approve_video', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="Approve or reject Video" readonly>
                </div>
            </div>
        @endif

        @if(in_array($module->name, ['Video Gallery', 'Live Broadcast']))
            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_approve_video" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_approve_video', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="Approve Video" readonly>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_all_video" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_all_video', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="All Video" readonly>
                </div>
            </div>
        @endif

        @if($module->name == 'Live Broadcast')
            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_set_calendar" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_set_calendar', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="Calendar" readonly>
                </div>
            </div>
        @endif
        
        @if(!in_array($module->name, ['Settings', 'Country', 'Dashboard', 'Ratings', 'Transaction', 'Users', 'Refund', 'Subscription Request', 'User Activities', 'Video Legal Review', 'Video Editor Review']))
            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_create" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_create', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="Create" readonly>
                </div>
            </div>
        @endif

        @if(!in_array($module->name, ['Dashboard', 'Settings', 'Ratings', 'Transaction', 'Refund', 'Subscription Request', 'User Activities', 'Users', 'Video Legal Review', 'Video Editor Review']))
            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_edit" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_edit', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="Edit" readonly>
                </div>
            </div>
        @endif

        @if(!in_array($module->name, ['Dashboard', 'Settings', 'Country', 'User Activities', 'Subscription Request', 'Refund', 'Transaction', 'Ratings', 'Menus', 'Video Legal Review', 'Video Editor Review']))
            <div class="col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" name="permission[]" value="{{str_replace('-','_', Str::slug($module->name))}}_delete" @if(old('permission') !=null) @if(in_array(str_replace('-','_', Str::slug($module->name)).'_delete', old('permission'))) checked @endif @endif>
                    </span>
                    <input type="text" class="form-control" value="Delete" readonly>
                </div>
            </div>
        @endif

    @endforeach
@endisset
                    </div>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <button type="submit" class="btn btn-primary">Create &nbsp;<i class="fa fa-long-arrow-right"></i>
                </button>
            </div>

            </form>
        </div>
    </div>
    </div>
    <!-- /.row -->
</section>
@endsection

@section('custom-scripts')
<script>
    function eyeClickAction() {
        if ($("#eye-id").hasClass("fa-eye")) {
            $('#eye-id').removeClass('fa-eye');
            $('#eye-id').addClass('fa-eye-slash');
            $('#password').attr('type', 'text');
        } else {
            $('#eye-id').removeClass('fa-eye-slash');
            $('#eye-id').addClass('fa-eye');
            $('#password').attr('type', 'password');
        }
    }

    function readURLProfile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#user_profile_image')
                    .attr('src', e.target.result);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection