@extends('layouts.layout')
@section('css')
    <link rel="stylesheet" href="{{ asset('/css/lakuemas_tarik.css') }}">
@endsection
@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>Laku Tarik</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ route('dashboard') }}">Home</a></li>                        
                        <li class="active">Transaction</li>
                        <li class="active">Laku Tarik</li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <div class="content_tarik">
                        <h4 class="mb-10">Tarik Emas</h4>
                        <div class="row mt-10 mb-10">
                            <div class="col-md-3">Nama Customer</div>
                            <div class="col-md-9">: {{ $customer->name }}</div>
                        </div>
                        <div class="row mt-10 mb-10">
                            <div class="col-md-3">No Rekening</div>
                            <div class="col-md-9">: {{ $customer->tabungan[0]->nomor_rekening }}</div>
                        </div>
                        <div class="row mt-10 mb-10">
                            <div class="col-md-3">Saldo</div>
                            <div class="col-md-9">: {{ $customer->tabungan[0]->saldo }} Gram</div>
                        </div>
                        <hr class="style-two">
                        <div class="row mt-10 mb-10">
                            <div class="col-md-3">
                                <h5>Brand Emas</h5>
                                <select id="brandEmas" name="brandEmas" class="form-control round" onchange="select_gold_brand()">
                                    <option value="">pilih</option>
                                    @foreach($gold_brands as $gold_brand)
                                        <option value="{{ $gold_brand->id }}">{{ $gold_brand->brand }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <h5>Pecahan Emas</h5>
                                <select id="pecahanEmas" name="pecahanEmas" class="form-control round">
                                    <option value="">pilih</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <h5>Jumlah</h5>
                                <input type="text" name="jumlahEmas" id="jumlahEmas" placeholder="jumlah" class="form-control round">
                            </div>
                            <div class="col-md-3 action-column">
                                <button class="btn btn-success btn-add w-100 fs-14" onclick="add_gold()"><i class="fa fa-plus"></i> Masukan</button>
                            </div>
                        </div>


                        <div class="row mt-10 mb-10">
                            <div class="col-md-12">
                                <table id="itemOrderTable" class="table-penarikan">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Pecahan</th>         
                                            <th class="text-center">QTY</th>                                   
                                            <th class="text-right">Biaya sertifikat</th>
                                            <th class="text-right">Total biaya sertifikat</th>
                                            <th class="text-center">#</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="5" class="text-center">Tidak ada item</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="alert-msg alert-msg-item" style="display: none;"></div>
                            </div>
                        </div>

                        <hr class="style-two">
                        <div class="row mt-10 mb-10">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Metode Pembayaran</label>
                                    <select class="form-control" id="payment_method">
                                        <option value="">Pilih Metode Pembayaran</option>
                                        @foreach($payment_methods as $payment_method)
                                            <option value="{{ $payment_method->id }}">{{ $payment_method->label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Tempat Pengambilan</label>
                                    <select class="form-control input-brand" id="brand_store" onchange="search_store()">
                                        <option value="">Pilih toko</option>
                                        @foreach($brands as $brand)
                                            <option value="{{ $brand->id }}">{{ $brand->brand }}</option>
                                        @endforeach
                                    </select>
                                    <div class="alert-msg alert-msg-brand-store" style="display: none;"></div>

                                    <br>
                                    <select class="form-control input-cabangpenarikan" name="store" id="store" onchange="select_store()">
                                        <option value="">Pilih Tempat Pengambilan</option>                                    
                                    </select>
                                    <div class="alert-msg alert-msg-store" style="display: none;"></div>
                                </div>

                                <div class="form-group">
                                    <p class="form-control-plaintext form-text text-muted txt-cabangpenarikan">-</p>
                                </div>
                            
                                <div class="form-group">
                                    <small>
                                        Catatan :<br>
                                        * Minimum saldo mengendap adalah {{ $settings['minimum_saldo'] }} Gram
                                    </small>
                                </div>

                                <div class="form-group">
                                    <!-- <div class="text-center loading d-none"><i class="fa fa fa-spinner fa-pulse"></i></span></div> -->
                                    <div class="submit"><button type="submit" class="btn btn-primary btn-block font-weight-bold" onclick="checkout()">LANJUTKAN</button></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
    $(document).ready(function() {
        checkActiveTx();
    });

    function select_gold_brand() {
        $.ajax({
            url: 'get_pecahan_emas',
            method: "POST",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: {
                "id_gold_brand" : $("#brandEmas").val(),
                "id_customer" : '{{ $customer_id }}',
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
            },
            success: function(response) {
                $("#pecahanEmas").html("<option value=''>Pilih Pecahan</option>");
                $.each(response.stocks, function(key,value) {
                    $("#pecahanEmas").append("<option value='"+value.id_pecahan_emas_global+"'>"+value.value+"</option>");
                });
            }
        });
        return false;
    }
    function add_gold() {
        $.ajax({
            url: 'add_gold',
            method: "POST",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: {
                "id_pecahan_emas_global" : $("#pecahanEmas").val(),
                "quantity" : $("#jumlahEmas").val(),
                "id_customer" : '{{ $customer_id }}',
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
            },
            success: function(response) {
                var html_cart = "";
                $.each(response.cart, function(key,value) {
                    html_cart += "<tr class='gold_item'>";
                    html_cart += "<td class='text-center'>"+value.weight+" Gram</td>";
                    html_cart += "<td class='text-center'>"+value.quantity+"</td>";
                    html_cart += "<td class='text-right'>Rp. "+value.certificate_cost+"</td>";
                    html_cart += "<td class='text-right'>Rp. "+value.total_certificate_cost+"</td>";
                    html_cart += "<td class='text-center'><button type='button' class='btn btn-default btn-sm btn-remove' onclick='remove_gold(&#39;"+value.id+"&#39;, " + value.weight + ")'><i class='fa fa-trash'></i></button></td>";
                    html_cart += "</tr>";
                });
                $(".table-penarikan").find("tbody").html(html_cart);

                $('.alert-msg-item').hide();
            }
        });
        return false;
    }
    function remove_gold(id, pecahan) {
        $.ajax({
            url: 'remove_gold',
            method: "POST",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: { 
                "id" : id,
                "pecahan" : pecahan,
                "id_customer" : '{{ $customer_id }}',
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
            },
            success: function(response) {
                var html_cart = "";
                $.each(response.cart, function(key,value) {
                    html_cart += "<tr class='gold_item'>";
                    html_cart += "<td class='text-center'>"+value.weight+" Gram</td>";
                    html_cart += "<td class='text-center'>"+value.quantity+"</td>";
                    html_cart += "<td class='text-right'>Rp. "+value.certificate_cost+"</td>";
                    html_cart += "<td class='text-right'>Rp. "+value.total_certificate_cost+"</td>";
                    html_cart += "<td class='text-center'><button type='button' class='btn btn-default btn-sm btn-remove' onclick='remove_gold(&#39;"+value.id+"&#39;, " + value.weight + ")'><i class='fa fa-trash'></i></button></td>";
                    html_cart += "</tr>";
                });
                $(".table-penarikan").find("tbody").html(html_cart);
            }
        });
        return false;
    }

    function search_store() {
        if($(".input-brand").val() != '') {
            $.ajax({
                url: 'search_store',
                method: "POST",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: { 
                    "id_brand" : $(".input-brand").val(),
                    "id_customer" : '{{ $customer_id }}',
                },
                error: function(response) {
                    var data = response.responseJSON;
                    alert(data.error);
                },
                success: function(response) {
                    var html_store = "<option value=''>Pilih Tempat Pengambilan</option>";
                    $.each(response.store, function(key,value) {
                        html_store += "<option value='"+value.id+"' data-txtstoredetail='"+value.store_detail+"'>"+value.nama+"</option>";
                    });
                    $(".input-cabangpenarikan").html(html_store);
                    $(".txt-cabangpenarikan").html("");
                    $('.alert-msg-brand-store').hide();
                }
            });
        }
        return false;
    }

    function select_store() {
        var txt_detail = $(".input-cabangpenarikan").find(":selected").attr("data-txtstoredetail");
        $(".txt-cabangpenarikan").html(txt_detail);
        $('.alert-msg-store').hide();
    }

    function checkout() {
        let error_count = 0;
        if($("tbody").find(".gold_item").length == 0) {
            $('.alert-msg-item').html('Anda belum memilih emas yang akan diambil');
            $('.alert-msg-item').fadeIn();
            error_count = 1;
        }
        let brand_store = $('#brand_store').val();
        if(brand_store == '') {
            $('.alert-msg-brand-store').html('Anda belum memilih toko');
            $('.alert-msg-brand-store').fadeIn();
            error_count = 1;
        }
        let store = $('#store').val();
        if(store == '') {
            $('.alert-msg-store').html('Anda belum memilih lokasi pengambilan');
            $('.alert-msg-store').fadeIn();
            error_count = 1;
        }

        if(error_count > 0) {
            return false;
        }
        else {
            $('.alert-msg').hide();            
        }

        $.ajax({
            url: 'checkout',
            method: "POST",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: { 
                    "store" : $("#store").val(),
                    "id_customer" : '{{ $customer_id }}',
                    "id_metode_pembayaran" : $("#payment_method").val()
                },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
            },
            success: function(response) {
                location.href = "{{ $customer_id }}/konfirmasi";
            }
        });
        return false;
    }

    function checkActiveTx() {
        $.ajax({
            url: 'check_active_tx',
            method: "POST",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: { 
                    "id_customer" : '{{ $customer_id }}'
                },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
            },
            success: function(response) {
                var html_cart = "";
                if(response.cart.length > 0) {
                    $.each(response.cart, function(key,value) {
                        html_cart += "<tr class='gold_item'>";
                        html_cart += "<td class='text-center'>"+value.weight+" Gram</td>";
                        html_cart += "<td class='text-center'>"+value.quantity+"</td>";
                        html_cart += "<td class='text-right'>Rp. "+value.certificate_cost+"</td>";
                        html_cart += "<td class='text-right'>Rp. "+value.total_certificate_cost+"</td>";
                        html_cart += "<td class='text-center'><button type='button' class='btn btn-default btn-sm btn-remove' onclick='remove_gold(&#39;"+value.id+"&#39;, " + value.weight + ")'><i class='fa fa-trash'></i></button></td>";
                        html_cart += "</tr>";
                    });
                    $(".table-penarikan").find("tbody").html(html_cart);

                    $('.alert-msg-item').hide();
                }
            }
        });
    }
</script>
@endsection