@extends('layouts/contentLayoutMaster')

@section('title', 'Karigar Orders')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection
@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-sliders.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@endsection

@section('content')
<div class="loader" style="display:none;">
    <center>
       <img class="loading-image" src="{{ asset('images/giphy.gif') }}" alt="loading..">
    </center>
</div>
    <div class="card">
        <div class="card-header">
           
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-1">
                    <select name="per_page" id="per-page" class="form-control" onchange="js:karigerOrderList('<?= $token ?>',1)">
                        <option value="<?= PAGINATE_LIMIT ?>"><?= PAGINATE_LIMIT ?></option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="250">250</option>
                        <option value="500">500</option>
                    </select>
                </div>
                <div class="col-md-3">
                   
                </div>
                <div class="col-md-3">
                    <input type="date" class="form-control" name="from_date" id="from_date">
                </div>
                <div class="col-md-3">
                    <input type="date" class="form-control" name="till_date" id="till_date">
                </div>
                <div class="col-md-1">
                    <button class="btn btn-success btn-block" onclick="karigerOrderList('<?= $token ?>',1)">Search</button>
                </div>
                <div class="col-md-1">
                    <button class="btn btn-warning btn-block">Report</button>
                </div>
            </div>
            <br>
            <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table">
                         <thead>
                            <tr>
                                <th>No.</th>
                                <th>Date</th>
                                <th>Branch</th>
                                <th>Code</th>
                                <th>Customer</th>
                                <th>Assigned By</th>
                                <th>Karigar</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="order-list">
                            
                        </tbody>
                    </table>
                </div>
                
                <br>
                <br>
                <div id="pagination-links"></div>
                
            </div>
            
        </div>
        <div id="totalofrecord"></div>
        </div>
    </div>
    
    <div class="modal fade text-start" id="update_order" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form id="update_karigar_order_status">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel17">Update Status</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <input type="hidden"  id="type" class="form-control mb-2">
                            <input type="hidden" name="order_id" id="order_id" class="form-control mb-2">
                            <div class="col-md-12">Status <select name="status" id="status" class="form-control mb-2 dropdown form-select">
                                
                                <option value="accepted">Accept</option>
                                <option value="in_process">In Process</option>
                                <option value="karigar_completed">Completed</option>
                            </select></div>
                           <div class="col-md-12 payment_remark_wrap" style="display:none;">Payment Remark<sup style="color:red;">*</sup><textarea class="form-control mb-2" placeholder="Payment Remark" name="payment_remark" id="payment_remark"></textarea></div>
                            <div class="col-md-3 charge">Charge<input type="number" name="amt" id="amt" class="form-control mb-2" placeholder="Amount"></div>
                            
                        </div>
                        <br>
                        <div class="orderStatus">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Image</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $counter = 0;?>
                                    <tr id="0">
                                        <td>
                                            <select name="karigar_order_status[0][type]" id="type_0" class="form-control mb-2">
                                                <option value="image">Image</option>
                                                <option value="video">Video</option> 
                                            </select>
                                        </td>
                                        <td><input type="file" class="form-control mb-2" name="karigar_order_status[0][image]" id="image_0"></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="2"><button type="button" id="AddMoreKarigarOrderStatus" class="btn btn-info pull-right AddMoreRow">Add More</button></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="js:updateKarigarOrderStatus('{{ $token }}')" id="update_karigar_order">submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade text-start" id="update_karigar_status" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel17">Updated Karigar Status</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row"><div class="col-md-6">
                            Status: <select id="status" class="form-control mb-2 dropdown" readonly><option value="0">Select</option><option value="in_process">In Process</option><option value="accepted">Accepted</option><option value="karigar_completed">Completed</option></select>
                        </div></div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Sr. No</th>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>File</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="updateList"></tbody>
                        </table>
                        
                    </div>
                    <div class="modal-footer">
                       
                    </div>
                
            </div>
        </div>
    </div>
    <div class="modal fade text-start" id="order-detail" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel17">Order Details</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                <table class="table"><thead><tr><th>Sr. No.</th>
                    <th>Item</th>
                    <th>Wt</th>
                    <th>Purity</th>
                    <th>Size</th>
                    <th>Remark</th><th></th>
                    </tr></thead>
                    <tbody id="orderList"></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade text-start" id="order-image" tabindex="-1" aria-labelledby="myModalLabel23" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel17">Order Image</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                    <table class="table"><thead><tr><th>Sr. No</th><th>Type</th>
                    <th>File</th>
                    <th></th>
                    </tr></thead>
                    <tbody id="orderImage"></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                
                </div>
            </div>
        </div>
    </div>
