@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Add New User</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">User</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Add New User</div>
        </li>
    </ul>
</div>
<!-- add-new-user -->
<form method="POST" action="{{route('shop-bo.account.store')}}" class="form-add-new-user form-style-2">
    @honeypot
    @csrf
    <div class="wg-box">
        <div class="left">
            <h5 class="mb-4">Account</h5>
            <div class="body-text">Fill in the information below to add a new account</div>
        </div>
        <div class="right flex-grow">
            <div class="row">
                <div class="col-4">
                    <fieldset class="firstname mb-24">
                        <div class="body-title mb-10">First Name</div>
                        <input class="flex-grow" type="text" placeholder="Firstname" id="firstname" name="firstname" tabindex="0" value="" aria-required="true" required="" value="{{old('firstname')}}">
                    </fieldset>
                </div>
                <div class="col-4">
                    <fieldset class="middlename mb-24">
                        <div class="body-title mb-10">Middle Name</div>
                        <input class="flex-grow" type="text" placeholder="Middlename" id="middlename" name="middlename" tabindex="0" value="" aria-required="true" value="{{old('middlename')}}">
                    </fieldset>
                </div>
                <div class="col-4">
                    <fieldset class="middlename mb-24">
                        <div class="body-title mb-10">Surname</div>
                        <input class="flex-grow" type="text" placeholder="Surname" id="surname" name="surname" tabindex="0" value="" aria-required="true" value="{{old('surname')}}">
                    </fieldset>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <fieldset class="email mb-24">
                        <div class="body-title mb-10">Email</div>
                        <input class="flex-grow" type="email" placeholder="Email" id="email" name="email" tabindex="0" value="" aria-required="true" required="" value="{{old('email')}}">
                    </fieldset>
                </div>
                <div class="col-6">
                    <fieldset class="contact mb-24">
                        <div class="body-title mb-10">Contact</div>
                        <input class="flex-grow" type="text" placeholder="Contact" id="contact" name="contact" tabindex="0" value="" aria-required="true" required="" value="{{old('contact')}}">
                    </fieldset>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <fieldset class="pincode mb-24">
                        <div class="body-title mb-10">Pincode</div>
                        <input class="flex-grow" type="text" placeholder="Pincode" id="pincode" name="pincode" tabindex="0" value="" aria-required="true" required="" value="{{old('pincode')}}">
                    </fieldset>
                </div>
                <div class="col-6 disable_username">
                    <fieldset class="username mb-24">
                        <div class="body-title mb-10">Username</div>
                        <input class="flex-grow" type="text" placeholder="username" id="username" name="username" tabindex="0" value="" aria-required="true" required="" value="{{old('username')}}">
                    </fieldset>
                </div>
            </div>
            <div class="row disable_password">
                <div class="col-6">
                    <fieldset class="password mb-24">
                        <div class="body-title mb-10">Password</div>
                        <input class="password-input" type="password" id="password" placeholder="Enter password" name="password" tabindex="0" value="" aria-required="true" required="">
                        <span class="show-pass">
                            <i class="icon-eye view"></i>
                            <i class="icon-eye-off hide"></i>
                        </span>
                    </fieldset>
                </div>
                <div class="col-6">
                     <fieldset class="password mb-24">
                        <div class="body-title mb-10">Confirm password</div>
                        <input class="password-input" type="password" id="confirm_password" placeholder="Confirm password" name="password_confirmation" tabindex="0" value="" aria-required="true" required="">
                        <span class="show-pass">
                            <i class="icon-eye view"></i>
                            <i class="icon-eye-off hide"></i>
                        </span>
                    </fieldset>
                </div>
            </div>
            <fieldset class="mb-24">
                <div class="body-title">Select Role</div>
                <div class="select flex-grow">
                    <select class="" name="role" id="role-select">
                        @foreach($roles as $role)
                        <option value="{{$role->title}}">{{$role->title}}</option>
                        @endforeach
                    </select>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="wg-box" id="branch-manager-location-div">
        <div class="left">
            <h5 class="mb-4">Branch Location</h5>
            <div class="body-text">FOR BRANCH MANAGER ONLY</div>
        </div>
        <div class="right flex-grow">

            <fieldset class="mb-24">
                <div class="body-title">Branch</div>
                <div class="select flex-grow">
                    <select class="" id="branch" name="branch">
                        @foreach($branches_query as $branch)
                        <option value="{{Crypt::encrypt($branch->id)}}">{{$branch->barangay.", ".$branch->city.", ".$branch->province}}</option>
                        @endforeach
                    </select>
                </div>
            </fieldset>
            <div class="alert alert-danger" role="alert" id="uniqueidMsg" style="display:none;font-size:13px">User Not Found</div>
            <div class="alert alert-success" role="alert" id="name" style="display:none;font-size:13px"></div>
            <fieldset class="password">
                <div class="body-title mb-10">Satellite ID NUMBER</div>
                <input class="flex-grow" type="text" placeholder="Enter Satellite ID NUMBER" name="satellite_id_number" onkeyup="checkUser(this)" value="{{old('satellite_id_number')}}">
            </fieldset>
        </div>
    </div>

    <div class="bot">
        <button class="tf-button w180" type="submit" id="submitBtn">Submit</button>
    </div>

