@extends("layouts.default")

@section("title", trans("lang.orders_",['name'=>__('lang.detail')]))

@section("block-header")
    @lang('lang.orders_',['name'=>trans('lang.detail')])
    <small>
        <a class="btn btn-primary" href="{{ route('order.index') }}">@lang('lang.back')</a>
    </small>
@stop

@section("breadcrumb")
    @parent
    <li class="breadcrumb-item">
        <a href="{{ route('order.index') }}">@lang('lang.orders_',['name'=>trans('lang.list')])</a>
    </li>
    <li class="breadcrumb-item active">
        @lang('lang.order_detail')
    </li>
@stop

@section("content")
<!-- Basic Table -->
@includeWhen(Session::has("success"),"inc.alert")

@if ($errors->any())
    <div class="alert alert">
        @foreach ($errors->all() as $error)
            {{ $error }}
        @endforeach
    </div>
@endif


<div class="row clearfix">
    <div class="col-md-12">
        <div class="card">
            <div class="body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a 
                            class="nav-link active"
                            data-toggle="tab"
                            href="#order-info">@lang('lang.order_info')
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel"
                         class="tab-pane active in"
                         id="order-info">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="body">
                                    @if($type == 1)
                                        @include('order.inc.farmer_purhase')
                                    @else
                                        @include('order.inc.trader_purhase')
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style type="text/css">
    .badge-purple {
        border-color: #800080;
        color: #800080;
    }
</style>