@endsection

@section('vendor-script')

    <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/custom/common.js')) }}"></script>
   <!--<script src="{{ asset(mix('js/scripts/custom/order.js')) }}"></script>-->
   
    
@endsection
@section('page-script')


<script>

$(document).ready(function() {
    
    $('#status').change(function(){
          var valu = $(this).val();
          if(valu == 'karigar_completed'){
              $('.payment_remark_wrap').css('display','block');
          }else{
              $('.payment_remark_wrap').css('display','none');
          }
      });
      
   var type = '';
    if (window.location.href.indexOf("repair") > -1) {
      //alert("your url contains the name repair");
      type = 'repair';
      karigerOrderList('<?= $token ?>',1,'<?=$role?>','repair');
      
      var option = '<option value="0">Select</option><option value="accepted">Accept</option><option value="in_process">In Process</option>';
      //$('#status').html(option);
      
      
      
    }
    
    if (window.location.href.indexOf("custom") > -1) {
      //alert("your url contains the name custom");
      type = 'custom';
      karigerOrderList('<?= $token ?>',1,'<?=$role?>','custom');
      
       var option = '<option value="0">Select</option><option value="accepted">Accept</option><option value="in_process">In Process</option><option value="karigar_completed">Completed</option>';
      //$('#status').html(option);
    }
    
     $('#update_order .charge').css('display','none');
     console.log('type = '+type);
});

$(document).on('change','#status', function(){
    
    //console.log(this.value);
    var status =  this.value;
    if(status == 'completed'){
        $('#update_order .charge').css('display','block');
    }else{
         $('#update_order .charge').css('display','none');
    }
    
});

function updateKarigarOrderStatus(token){
    //console.log('reached in updateKarigarOrderStatus');
            
            
            if (window.location.href.indexOf("repair") > -1) {
            let pr = $('#payment_remark').val();
            let sel = $('#status').find(":selected").val();
            if(sel == 'karigar_completed'){
                
                if(pr == ''){
                    alert('Please fill payment remark!');
                    return false;
                }
            }
            }
            $('.loader').css('display','block');
            $('.card-body').css('display','none');
            const imagePath = document.getElementById('imagepath');
            
            $('#update_order').modal('hide');
            var formData = new FormData(document.getElementById("update_karigar_order_status"));
            var type = $('#update_order #type').val();
            //console.log('reached in uploadOrderImage with formData '+formData);
            
            $.ajax({
                type:'POST',
                url:  '/api/gold-management/order/updateKarigarOrderStatus',
                dataType: 'json',
                headers: {
                    Authorization: "Bearer " + token,
                },
                data: formData,
                cache:false,
                contentType: false,
                processData: false,
                enctype:'multipart/form-data',
                
                success: function (response) {
                    //$('.loader').hide();
                    $('.loader').css('display','none');
                    $('.card-body').css('display','block');
                    //console.log(response);
                    
                    //console.log(response.status);
                    if(response.status = true){
                            setTimeout(function () {
                                toastr["success"](
                                    "",
                                    response.msg,
                                    {
                                        closeButton: false,
                                        tapToDismiss: false,
                                        rtl: "rtl",
                                    }
                                );
                            }, 2000);
                            //location.reload();
                            //karigerOrderList(token, 1,response.role,type);
                            karigerOrderList(token, 1,response.role, type);
                            
                    }else{
                                console.log('error occured');
                                setTimeout(function () {
                                toastr["error"](
                                    "",
                                    response.msg,
                                    {
                                        closeButton: false,
                                        tapToDismiss: false,
                                        rtl: "rtl",
                                    }
                                );
                            }, 2000);
                    }
                            
                },
                fail: function(response){
                    $('.card-body').css('display','block');
                    $('.loader').css('display','none');
                        //alert('in fail '+response);
                    }
            });
        }
    
