@extends('layout.default')

@section('content')
    <div class="card card-custom">
        <form action="{{url('user/update')}}/{{$result['id_user_franchise']}}" id="new-user-form" method="post">
            @csrf
            <div class="card-body">
                @include('layout.notifications')
                <div class="form-group row">
                    <label for="example-search-input" class="col-2 col-form-label">Level <span class="text-danger">*</span></label>
                    <div class="col-4">
                        <select class="select2 form-control" name="level" required data-placeholder="Select user level" onchange="changeLevel(this.value)">
                            <option value="User Franchise" @if($result['level'] == 'User Franchise') selected @endif>User Franchise</option>
                            <option value="Super Admin" @if($result['level'] == 'Super Admin') selected @endif>Super Admin</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-search-input" class="col-2 col-form-label">Email <span class="text-danger">*</span></label>
                    <div class="col-4">
                        <input class="form-control" type="text" name="email" value="{{$result['email']}}" id="input-email" required placeholder="Enter email here"/>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-search-input" class="col-2 col-form-label">Name <span class="text-danger">*</span></label>
                    <div class="col-4">
                        <input class="form-control" type="text" name="name" value="{{$result['name']}}" required placeholder="Enter name here"/>
                    </div>
                </div>
                <div class="form-group row" @if($result['level'] == 'Super Admin') style="display: none" @endif>
                    <label for="example-search-input" class="col-2 col-form-label">Assign to outlet <span class="text-danger">*</span></label>
                    <div class="col-4">
                        <select class="form-control select2" name="id_outlet" id="select-brand" required>
                            <option value="" selected disabled>Search Outlet</option>
                            @foreach($outlets as $val)
                                <option value="{{$val['id_outlet']}}" @if($result['id_outlet'] == $val['id_outlet']) selected @endif>{{$val['outlet_code']}} - {{$val['outlet_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-search-input" class="col-2 col-form-label">Status<span class="text-danger">*</span></label>
                    <div class="col-5">
                        <input data-switch="true" type="checkbox" name="user_franchise_status" data-on-text="Active" data-off-text="Inactive" {{$result['user_franchise_status'] ==  'Active' || empty($result['user_franchise_status'])? 'checked' : ''}}/>
                    </div>
                </div>
                <div class="form-group row">
                    <label  class="col-2 col-form-label">Reset Password <span class="text-danger">*</span></label>
                    <div class="col-5">
                        <label class="checkbox checkbox-lg" style="margin-top: 2.5%">
                            <input type="checkbox" id="reset_pin" name="reset_pin" onclick="changeResetPin()"/>
                            <span></span>
                        </label>
                    </div>
                </div>
                <div id="div_password">
                    <div class="form-group row">
                        <label for="example-search-input" class="col-2 col-form-label">Password <span class="text-danger">*</span></label>
                        <div class="col-4">
                            <input class="form-control" maxlength="6" type="password" name="pin" id="pin1" placeholder="Enter password"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-search-input" class="col-2 col-form-label">Re-type Pin <span class="text-danger">*</span></label>
                        <div class="col-4">
                            <input class="form-control" maxlength="6" type="password" name="pin2" id="pin2" placeholder="Re-type password"/>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="example-search-input" class="col-2 col-form-label">Input Your Password <span class="text-danger">*</span></label>
                    <div class="col-4">
                        <input class="form-control" type="password" maxlength="6" name="password_admin" required placeholder="Enter your password here"/>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-2">
                    </div>
                    <div class="col-10">
                        <button type="submit" id="btn-submit" class="btn btn-success mr-2">Submit</button>
                        <a href="{{url('user')}}"class="btn btn-secondary">Cancel</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            $('[data-switch=true]').bootstrapSwitch();
            $('#btn-submit').on('click', function(event) {
                if(document.getElementById('reset_pin').checked == false){
                    if($('#pin1').val() !== $('#pin2').val()) {
                        Swal.fire(
                            "Woops!",
                            'Password didn\'t match' ,
                            "error"
                        )
                        event.preventDefault();
                        event.stopPropagation();
                    }
                }

                const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                if(!re.test($('#input-email').val())){
                    Swal.fire(
                        "Woops!",
                        'Format email is not valid' ,
                        "error"
                    )
                    event.preventDefault();
                    event.stopPropagation();
                }
            });
        });

        function changeLevel(value){
            if(value == 'User Franchise'){
                $("#select_outlet").show();
            }else{
                $("#select_outlet").hide();
            }
        }

        function changeResetPin() {
            if(document.getElementById('reset_pin').checked){
                $("#div_password").hide();
                $('#pin1').prop('required', false);
                $('#pin2').prop('required', false);
            }else{
                $("#div_password").show();
                $('#pin1').prop('required', true);
                $('#pin2').prop('required', true);
            }
        }
    </script>
@endsection