@section('modal')
    <form id="form-update-purchase" action="{{ route('farmer_purchase.update_item') }}" method="post">
        @csrf
        @method("PUT")

        <input type="hidden" name="purchase_id" id="purchase_id">
        <input type="hidden" name="product_id" id="product_id">

        <div id="modal-update-purchase"
             class="modal fade in"
             tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content text-capitalize">
                    <div class="modal-header">
                        <h5 class="modal-title"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row clearfix">
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto" for="quantity">@lang('lang.qty')</label>
                                    <div class="col-md-8">
                                        <input type="number" value="" class="form-control"
                                               id="quantity"
                                               name="quantity"
                                               placeholder="@lang('lang.qty')">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto"
                                           for="unit_price">@lang('lang.unit_price') (KHR)</label>
                                    <div class="col-md-8">
                                        <input class="form-control"
                                               value=""
                                               type="text" name="unit_price"
                                               id="unit_price"
                                               placeholder="@lang('lang.unit_price')">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto"
                                           for="delivery_fee">@lang('lang.delivery_fee') (KHR)</label>
                                    <div class="col-md-8">
                                        <input class="form-control"
                                               value=""
                                               type="text" name="delivery_fee"
                                               id="delivery_fee"
                                               placeholder="@lang('lang.delivery_fee')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="text-capitalize btn btn-secondary"
                                data-dismiss="modal">@lang('lang.close')</button>
                        <button type="submit" class="text-capitalize btn-save btn btn-success">@lang('lang.save')</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <form id="form-update-purchase-trader" action="{{ route('trader_purchase.update_item') }}" method="post">
        @csrf
        @method("PUT")

        <input type="hidden" name="purchase_id" id="trader-purchase-id">

        <div id="modal-update-purchase-trader"
             class="modal fade in"
             tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content text-capitalize">
                    <div class="modal-header">
                        <h5 class="modal-title"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row clearfix">
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto" for="quantity">@lang('lang.qty')</label>
                                    <div class="col-md-8">
                                        <input type="number" value="" class="form-control"
                                               id="trader-quantity"
                                               name="quantity"
                                               placeholder="@lang('lang.qty')">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto"
                                           for="unit_price">@lang('lang.unit_price') (KHR)</label>
                                    <div class="col-md-8">
                                        <input class="form-control"
                                               value=""
                                               type="text" name="unit_price"
                                               id="trader-unit-price"
                                               placeholder="@lang('lang.unit_price')">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto"
                                           for="delivery_fee">@lang('lang.delivery_fee') (KHR)</label>
                                    <div class="col-md-8">
                                        <input class="form-control"
                                               value=""
                                               type="text" name="delivery_fee"
                                               id="trader-delivery-fee"
                                               placeholder="@lang('lang.delivery_fee')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="text-capitalize btn btn-secondary"
                                data-dismiss="modal">@lang('lang.close')</button>
                        <button type="submit" class="text-capitalize btn-save btn btn-success">@lang('lang.save')</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- transfer form -->
    <form id="form-transfer-purchase" action="{{ route('farmer_purchase.transfer_item') }}" method="post">
        @csrf
        @method("PUT")
        <input type="hidden" name="old_purchase_id" value="{{$data->id}}">

        <div id="modal-transfer-purchase"
             class="modal fade in"
             tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content text-capitalize">
                    <div class="modal-header">
                        <h5 class="modal-title">{{"Transfer To"}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row clearfix">
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto">@lang('lang.supplier')</label>
                                    <div class="col-md-8">
                                        <select class="form-control select-supplier">
                                            <option>select supplier</option>
                                            @foreach($company as $k => $v)
                                                <option value="{{$v->id}}">{{$v->property->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto">@lang('lang.product')</label>
                                    <div class="col-md-8">
                                        <select class="form-control select-product">
                                            <option>select product</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto">@lang('lang.qty')</label>
                                    <div class="col-md-8">
                                        <input type="number" value="1" class="form-control"
                                               id="transfer-quantity"
                                               name="quantity"
                                               placeholder="@lang('lang.qty')">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto"
                                           for="unit_price">@lang('lang.unit_price') (KHR)</label>
                                    <div class="col-md-8">
                                        <input class="form-control"
                                               value="0"
                                               type="text" name="unit_price"
                                               id="transfer-unit-price"
                                               placeholder="@lang('lang.unit_price')">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-4 control-label my-auto"
                                           for="delivery_fee">@lang('lang.delivery_fee') (KHR)</label>
                                    <div class="col-md-8">
                                        <input class="form-control"
                                               value="0"
                                               type="text" name="delivery_fee"
                                               id="transfer-delivery-fee"
                                               placeholder="@lang('lang.delivery_fee')">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 text-right">
                                <button type="button" class="text-capitalize btn-insert btn btn-info">{{"Insert"}}</button>
                            </div>
                            <div class="col-md-12">
                                <table class="table table-custom table-product">
                                    <thead>
                                        <tr>
                                            <th>Product</th>
                                            <th class="text-right">QTY</th>
                                            <th class="text-right">Unit Price</th>
                                            <th class="text-right">Total</th>
                                            <th class="text-right">Delivery Fee</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-md-2 control-label my-auto">@lang('lang.note')</label>
                                    <div class="col-md-10">
                                        <textarea class="form-control transfer-note" name="note" required="required"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="text-capitalize btn btn-secondary"
                                data-dismiss="modal">@lang('lang.close')</button>
                        <button type="button" class="text-capitalize btn btn-warning btn-submit-transfer">{{"Transfer"}}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

@stop

@stop
@section('script')
<script>
$(function(){

    $('.table-product').on('click', '.btn-remove-item', function(e){
        e.preventDefault();
        var me = $(this),
            row = me.closest('tr');
        row.remove();
    });

    // btn insert
    $('.btn-insert').on('click', function(e){
        e.preventDefault();
        var supplier_id = $( ".select-supplier option:selected" ).val(), 
            product_id = $( ".select-product option:selected" ).val(),
            product_name = $( ".select-product option:selected" ).text(),
            qty = $('#transfer-quantity').val(),
            price = $('#transfer-unit-price').val(),
            total = qty * price,
            delivery_fee = $('#transfer-delivery-fee').val();

        if ($('.table-product tr > td:contains(' + product_name + ')').length > 0) {
            //
        }else {
            var hidden_input =  "<input type='hidden' name='arr_supplier_id[]' value='" + supplier_id + "'>" + 
                                "<input type='hidden' name='arr_id[]' value='" + product_id + "'>" + 
                                "<input type='hidden' name='arr_name[]' value='" + product_name + "'>" + 
                                "<input type='hidden' name='arr_qty[]' value='" + qty + "'>" + 
                                "<input type='hidden' name='arr_unit_price[]' value='" + price + "'>" + 
                                "<input type='hidden' name='arr_delivery_fee[]' value='" + delivery_fee + "'>";
            var str_row =   "<tr>" + 
                                hidden_input +
                                "<td>" + product_name + "</td>" + 
                                "<td class='text-right'>" + qty + "</td>" + 
                                "<td class='text-right'>" + price + "</td>" + 
                                "<td class='text-right'>" + total + "</td>" + 
                                "<td class='text-right'>" + delivery_fee + "</td>" +
                                "<td><a href='#' class='text-danger btn-remove-item'><i class='icon-trash'></i></a></td>" +
                            "</tr>";
            var tbody = $('.table-product tbody');
            if (price > 0) {
                tbody.append(str_row);
            }
        }
    });

    // update purchase qty & price
    $('.btn-transfer').on('click', function(e){
        e.preventDefault();
        var me = $(this),
            form = $('#form-transfer-purchase');
        $("#modal-transfer-purchase").modal("show");
    });

    // btn-submit-transfer
    $('.btn-submit-transfer').on('click', function(e){
        e.preventDefault();
        var me = $(this),
            form = $('#form-transfer-purchase'),
            table = form.find('.table-product'),
            row_count = $(".table-product > tbody > tr").length,
            note = $('.transfer-note').val();
        // check if has row
        if (row_count > 0) {
            if (note == '') {
                alert('Note cannot be empty!');
            }else {
                form.submit();
            }
        }else {
            alert('Please insert product!');
        }
    });


    $('.select-supplier').change(function(e){
        e.preventDefault();
        var me = $(this),
            supplier_id = me.val();
        getProduct(supplier_id, function (data) {
            return "";
        });

    });

    $('.select-product').change(function(e){
        e.preventDefault();
        var me = $(this),
            product_id = me.val();
        getProductItem(product_id);
    });

    // update purchase qty & price
    $('.btn-edit-purchase').on('click', function(e){
        e.preventDefault();
        var me = $(this),
            form = $('#form-update-purchase'),
            purchase_id = me.attr('data-purchase-id'),
            product_id = me.attr('data-product-id'),
            product_name = me.attr('data-product-name'),
            quantity = me.attr('data-qty'),
            unit_price = me.attr('data-unit-price'),
            delivery_fee = me.attr('data-delivery-fee');
        form.find('h5.modal-title').text(product_name);
        form.find('#purchase_id').val(purchase_id);
        form.find('#product_id').val(product_id);
        form.find('#quantity').val(quantity);
        form.find('#unit_price').val(unit_price);
        form.find('#delivery_fee').val(delivery_fee);
        $("#modal-update-purchase").modal("show");
    });

    // update trader purchase qty & price
    $('.btn-edit-purchase-trader').on('click', function(e){
        e.preventDefault();
        var me = $(this),
            form = $('#form-update-purchase-trader'),
            purchase_id = me.attr('data-purchase-id'),
            quantity = me.attr('data-qty'),
            unit_price = me.attr('data-unit-price'),
            delivery_fee = me.attr('data-delivery-fee');
        form.find('#trader-purchase-id').val(purchase_id);
        form.find('#trader-quantity').val(quantity);
        form.find('#trader-unit-price').val(unit_price);
        form.find('#trader-delivery-fee').val(delivery_fee);
        $("#modal-update-purchase-trader").modal("show");
    });

    // update status
    $(".update-status").on('click', function () {
        const data = $(this).attr('data-value');
        const url = $(this).attr('data-url');
        const sms = $(this).attr('data-sms');
        const propose_amount = $(this).attr('data-propose-amount');
        const delivery_date = $(this).attr('data-delivery-date');
        const propose_date = $(this).attr('data-propose-date');
        const offer_key = $(this).attr('data-offer-id');
        let temp = `<input type="hidden" value="${data}" name="status">`;
        $("#modal-form-update-status").attr('action', url);
        $("#modal-form-update-status .form-content").append(temp);
        $("p.sms").text(sms);
        $("#modal-update-status").modal('show');
    });
    const latitude = "{{$latitude}}";
    const longitude = "{{$longitude}}";
    var myLatLng = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: myLatLng
    });
    marker = new google.maps.Marker({
        map: map,
        position: myLatLng,
        title: ''
    });
    
    // $(".btn-view-map").on('click', function(e){
    //     e.preventDefault();
    //     var me = $(this),
    //         modal = $('div#modal-map');
    //     modal.modal('show');
    // });

    // delivery status
    $(".update-delivery-status").on('click', function () {
        const data = $(this).attr('data-value');
        const url = $(this).attr('data-url');
        const sms = $(this).attr('data-sms');
        let temp = `<input type="hidden" value="${data}" name="status">`;
        $("#form-modal-delivery-status").attr('action', url);
        $("#form-modal-delivery-status .form-content").append(temp);
        $("p.sms").text(sms);
        $("#modal-delivery-status").modal('show');
    });

});

// get product by supplier
function getProduct(id, callback) {
    if (id == '') {
        // 
    }else {
        $.ajax({
            method: "GET",
            url: '{{ route('get.product') }}',
            data: {id: id},
            success: (data) => {
                let temp = ``;
                $.each(data, function (i, data) {
                    var property = data.property;
                    temp += `<option ${callback(data)} value="${data.id}">${property.name}</option>`;
                });
                const option = $("select.select-product");
                option.children().not(':first').remove();
                option.append(temp);
                option.selectpicker('refresh');
            }, error: function (error) {
                console.log(error);
            }
        });
    }   
}

function getProductItem(id) {
    $('#transfer-unit-price').val(0);
    if (id == '') {
        // 
    }else {
        $.ajax({
            method: "GET",
            url: '{{ route('get.product.item') }}',
            data: {id: id},
            success: (data) => {
                $.each(data, function (i, data) {
                    var property = data.property;
                    var form = $('#form-transfer-purchase');
                    form.find('#transfer-unit-price').val(property.unit_price);
                });
            }, error: function (error) {
                console.log(error);
            }
        });
    }   
}

</script>
@stop