function karigarUpdateOrderStatus(token,id,type){
    $('#update_karigar_order_status #order_id').val(id);
    $('#update_order #type').val(type);
}

function getkarigarUpdateStatus(token, id){
    try{
        var order_id = id;
        $.ajax({
            url: "/api/gold-management/order/getKarigarOrderStatus",
            type: "get",
            dataType: 'json',
            headers: {
                'Authorization': 'Bearer '+token
            },
            //data:$('form').serialize(),
            data:{'order_id':id},
            success: function(response){
                console.log(response);
                
                if(response.status == true){
                    console.log(response.data[0].status);
                   var i=0;
                $('#update_karigar_status #status').val(response.data[0].status);
                $('#update_karigar_status #updateList').empty();
                response.data.forEach(response_data =>{
                    i++;
                    console.log(response_data.type);
                    var imageList = `<tr>
                    <td>`+i +`</td>
                    <td>`+response_data.date+`</td>
                    <td>`+response_data.type+`</td>`;
                    if(response_data.type == 'image'){
                        imageList+=`<td><img src="{{ URL::asset('`+response_data.image+`') }}" width="100" height="100"></td>`;
                    }else{
                        
                        imageList+=`<td><video width="320" height="240" controls><source src="{{URL::asset('`+response_data.image+`')}}" type="video/mp4">Your browser does not support the video tag.</video></td>`;

                    }
                    
                    
                    
                    imageList+=`<td></td>
                    </tr>`;
                    imageList+='</tr>';
                            $('#update_karigar_status #updateList').append(imageList);
                        });
                }else{
                    setTimeout(function () {
                        toastr["success"](
                            "",
                            response.msg,
                            {
                                closeButton: false,
                                tapToDismiss: false,
                                rtl: "rtl",
                            }
                        );
                    }, 2000);
                     $('#update_karigar_status #updateList').append(response.msg);
                }
            },
            fail:function(response){
                console.log('in failure');
            }
        });
    }catch(e){
        console.log(e);
    }
}
function orderImage(token, id){
    try{
        var id = id;
        $.ajax({
            url: "/api/gold-management/order/getOrderImage",
            type: "get",
            dataType: 'json',
            headers: {
                'Authorization': 'Bearer '+token
            },
            //data:$('form').serialize(),
            data:{'id':id},
            success: function(response){
                console.log(response);
                //var host = window.location.host;
                //console.log(host);
                //console.log(response.data.id);
                var i=0;
                $('#order-image #orderImage').empty();
                response.forEach(response_data =>{
                    i++;
                    var imageList = `<tr>
                    <td>`+i +`</td>
                    <td>`+response_data.type+`</td>`;
                    if(response_data.type == 'image'){
                        imageList+=`<td><img src="{{ URL::asset('`+response_data.image+`') }}" width="100" height="100"></td>`;
                    }else{
                        
                        imageList+=`<td><video width="320" height="240" controls><source src="{{URL::asset('`+response_data.image+`')}}" type="video/mp4">Your browser does not support the video tag.</video></td>`;

                    }
                    
                    imageList+=`<td></td>
                    </tr>`;
                   
                    
                    $('#order-image #orderImage').append(imageList);
                });
                        
                   
                },
            fail:function(response){
                console.log('in failure');
            }
        });
    }catch(e){
        console.log(e);
    }
}

