@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="row">
                                        <div class="col-xs-6">
                                            <span class="label label-info">{{ strtoupper($goldsaver->status) }}</span>
                                        </div>

                                        <div class="col-xs-6 text-right">
                                            @if($goldsaver->status == 'pending')
                                                <button type="button" class="btn btn-default btn-add-data"><i class="fa fa-plus" aria-hidden="true"></i> Add Data</button>
                                                <button type="button" class="btn btn-danger btn-delete"><i class="fa fa-times" aria-hidden="true"></i> Delete</button>
                                                <button type="submit" class="btn btn-primary btn-save"><i class="fa fa-check" aria-hidden="true"></i> Save</button>
                                                <button type="button" class="btn btn-success btn-execute"><i class="fa fa-check" aria-hidden="true"></i> Execute</button>
                                            @endif
                                        </div>
                                    </div>

                                    <hr>

                                    <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 name="buy_price" type="number" class="form-control" autocomplete="false" autofocus required value="{{ $goldsaver->buy_price }}">
                                        </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 value="{{ $goldsaver->sell_price }}">
                                        </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 value="{{ $goldsaver->partner_name }}">
                                        </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" value="{{ $goldsaver->description }}">
                                            <p class="small" style="margin-top:8px;">Transfer Goldsaver dari (partner name) (description)</p>
                                        </div>
                                    </div>

                                    <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 value="{{ $goldsaver->partner->handphone }}">
                                                <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 value="{{ $goldsaver->partner->code }} - {{ $goldsaver->partner->name }}">
                                        </div>
                                    </div>

                                    <hr>

                                    <div style="margin-bottom:8px;">
                                        <span class="label label-default">{{ count($goldsaver_details) }} Data</span>
                                        <span class="label label-default">{{ number_format($goldsaver->total_price) }}</span>
                                    </div>

                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Name</th>
                                                <th class="text-center">Email</th>
                                                <th class="text-center">Hanphone</th>
                                                <th class="text-center">Nominal</th>
                                                <th class="text-center">LE Account</th>
                                                <th class="text-center">Transfer Transaction</th>
                                                <th class="text-center">Gold Amount</th>
                                                <th class="text-center">Status</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($goldsaver_details as $detail)
                                                <tr>
                                                    <td class="text-center">{{ ucfirst($detail->name) }}</td>
                                                    <td class="text-center">{{ $detail->email }}</td>
                                                    <td class="text-center">{{ $detail->handphone }}</td>
                                                    <td class="text-center">{{ number_format($detail->nominal) }}</td>
                                                    <td class="text-center">@if($detail->customer) {{ $detail->customer->code }}<br>{{ $detail->customer->name }} @endif</td>
                                                    <td class="text-center">@if($detail->transfer_transaction) {{ $detail->transfer_transaction->code }} @endif</td>
                                                    <td class="text-center">{{ $detail->gold_amount }}</td>
                                                    <td class="text-center">
                                                        @if ($detail->processed == '1')
                                                            Processed
                                                        @elseif($detail->processed == '0')
                                                            Pending
                                                        @elseif($detail->processed == '-1')
                                                            Failed
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        @if($goldsaver->status == "pending")
                                                            <button class="btn btn-danger btn-xs btn-remove-data" data-id="{{ $detail->id }}"><i class="fa fa-times" aria-hidden="true"></i></button>
                                                        @endif

                                                        @if($goldsaver->status == 'processing' && $detail->processed == '-1')
                                                            <button class="btn btn-default btn-xs btn-reprocess-data" data-id="{{ $detail->id }}"><i class="fa fa-refresh" aria-hidden="true"></i></button>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="8" class="text-center">No Data</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>

                                    <div class="text-center">{{ $goldsaver_details->links() }}</div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="modal-add-data">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Add Data</h4>
            </div>
            <form id="form-add-data" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-2 control-label">Name :</label>
                        <div class="col-xs-12 col-sm-10">
                            <input name="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">Email :</label>
                        <div class="col-xs-12 col-sm-10">
                            <input name="email" type="email" class="form-control" autocomplete="false" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-xs-12 col-sm-2 control-label">Handphone:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input name="handphone" type="tel" class="form-control" autocomplete="false" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-xs-12 col-sm-2 control-label">Nominal:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input name="nominal" type="number" class="form-control" autocomplete="false" required>
                        </div>
                    </div>                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary btn-form-add-data"><i class="fa fa-check" aria-hidden="true"></i> Add</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section("scripts")