</form>
<!-- /add-new-user -->

@endsection
@section('page_script')
@parent
<script>
    $(".user-menu").addClass("active");
    $(".user-add").addClass("active");


    var role_select         = $('#role-select');
    $('#branch-manager-location-div').hide().find('select').attr('disabled',true)

    role_select.change(function(){
        if($(this).val() == 'BRANCH MANAGER'){
            $('#submitBtn').prop('disabled',true)
            $('#branch-manager-location-div').show().find('select').removeAttr('disabled')
        }
        else{
            $('#submitBtn').prop('disabled',false)
            $('.disable_username').attr('hidden',false)
            $('.disable_password').attr('hidden',false)
            $('#firstname').val('').attr('readonly',false);
            $('#middlename').val('').attr('readonly',false);
            $('#surname').val('').attr('readonly',false);
            $('#email').val('').attr('readonly',false);
            $('#contact').val('').attr('readonly',false);
            $('#pincode').val('').attr('readonly',false);  
            $('#username').val('').attr('required',true);  
            $('#password').val('').attr('required',true);  
            $('#confirm_password').val('').attr('required',true);  
            $('#branch-manager-location-div').hide().find('select').attr('disabled',true)
        }
    });
</script>
<script>
    let ajax_request = null;
    let debounce_timer;

    function checkUser(el) {
        clearTimeout(debounce_timer);

        debounce_timer = setTimeout(() => {
            if (ajax_request) ajax_request.abort();

            const value = $(el).val().trim();
            if (value === "") {
                $("#uniqueidMsg").hide();
                $("#name").hide().text('');
                $('button[type=submit], input[type=submit]').prop('disabled', false);
                return;
            }

            ajax_request = $.ajax({
                url: "{{ url('admin/shop-bo/account/get-satellite') }}/" + value,
                cache: false,
                success: function (response) {
                    if (response.exists && response.code==0) {
                        $("#uniqueidMsg").hide();
                        $('button[type=submit], input[type=submit]').prop('disabled', false);
                        $("#name").text(response.firstname + " " + response.surname).show();
                        $('#firstname').val(response.firstname).attr('readonly',true);
                        $('#middlename').val(response.middlename).attr('readonly',true);
                        $('#surname').val(response.surname).attr('readonly',true);
                        $('#email').val(response.email).attr('readonly',true);
                        $('#contact').val(response.contact).attr('readonly',true);
                        $('#pincode').val(response.pincode).attr('readonly',true); 
                        $('#username').attr('required',false);  
                        $('#password').attr('required',false);  
                        $('#confirm_password').attr('required',false);
                        $('.disable_username').attr('hidden',true)
                        $('.disable_password').attr('hidden',true)
                        $('#submitBtn').prop('disabled',false)
                    } else {
                        $("#name").hide().text('');
                        $("#uniqueidMsg").show();
                        $('.disable_username').attr('hidden',false)
                        $('.disable_password').attr('hidden',false)
                        $('#username').attr('required',true);  
                        $('#password').attr('required',true);  
                        $('#confirm_password').attr('required',true);
                        $('#firstname').attr('readonly',false);
                        $('#middlename').attr('readonly',false);
                        $('#surname').attr('readonly',false);
                        $('#email').attr('readonly',false);
                        $('#contact').attr('readonly',false);
                        $('#pincode').attr('readonly',false);              
                        $('button[type=submit], input[type=submit]').prop('disabled', true);
                    }
                },
                complete: function () {
                    ajax_request = null;
                }
            });
        }, 400);
    }

    // var ajax_request;
    // var ajax_request = false;
    // function checkUser(el){

    //     if(ajax_request)
    //     ajax_request.abort()
    //     ajax_request = true;
    //     ajax_request = $.ajax({
    //         url : "{{url('admin/shop-bo/account/get-satellite')}}/"+($(el).val()==""?"0000000":$(el).val()),
    //         success : function(response){

    //             if(response.exists && response.code==0){
    //                 $("#uniqueidMsg").hide();

    //                 $("#name").text(response.firstname + " " + response.surname).show();
    //             } else {
    //                 if(el.value === ""){
    //                     $("#uniqueidMsg").hide();
    //                     $("#name").hide().text('');
    //                 } else {
    //                     $("#name").hide().text('');
    //                     $("#uniqueidMsg").show();
    //                 }
    //             }
    //         }

    //     })
    // }
</script>
@endsection
<!-- App js -->