@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>New Distribution Laku Simpan</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">                
                <div class="col-xs-12">
                    <div class="x_panel">                       
                        <div class="x_content">
                            <div style="margin-bottom:16px;">
                                <form class="form-horizontal" method="get" id="form-distribution">
                                    <input type="hidden" name="pawns" class="input-pawn">
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Opening Date:</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input name="opening" type="date" class="form-control" autofocus="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Maturity Date :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input name="maturity_date" type="date" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Agreement No :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input name="agreement_no" type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Interest Rate :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input name="interest" type="number" class="form-control" step="0.01">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Tenor :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input name="tenor" type="number" class="form-control" step="1">
                                        </div>
                                    </div>
                                    
                                    <hr>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Search Pawn Application :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input type="text" class="form-control input-search">
                                        </div>
                                    </div>
                                    <div class="form-group text-right">
                                        <button type="submit" class="btn btn-default btn-pawn-search"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
                                    </div>
                                    <table class="table table-bordered table-striped table-pawn">
                                        <thead>
                                            <tr>
                                                <th class="text-center">ID</th>
                                                <th class="text-center">Application Number</th>
                                                <th class="text-right">Amount</th>
                                                <th class="text-center">Disbursed At</th>
                                                <th></th>
                                            </tr>  
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="5" class="text-center no-data">No Data</td>
                                            </tr>
                                        </tbody>  
                                    </table>                              

                                    <div class="form-group text-center">
                                        <button type="submit" class="btn btn-primary btn-submit"><i class="fa fa-check" aria-hidden="true"></i> Save</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
    $("#form-distribution").on("submit", function() {
        var pawn = [];
        $("#form-distribution .btn-submit").html('<i class="fa fa-spinner fa-pulse"></i> Loading').attr("disabled", "disabled");
        $('.table-pawn  tbody  tr.data').each(function(index) {
            pawn.push($(this).data("id"));
        });
        $(".input-pawn").val(JSON.stringify(pawn));
        
        $.ajax({
            url: '/account/lakusimpan/distribution/new/save',
            method: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},                
            type : 'POST',
            data: $("#form-distribution").serialize(),
            success: function(response) {
                alert("Data Saved");
                location.href = "/account/lakusimpan/distribution/" + response.id;
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
                $("#form-distribution .btn-submit").html('<i class="fa fa-check" aria-hidden="true"></i> Save').removeAttr("disabled");
            }
        });

        return false;
    })

    $(".btn-pawn-search").on("click", function() {
        $(".btn-pawn-search").attr("disabled", "disabled").html('<i class="fa fa-spinner fa-spin"></i> Loading');
        $.ajax({
            url: '/account/lakusimpan/distribution/new/search_pawn',
            method: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},                
            type : 'POST',
            data: {
                "query" : $(".input-search").val()
            },
            success: function(response) {
                alert("Data Added");
                $(".btn-pawn-search").html('<i class="fa fa-search" aria-hidden="true"></i> Search').removeAttr("disabled");

                $(".table-pawn tbody").find(".no-data").remove();
                var temp_html = "<tr class='data' data-id='"+response.id+"'>";
                temp_html += "<td class='text-center'>"+response.id+"</td>";
                temp_html += "<td class='text-center'>"+response.application_number+"</td>";
                temp_html += "<td class='text-right'>"+response.amount+"</td>";
                temp_html += "<td class='text-center'>"+response.disbursed_at+"</td>";
                temp_html += "<td class='text-center'><button type='button' class='btn btn-danger btn-sm btn-delete'><i class='fa fa-times'></i></button></td>";
                temp_html += "</tr>";
                $(".table-pawn tbody").append(temp_html);
                $(".input-search").val("");
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
                $(".btn-pawn-search").html('<i class="fa fa-search" aria-hidden="true"></i> Search').removeAttr("disabled");
            }
        });
        return false;
    })

    $(".btn-delete").on("click", function() {
        $(this).parents("tr").remove();
    })
</script>
@endsection