@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>Distribution Laku Simpan #{{ $distribution->id }}</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 type="date" class="form-control" value="{{ $distribution->opening_date }}" readonly>
                                        </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 type="date" class="form-control" value="{{ $distribution->maturity_date }}" readonly>
                                        </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 type="text" class="form-control" value="{{ $distribution->lending_agreement_no }}" readonly>
                                        </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 type="number" class="form-control" value="{{ $distribution->interest_rate }}" readonly>
                                        </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 type="number" class="form-control" value="{{ $distribution->tenor }}" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Amount :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input class="form-control" readonly value="{{ $distribution->amount }}" readonly>
                                        </div>
                                    </div>

                                    <hr>

                                    <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>
                                            </tr>  
                                        </thead>
                                        <tbody>
                                            @forelse($distribution->distribution_detail as $detail)
                                                <tr>
                                                    <td class="text-center ">{{ $detail->id }}</td>
                                                    <td class="text-center">{{ $detail->pawn->application_number }}</td>
                                                    <td class="text-right">{{ number_format($detail->pawn->loan) }}</td>
                                                </tr>
                                            @empty
                                            <tr>
                                                <td colspan="3" class="text-center no-data">No Data</td>
                                            </tr>
                                            @endforelse
                                        </tbody>  
                                    </table>       
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
    var amount = 0;

    $("#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 class='btn btn-danger btn-sm'><i class='fa fa-times'></i></button></td>";
                temp_html += "</tr>";
                $(".table-pawn tbody").append(temp_html);
                $(".input-search").val("");

                amount = amount + response.loan;
                $(".input-amount").val(amount);
            },
            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;
    })
</script>
@endsection