@extends('layouts.app')

@section('title', 'Edit User')

@section('headSource')
    <!-- Daterange picker -->
    <link href="{!! asset('admin-assets/vendor/bootstrap-daterangepicker/daterangepicker.css') !!}" rel="stylesheet">
    <style>
        .form-control:disabled {
            background-color: #e9ecef !important;
        }
    </style>
@endsection

@section('content')
    @php
        $isSuperAdmin = Auth::user()->role == 'SuperAdmin' ? true : false;
        $showTrialSettings = $isSuperAdmin && $user->role == "Coordinator" ? true : false;
    @endphp

    <div class="row page-titles mx-0">
        <div class="col-sm-6 p-md-0">
            <div class="welcome-text">
                <h4> Edit {{$user->role}} </h4>
            </div>
        </div>
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('portal.dashboard')}}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route("portal.userFilterList")}}/coordinator">Users</a></li>
                <li class="breadcrumb-item"> <a href="{{ route("portal.userFilterList", ["type" => Session('type'),"id" => Session('branch')])}}">   <strong> {{@$branchName}} </strong> {{$user->role}}</a></li>

                <li class="breadcrumb-item active"><a href="javascript:void(0)">Edit {{$user->role}}</a></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <div class="card mb-3">
                <div class="card-header">
                    <h3><i class="fa fa-user"></i> {{$user->role}} details</h3>
                </div>
                <div class="card-body">
                    <form id="userEditForm" method="post" enctype="multipart/form-data" autocomplete="off">
                        <input type="hidden" name="id" value="{{$user->id}}">
                        <input type="hidden" name="pgType" value="{{$profilePage ? 1 : 0}}">
                        <div class="row">
                            <div class="col-lg-9 col-xl-9">
                                <div class="row user-info">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Full name (required)</label>
                                            <input class="form-control" name="name" type="text" value="{{$user->name}}" required />
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Valid Email (required)</label>
                                            <input class="form-control" name="email" type="email" value="{{$user->email}}" required />
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Username (required)</label>
                                            <input class="form-control" name="username" type="text" value="{{$user->username}}" required />
                                        </div>
                                    </div>

                                    @if (checkPermission('password', Auth::user()->role) || Auth::user()->role=='SuperAdmin')
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>Password (leave empty not to change) </label>
                                                <input class="form-control" name="password" autocomplete="new-password" type="password" />
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Date Of Birth</label>
                                            <input class="form-control date-picker" name="date_of_birth" type="text" value="{{$user->date_of_birth}}" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Gender</label>
                                            <select class="form-control form-control-lg" name="gender">
                                                <option value="Male" {{($user->gender == 'Male')? "selected": ""}}>Male</option>
                                                <option value="Female" {{($user->gender == 'Female')? "selected": ""}}>Female</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label>Address</label>
                                            <input class="form-control" name="address" type="text" value="{{$user->address}}" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Phone Number</label>
                                            <input class="form-control" name="phone_number" type="text" value="{{$user->phone_number}}" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Emergency Phone Number</label>
                                            <input class="form-control" name="emergency_contact" type="text" value="{{$user->emergency_contact}}" />
                                        </div>
                                    </div>
                                    @if($user->role == "Staff")
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>Employee Id (required)</label>
                                                <input class="form-control" name="employee_id" type="text"
                                                       value="{{$user->employee_id}}" required/>
                                            </div>
                                        </div>
                                    @endif
                                    @if($user->role == "Client")
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>Identification Number (required)</label>
                                                <input class="form-control" name="ddd_id" type="text"
                                                       value="{{$user->ddd_id}}" required/>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                <div class="row">
                                    @if($user->id > 1 && !$profilePage)
                                    <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>Status</label>
                                                <select class="form-control form-control-lg" name="status">
                                                    <option value="1" {{($user->status == 1)? "selected": ""}}>Active</option>
                                                    <option value="0" {{($user->status == 0)? "selected": ""}}>Inactive</option>
                                                </select>
                                            </div>
                                    </div>
                                    @endif
                                    @if ($showTrialSettings)
                                    <div id="trialDropdown" class="col-lg-6">
                                        <div class="form-group">
                                            <label>Is on Trial</label>
                                            <select id="isOnTrail" class="form-control form-control-lg" name="is_on_trial">
                                                <option value="1" {{($user->is_on_trial == 1) ? "selected" : ""}}>Yes</option>
                                                <option value="0" {{($user->is_on_trial == 0) ? "selected" : ""}}>No</option>
                                            </select>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                @if($showTrialSettings)
                                 <div id="trailDetailSec" class="row mt-2"  {!! $user->is_on_trial ? '': 'style="display: none;"' !!}>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Trial Expiry Date</label>
                                            <input class="form-control date-picker" name="trial_ends_at" value="{{date('m/d/Y', strtotime($user->trial_ends_at ?? '+30 days'))}}" autocomplete="off" type="text"/>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Executives</label>
                                            <input class="form-control" name="allowedUsers[Executive]" autocomplete="off" value="{{$trailSettings['Executive'] ?? 1}}" type="number" min="0" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Managers</label>
                                            <input class="form-control" name="allowedUsers[Manager]" autocomplete="off" value="{{$trailSettings['Manager'] ?? 0}}" type="number" min="0" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Admins</label>
                                            <input class="form-control" name="allowedUsers[Admin]" autocomplete="off" value="{{$trailSettings['Admin'] ?? 0}}" type="number" min="0" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Staff Members</label>
                                            <input class="form-control" name="allowedUsers[Staff]" autocomplete="off" type="number" value="{{$trailSettings['Staff'] ?? 1}}" min="0" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Clients</label>
                                            <input class="form-control" name="allowedUsers[Client]" autocomplete="off" type="number" value="{{$trailSettings['Client'] ?? 5}}" min="0" />
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                            <div class="col-lg-3 col-xl-3 border-left">
                                {{--<strong>Login with</strong>: {{$user->login_from}}
                                <br>
                                <br>--}}
                                <strong>Role</strong>: {{$user->role}}
                                <div class="mb-5"></div>
                                <div id="avatar_image">
                                    <img id="thumbnailImg" alt="image" style="max-width:100px; height:auto;" src="{!! $user->thumbnail !!}" />
                                </div>
                                <div class="m-b-10"></div>
                                <div class="form-group">
                                    <label>Profile Image</label>
                                    <input type="file" name="thumbnail" class="form-control previewInput" data-target="#thumbnailImg">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- end card-body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->

@endsection

@section('footerSource')
    <!-- Daterangepicker -->
    <!-- momment js is must -->
    <script src="{!! asset('admin-assets/vendor/moment/moment.min.js') !!}"></script>
    <script src="{!! asset('admin-assets/vendor/bootstrap-daterangepicker/daterangepicker.js') !!}"></script>
    <script>
        $(document).ready(function () {
            @if($profilePage && !$isSuperAdmin)
            $('div.user-info .form-control:not([type=password])').removeAttr('name').removeAttr('required').prop('disabled', true);
            @endif
            // date picker
            $('input.date-picker').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true
            });

            $('#isOnTrail').change(function(e){
                if ($(this).val() == "1") {
                    $('#trailDetailSec').show();
                } else {
                    $('#trailDetailSec').hide();
                }
            });

            // edit user form submit
            $("#userEditForm").submit(function (e) {
                e.preventDefault();
                let data = new FormData($(this)[0]);
                axios.post('{{route("portal.updateUserRequest")}}', data)
                    .then(function (response) {
                        if(response.data.response_code == 1){
                            successMsg(response.data.message);
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        } else {
                            errorMsg(response.data.message);
                        }
                    })
                    .catch(function (error) {

                    });
            });
        });
    </script>
@endsection