function karigerOrderList(token, page_no,role='',type='') {
    let category = $("#jewellery_category").val();
    let subcategory = $("#jewellery_subcategory").val();
    let from_date = $("#from_date").val();
    let till_date = $("#till_date").val();
    var per_page = $('#per-page').val();
    //var type = 'custom';
    var type = type;
    $.ajax({
        url: "/api/gold-management/order/getKarigerOrderList",
        type: "get",
        dataType: "json",
        headers: {
            Authorization: "Bearer " + token,
        },
        data: {
            page:page_no,
            per_page:per_page,
            
            category_id:category,
            subcategory_id:subcategory,
            from_transaction_date:from_date,
            till_transaction_date:till_date,
            status:status,
            //type:'custom'
            type:type
        },
        success: function (response) {
            console.log(response);
            $("#pagination-links").empty();
            $('#order-list').empty();
            var i = 0;
        response.data.forEach(response_data => {
            i++;
            var order_list = '<tr id="'+response_data.id+'">'
            +'<td>'+i+'</td>'
            +'<td>'+response_data.order_date+'</td>'
            +'<td>'+response_data.city+'</td>'
            +'<td>'+response_data.order_code+'</td>'
            +'<td>'+response_data.customer+'</td>'
            +'<td>'+response_data.created_person+'</td>'
            +'<td>'+response_data.karigar+'</td>'
            +'<td><button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#order-detail" id="detail_'+response_data.id+'" onclick="js:orderDetail(\''+token+'\','+response_data.id+',\''+role+'\')">Detail </button>'
            +'</td>';
            if(role=='KARIGAR'){
                console.log(response_data.orderImage.length);
                if(response_data.orderImage.length >0){
                   order_list+='<td><button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#order-image" id="image" onclick="js:orderImage(\''+token+'\','+response_data.id+')">View </button></td>'; 
                }
                
                //order_list+='<td><a href="uploadImage/'+response_data.id+'" target="_blank" class="btn btn-primary">Update</a></td>';
                order_list+='<td><button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#update_order" id="update_order_status" onclick="js:karigarUpdateOrderStatus(\''+token+'\','+response_data.id+',\''+response_data.type+'\')">Update </button></td>';
                 order_list+='<td><button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#update_karigar_status" id="update_status" onclick="js:getkarigarUpdateStatus(\''+token+'\','+response_data.id+')">Status </button></td>';
            }
            order_list+='</tr>';
            
            $('#order-list').append(order_list);
            
        });
        //PAGINATION LINKS
        response.links.forEach(element => {
            let url_page_no = 1;
            if (element.url != null) {
                url_page_no = element.url.split('?')[1].split('=')[1];   
            }
            $("#pagination-links").append(`<button onclick="js:karigerOrderList('`+token+`',${url_page_no}, ${per_page},'`+role+`','`+type+`')" class="btn btn-dark">${element.label}</button>
            `);
        });
        $('#totalofrecord').text('Total No. of Records = '+response.total);
    },
    });
}
function orderDetail(token, id,role){
    try{
        var id = id;
        $.ajax({
            url: "/api/gold-management/order/getOrderDetail",
            type: "get",
            dataType: 'json',
            headers: {
                'Authorization': 'Bearer '+token
            },
            //data:$('form').serialize(),
            data:{'id':id},
            success: function(response){
                console.log(response);
                var i=0;
                $('#order-detail #orderList').empty();
                response.orderDetail.forEach(response_data =>{
                    i++;
                    var item = response_data.category+' '+response_data.subcategory+' '+response_data.item;
                    var transactionList = '<tr>'
                    +'<td>'+i +'</td>'
                    +'<td>'+item+'</td>'
                    +'<td>'+response_data.wt+'</td>'
                    +'<td>'+response_data.carat+'</td>';
                    if(role != 'KARIGAR'){
                    transactionList+='<td>'+response_data.rate+'</td>'
                        +'<td>'+response_data.making_charge+'</td>'
                        +'<td>'+response_data.amt+'</td>'
                    }
                    transactionList+='<td>'+response_data.size+'</td><td>'+response_data.remark+'</td>';
                    
                    transactionList+='</tr>';
                            $('#order-detail #orderList').append(transactionList);
                        });
                        
                   
                },
            fail:function(response){
                console.log('in failure');
            }
        });
    }catch(e){
        console.log(e);
    }
}
</script>
    
    
@endsection