@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3>Goldsaver</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">                
                <div class="col-xs-12">
                    <div class="x_panel">                       
                        <div class="x_content">
                            <div>
                                <form class="form-horizontal" id="form">
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Buy Price :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input type="number" class="form-control" autocomplete="false" autofocus required value="{{ $buy_price }}" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Sell Price :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input name="sell_price" type="number" class="form-control" autocomplete="false" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">File :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input name="file" type="file" class="form-control" autocomplete="false" required accept=".csv">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Partner Name :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input name="partner_name" type="text" class="form-control" autocomplete="false" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Description :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input name="description" type="text" class="form-control" autocomplete="false">
                                            <p class="small" style="margin-top:8px;">Transfer Goldsaver dari (partner name) (description)</p>
                                        </div>
                                    </div>

                                    <hr>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Search Handphone :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <div class="input-group">
                                                <input name="partner_handphone" type="tel" class="form-control input-handphone" autocomplete="false" required>
                                                <span class="input-group-btn">
                                                    <button type="button" class="btn btn-default btn-search" style="font-size:14px;"><i class="fa fa-search" aria-hidden="true"></i></button>
                                                </span>
                                            </div>    
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Partner Lakuemas Account :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input type="text" class="form-control input-partner-lakuemas-account" autocomplete="false" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-default btn-submit"><i class="fa fa-check" aria-hidden="true"></i> Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
$(document).ready(function() {
    $("#form .btn-search").on("click", function() {
        $("#form").find('.btn-search').html('<i class="fa fa-spinner fa-pulse"></i>').attr("disabled", "disabled");
        $.ajax({
            url: '/goldsaver/import/search_customer',
            method: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: { "handphone" : $("#form").find(".input-handphone").val() },
            type : 'POST',
            success: function(response) {
                $("#form").find('.btn-search').html('<i class="fa fa-search"></i>').removeAttr("disabled");
                $("#form").find(".input-partner-lakuemas-account").val(response.customer_code + " - " + response.customer_name);
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
                $("#form").find('.btn-search').html('<i class="fa fa-search"></i>').removeAttr("disabled");
            }
        });
        return false;
    })

    $("#form").on("submit", function() {
        $("#form").find('.btn-submit').html('<i class="fa fa-spinner fa-pulse"></i> Submit').attr("disabled", "disabled");
        var form = $("#form")[0];
        var formData = new FormData(form);

        $.ajax({
            url: '/goldsaver/import/save',
            method: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: formData,
            type : 'POST',
            contentType: false,
            processData: false,
            success: function(response) {
                alert("Data saved");
                location.href = "/goldsaver/import/" + response.id;
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
                $("#form").find('.btn-submit').html('<i class="fa fa-check"></i> Submit').removeAttr("disabled");
            }
        });
        return false;
    })
});
</script>
@endsection