@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
<style>
    ul {margin:0;}
</style>
@endsection
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            @include('pages.goldsaver.inc_top.include_top', ['title_page' => 'Create Partner Account'])
            <div class="row">
                @include('pages.goldsaver.inc_breadcrumb.include_breadcrumb', ['current_page' => 'Create Partner Account'])
                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Create Partner Account</h2>
                        </div>
                        <div class="x_content">
                            <form class="form-horizontal" id="create_partner_account_form" >
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 control-label">Nomor Handphone :</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <input name="handphone" type="text" class="form-control" placeholder="Nomor Handphone" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 control-label">Email :</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <input type="text" name="email" class="form-control" placeholder="Email" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 control-label">Partner Account Name :</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <input type="text" name="partner_name" class="form-control" placeholder="Partner Account Name" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 control-label">Institution :</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <input type="text" name="institution" class="form-control" placeholder="Institution" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-3">
                                    </div>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="alert_placeholder"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-3"></div>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                                        <div class="submit">
                                            <button class="btn btn-primary" type="submit">Create Account</button>
                                        </div>                                            
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('pages.goldsaver.create_partner_account.popup_confirmation')
@endsection
@section("scripts")
<script type="text/javascript">
    function show_modal(){
        $('#modal-confirmation').modal('show');    
        return false;
    }
    function toggle_modal(){
        $('#modal-confirmation').modal('hide') 
        return false;
    }
    function do_confirm(){
        $('#modal-confirmation').modal('hide') 
        var $form = $('#create_partner_account_form');

        console.log($form.serialize());
        $form.find('.loading').removeClass('hidden');
        $form.find('.submit').addClass('hidden');

        $.ajax({
            url: web_url + '/api/goldsaver/create_partner_account/create',
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: $form.serialize()
        })
        .done(function(r) {
            alert('Data berhasil diinput');
            location.reload();
        }).error(function(e) {
            console.log(e.responseJSON.message_desc);
            alert(e.responseJSON.message_desc);
            $form.find('.loading').addClass('hidden');
            $form.find('.submit').removeClass('hidden');
        });
        
        return false;
    }

    $(document).ready(function() {      
        $('#create_partner_account_form').on('submit', show_modal);
        $('#btn-confirm').on('click', do_confirm);
        $('#btn-cancel').on('click', toggle_modal);
    }); 
</script>
@endsection