@extends('layouts.company_main')

@section('title','Transactions')

@section('content')

<div id="indexWrapper">
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Transactions</h3>
            <div class="card-tools user_data_tools" id="user_data_tools">
                
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive dataTableRow" id="dataTableRow">
                <label class="el-waiting-message">Loading your data. It may take some time..</label>
            </div>
        </div>
    </div>
</div>

<div class="display-none" id="detailWrapper">
    <form method="POST" action="#update" class="form-update-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Transactions</h3>
            <div class="card-tools">
                <a class="btn btn-sm btn-success btn-download-pdf" href="#" target="new"><i class="fa fa-download"></i> PDF</a>
            </div>
        </div>
        <div class="card-body">
            <div class="form-group display-none err_msg_div">
                <p class="alert err_msg_p">
                    <a class="close" aria-hidden="true" data-dismiss="alert">x</a>
                </p>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Signature</label>
                        <a href="#" id="image_signature_link" target="new">
                            <img class="image_signature" width="100%" onerror="imgError(this);">
                        </a>
                    </div>
                    <div class="form-group">
                        <label>report</label>
                        <a href="#" id="image_report_link" target="new">
                            <img class="image_report" width="100%" onerror="imgError(this);">
                        </a>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="form-group">
                        <label>Transaction Code</label>
                        <input class="form-control form-control-sm" name="transaction_code" readonly>
                    </div>
                    <div class="form-group">
                        <label>User</label>
                        <input class="form-control form-control-sm" name="user_name" readonly>
                    </div>
                    <div class="form-group">
                        <label>Customer</label>
                        <input class="form-control form-control-sm" name="customer_name" readonly>
                    </div>
                    <div class="form-group">
                        <label>Total Price</label>
                        <input class="form-control form-control-sm" name="total_price" readonly>
                    </div>
                    <div class="form-group">
                        <label>Payment Method</label>
                        <input class="form-control form-control-sm" name="payment_method" readonly>
                    </div>
                    <div class="form-group">
                        <label>Transaction Status</label>
                        <input class="form-control form-control-sm" name="transaction_status" readonly>
                    </div>
                    <div class="form-group">
                        <label>Transaction Date</label>
                        <input class="form-control form-control-sm" name="created_at" readonly>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label>Latitude</label>
                            <input class="form-control form-control-sm" name="latitude" readonly>
                        </div>
                        <div class="col-md-6">
                            <label>Longitude</label>
                            <input class="form-control form-control-sm" name="longitude" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Note</label>
                        <textarea class="form-control form-control-sm" name="transaction_note" readonly></textarea>
                    </div>
                </div>
            </div>
            
            <br><br>
            
            <div class="card top-border-cyan">
                <div class="card-header">
                    <h3 class="card-title">Detail Transaction</h3>
                </div>
                <div class="card-body">
                    <br><br>
                    <div class="form-group">
                        <h5>Internal Products</h5>
                        <hr>
                        <div class="products_list_wrapper">
                            <div class="table-responsive dataTableProducts" id="dataTableProducts">
                                <label class="el-waiting-message">Loading your data. It may take some time..</label>
                            </div>
                        </div>
                    </div>
                    <br><br>
                    <div class="form-group">
                        <h5>External Products</h5>
                        <hr>
                        <div class="external_products_list_wrapper">
                            <div class="table-responsive dataTableExternal" id="dataTableExternal">
                                <label class="el-waiting-message">Loading your data. It may take some time..</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        <br>
        <br>
        <div class="fixed-bottom-input-footer" style="z-index:1">
            <button type="button" class="btn btn-sm btn-default" onclick="setViewTo('INDEX')">Back</button>
        </div>
    </div>
    </form>
</div>