<script type="text/javascript">
@if($goldsaver->status == 'pending')
    $(document).ready(function() {
        $('#modal-add-data').modal({
            "keyboard" : false,
            "show" : false
        });

        $("#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;
        })

        $(".btn-remove-data").on("click", function() {
            if(confirm("Are you sure want to delete this data?")) {
                $(this).html('<i class="fa fa-spinner fa-pulse"></i>').attr("disabled", "disabled");
                var $this = $(this);
                var $tr_parent = $(this).parents("tr");

                $.ajax({
                    url: '/goldsaver/import/{{ $goldsaver->id }}/remove_data',
                    method: "POST",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    data: { "id" : $this.data("id") },
                    type : 'POST',
                    success: function(response) {
                        $tr_parent.remove();
                        alert("Data removed");
                    },
                    error: function(response) {
                        var data = response.responseJSON;
                        alert(data.error);
                        $this.html('<i class="fa fa-times"></i>').removeAttr("disabled");
                    }
                });                
            }
            return false;
        })

        $(".btn-add-data").on("click", function() {
            $("#form-add-data")[0].reset();
            $("#modal-add-data").modal("show");
        })

        $("#form-add-data").on("submit", function() {
            $("#form-add-data").find(".btn-form-add-data").html('<i class="fa fa-spinner fa-pulse"></i> Add').attr("disabled", "disabled");
            $.ajax({
                url: '/goldsaver/import/{{ $goldsaver->id }}/add_data',
                method: "POST",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: $("#form-add-data").serialize(),
                type : 'POST',
                success: function(response) {
                    alert("Data added, the page will be refreshed");
                    location.reload();
                },
                error: function(response) {
                    var data = response.responseJSON;
                    alert(data.error);
                    $("#form-add-data").find(".btn-form-add-data").html('<i class="fa fa-check"></i> Add').removeAttr("disabled");
                }
            });
            return false;
        })

        $(".btn-delete").on("click", function() {
            if(confirm("Are you sure want to delete this data?")) {
                $(".btn-delete").html('<i class="fa fa-spinner fa-pulse"></i> Delete').attr("disabled", "disabled");
                $.ajax({
                    url: '/goldsaver/import/{{ $goldsaver->id }}/delete',
                    method: "POST",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},                
                    type : 'POST',
                    success: function(response) {
                        alert("Data deleted");
                        location.href = "{{ route('goldsaver\list') }}";
                    },
                    error: function(response) {
                        var data = response.responseJSON;
                        alert(data.error);
                        $(".btn-delete").html('<i class="fa fa-times"></i> Delete').removeAttr("disabled");
                    }
                });
            }
            return false;
        })

        $("#form").on("submit", function() {
            if(confirm("Are you sure want to save this data?")) {
                $("#form").find(".btn-save").html('<i class="fa fa-spinner fa-pulse"></i> Save').attr("disabled");
                $.ajax({
                    url: '/goldsaver/import/{{ $goldsaver->id }}/save',
                    method: "POST",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},   
                    data: $("#form").serialize(),             
                    type : 'POST',
                    success: function(response) {
                        alert("Data deleted");
                        location.reload();
                    },
                    error: function(response) {
                        var data = response.responseJSON;
                        alert(data.error);
                        $("#form").find(".btn-save").html('<i class="fa fa-check" aria-hidden="true"></i> Save').removeAttr("disabled");
                    }
                });
            }
            return false;
        });

        $(".btn-execute").on("click", function() {
            if(confirm("After this button clicked, system will process the data on background and you cannot update the data anymore.\nAre you sure want to execute this data?")) {
                $(".btn-execute").html('<i class="fa fa-spinner fa-pulse"></i> Execute').attr("disabled", "disabled");
                $.ajax({
                    url: '/goldsaver/import/{{ $goldsaver->id }}/execute',
                    method: "POST",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},                
                    type : 'POST',
                    success: function(response) {
                        alert("System will process the data on the background. Page will be refreshed");
                        location.reload();
                    },
                    error: function(response) {
                        var data = response.responseJSON;
                        alert(data.error);
                        $(".btn-execute").html('<i class="fa fa-check"></i> Execute').removeAttr("disabled");
                    }
                });
            }
            return false;
        });
    });
@endif
</script>
@endsection