@extends('layouts.app')

@section('title', 'Admin Outlet')
@section('breadcrumb', 'Manage Admin Outlet')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}


    <a class="kt-subheader__breadcrumbs-link">
        Edit Admin
    </a>

@endsection
@section('admin-franchisee', 'kt-menu__item--open kt-menu__item--here')
@section('list-admin-franchisee', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">

        <div class="kt-portlet__body">
           {{-- begin: Search form --}}
            <div class="col-md-6 offset-md-3">
                <form action="{{route('admin.franchisee.update')}}" id="createBrand" method="POST">
                    @csrf
                    <input type="hidden" name="id" value={{$user['id']}}>
                    <div class="form-group">
                        <label>Name *</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user"></i></span></div>
                            <input type="text" id="name" name="name" class="form-control m-input" placeholder="E.g: Rara Admin Brand" value="{{$user['name']}}" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Email *</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">@</span></div>
                            <input type="email" id="email" name="email" class="form-control m-input" placeholder="E.g: rara@mail.com" value="{{$user['email']}}" required autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Phone *</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-phone"></i></span></div>
                            <input type="text" id="phone" name="phone" class="form-control m-input" placeholder="E.g: 087821312xxx" value="{{$user['phone']}}" required autocomplete="off">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="">City *</label>
                        <br>
                        <select name="city" id="city" class="js-example-basic-single" style="width:100%!important;">
                            <option value="">-- Choose City --</option>
                            @foreach ($city['result'] as $item)
                                <option value="{{$item['id']}}" {{($item['id'] == $user['id_city']) ? 'selected' : ''}}>{{$item['city_name']}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label>New PIN</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-key"></i></span></div>
                            <input id="pin" type="password" placeholder="New PIN (Leave blank to keep current PIN)" class="form-control m-input" name="pin"  required autocomplete="new-password">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Confirm New PIN</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-key"></i></span></div>
                            <input id="pin_confirmation" type="password" placeholder="Confirm New PIN (Leave blank to keep current PIN)" class="form-control " name="pin_confirmation"  required autocomplete="new-password">
                        </div>
                    </div>

                </form>
                <div class="pull-right">
                    <button class="btn btn-secondary btn-back" type="button">Back</button>
                    <input class="btn btn-warning reset" type="reset">
                    <button class="btn btn-primary  text-white" id="create"><i class="fa fa-edit"></i> Edit</button>
                </div>
            </div>
           {{-- end: Search form --}}

        </div>
    </div>
@endsection

@section('custom-script')
<script>
    $(document).ready(function(){
        $('.js-example-basic-single').select2();
    })

    $(".btn-back").on("click", function(){
        window.history.back();
    });

    $('#create').click(function (event) {
        event.preventDefault();
        $('#loading').show();
        var form = $('#createBrand'),
            url = form.attr('action'),
            method = 'POST';

        form.find('.help-block').remove();
        form.find('.form-group input').removeClass('is-invalid');

        $.ajax({
            url : url,
            method: method,
            data : form.serialize(),
            success: function (response) {
                $('#loading').hide();
                console.log(response);
                /*if (response.status == "fail") {
                    swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'PIN Not Match!'
                    });
                }*/

                if (response.status == "success") {
                    swal.fire({
                        type : 'success',
                        title : 'Success!',
                        timer: 5000,
                        text : 'Data has been saved!'
                    }).then((result) => {
                        if (result.value) {
                            $(location).attr('href', "{{route('admin.franchisee.index')}}");
                        }
                            $(location).attr('href', "{{route('admin.franchisee.index')}}");
                    });
                }
                else if (response.status == "fail") {
                    $('.form-group input').removeClass('is-invalid');
                    $.each(response.messages, function (key, value) {
                        $('#' + key)
                            .closest('.form-group input')
                            .addClass('is-invalid')
                            .append('<span class="help-block"><strong>' + value + '</strong></span>');
                        $('#' + key)
                            .closest('.form-group')
                            .append('<span class="help-block"><strong>' + value + '</strong></span>');
                    });
                }
            },
            error : function (xhr) {
                $('#loading').hide();
                // console.log(xhr);
                swal.fire({
                    type : 'error',
                    title : 'Failed!',
                    text : 'An error Occured!'
                });

            }
        })
    });

    $(document).on('click', '.reset', function(){
            reset();
        })

        function reset() {
            $('#name').val('');
            $('#email').val('');
            $('#phone').val('');
            $('#city').val('').trigger('change');
            $('#password').val('');
            $('#password_confirm').val('');
        }

    $('#pin, #pin_confirmation').on('keyup input change', function(e) {
            var value = $(this).val();
            value = value.replace(/[^0-9]/g, '');
            // check: accept number only
            var check = /^\d+$/.test(value)
            if (!check || value.length > 6) {
                e.preventDefault();
                value = value.substring(0,6);
            }
            $(this).val(value);
        });

    window.onload = function() {
    const myInput = document.getElementById('password');
    myInput.onpaste = function(e) {
    e.preventDefault();
        }
    const inputConfirm = document.getElementById('password_confirm');
    inputConfirm.onpaste = function(f){
        f.preventDefault();
    }
    }
</script>
@endsection