<script>
    var params = {
        status: "ACTIVE",
    }
    
    function setViewTo(wrp){
        var index = $('#indexWrapper'),
            detail = $('#detailWrapper');
        
        if(wrp === "DETAIL"){
            hide_element(index);
            show_element(detail);
      }else{
            show_element(index);
            hide_element(detail);
            loadThis(params);
        }
    }
    
    $(document).ready(function () {
        loadThis(params);
        $(document).on('click', '.transaction_code', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr')
                id = tr.find('.id_transaction').html();
            
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                setViewTo("DETAIL");
                $.ajax({
                    url: '/company/getTransaction',
                    type: "get",
                    data: {
                            id: id
                          }
                })
                .done(function (result) {
                    hideLoading(e_modal_wait);
                    if(result.data[0]){
                        var data = result.data[0],
                            form = $('.form-update-data');
                            $('.btn-download-pdf').attr('href', '/company/transaction/pdf/'+id);
                            form.find("input[name=transaction_code]").val(data.transaction_code);
                            form.find("input[name=user_name]").val(data.user_name);
                            form.find("input[name=customer_name]").val(data.customer_name);
                            form.find("input[name=total_price]").val(data.total_price);
                            form.find("input[name=payment_method]").val(data.payment_method);
                            form.find("input[name=transaction_status]").val(data.transaction_status);
                            form.find("input[name=created_at]").val(data.created_at);
                            form.find("input[name=latitude]").val(data.latitude);
                            form.find("input[name=longitude]").val(data.longitude);
                            form.find("textarea[name=transaction_note]").val(data.transaction_note);
                            
                            form.find(".image_signature").attr('src', '/upload_image/signature/'+data.image_signature);
                            form.find(".image_report").attr('src', '/upload_image/report/'+data.image_report);
                            detail_param = {
                                id_transaction: id
                            }
                            loadProduct(detail_param)
                            loadExternal(detail_param)
                            
                            $('#image_signature_link').attr('href', '/upload_image/signature/'+data.image_signature)
                            $('#image_report_link').attr('href', '/upload_image/report/'+data.image_report)
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        });
    });
    
    function loadThis(data){
        var datas = loadAsData(data);
        url = datas.url;
        param = datas.param;
        th = datas.th;
        col_def = datas.col_def;
        columns = currency.columns;
        
        loadTable(url, param, th, col_def, columns);
    }
    function loadAsData(param){
        param = param;
        url = "getTransaction";
        th = '<th width="5%">ID</th>' +
             '<th class="text-dark cursor-default" width="5%">Transaction Code</th>' +
             '<th>User</th>' +
             '<th>Customer</th>' +
             '<th>Payment Method</th>' +
             '<th>Total Price</th>' +
             '<th>DateTime</th>' +
             '<th>Status</th>';
        columns = [
                    {"data": "id_transaction", className: "id_transaction"},
                    {"data": "transaction_code", className: "transaction_code text-link"},
                    {"data": "user_name"},
                    {"data": "customer_name"},
                    {"data": "payment_method"},
                    {"data": "total_price"},
                    {"data": "create_date"},
                    {"data": "transaction_status"},
                  ];
    
        col_def = [
                    {
                        "targets" : 5,
                        "data": "total",
                        "render" : function (data, type, row) {
                           return 'RM ' + row.total_price;
                        }
                    }
                ];
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
    
    function loadProduct(data){
        var datas = loadDataProduct(data);
        url = datas.url;
        param = datas.param;
        th = datas.th;
        col_def = datas.col_def;
        columns = datas.columns;
        wrapper = $('#dataTableProducts');
        table_settings = {
            "lengthMenu": [[10, 25, 50, 100, 150, 200, 250, 500], [10, 25, 50, 100, 150, 200, 250, 500]],
            "destroy": true,
            "bDestroy": true,
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "searching": false,
            "ajax": {
                "url": url,
                "data": param
            },
            "dataSrc": function (result) {
                var json = result.model.rows;
                return json;
            },
            "columns": columns,
            "columnDefs": col_def,
            "bPaginate": false,
            "bLengthChange": true,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "bAutoWidth": true,
            "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"pull-left"i><"pull-right"p>>>',//+'Br',
            // 'buttons': datatablesButtons()
        }
        
        loadTableScd(wrapper, url, param, th, col_def, columns, table_settings)
    }
    function loadDataProduct(data){
        param = data;
        url = "getTransactionProducts";
        th = '<th>Product Name</th>' +
             '<th>Qty</th>' +
             '<th>Total Price</th>';
        columns = [
                    {"data": "product_name"},
                    {"data": "qty"},
                    {"data": "total_item_price"}
                  ];
    
        col_def = [
                    {
                        "targets" : 2,
                        "data": "total",
                        "render" : function (data, type, row) {
                           return 'RM ' + row.total_item_price;
                        }
                    }
            ];
    
        table = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return table;
    }
    
    
    function loadExternal(data){
        var datas = loadDataExternal(data);
        url = datas.url;
        param = datas.param;
        th = datas.th;
        col_def = datas.col_def;
        columns = datas.columns;
        wrapper = $('#dataTableExternal');
        table_settings = {
            "lengthMenu": [[10, 25, 50, 100, 150, 200, 250, 500], [10, 25, 50, 100, 150, 200, 250, 500]],
            "destroy": true,
            "bDestroy": true,
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "searching": false,
            "ajax": {
                "url": url,
                "data": param
            },
            "dataSrc": function (result) {
                var json = result.model.rows;
                return json;
            },
            "columns": columns,
            "columnDefs": col_def,
            "bPaginate": false,
            "bLengthChange": true,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "bAutoWidth": true,
            "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"pull-left"i><"pull-right"p>>>',//+'Br',
            // 'buttons': datatablesButtons()
        }
        
        loadTableScd(wrapper, url, param, th, col_def, columns, table_settings)
    }
    function loadDataExternal(data){
        param = data;
        url = "getTransactionExternal";
        th = '<th>Product Name</th>' +
             '<th>Qty</th>' +
             '<th>Product Price</th>' +
             '<th>Total Price</th>';
        columns = [
                    {"data": "product_name"},
                    {"data": "product_qty"},
                    {"data": "product_price"},
                    {"data": "total_price"}
                  ];
    
        col_def = [
                    {
                        "targets" : 2,
                        "data": "total_price",
                        "render" : function (data, type, row) {
                           return 'RM ' + row.product_price;
                        }
                    },
                    {
                        "targets" : 3,
                        "data": "total",
                        "render" : function (data, type, row) {
                           return 'RM ' + row.total_price;
                        }
                    }
            ];
    
        table = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return table;
    }
</script>
@endsection