@extends('layouts/contentLayoutMaster')

@section('title', 'Sent To Branch')

@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-toastr.css')) }}">
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            @if(Auth::user()->role == "SUPER_ADMIN" || Auth::user()->role == "ADMIN" || Auth::user()->role == "STOCK_MANAGER")
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#row_to_created" >Sent To Branch</button>
            @endif
        </div>
        <div class="card-body">
            
        </div>
    </div>
    <div class="modal fade text-start" id="row_to_created" 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">Sent To Branch</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label>Number of Rows </label>
                    <input type="number" id="no_of_rows" class="form-control mb-2" placeholder="Row Number">
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" onclick="js:sentToBranchForm()">Next</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade text-start" id="sent_to_branch" 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">Sent To Branch</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                   <div class="tag_generation"></div> 
                   <div class="sent_to_branch_form"></div>
                   <div class="sent_to_branch_form_detail"></div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary branchform" onclick="js:sentToBranchDetailsForm()">Next</button>
                  
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade text-start" id="sent_to_branch_details" 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">Sent To Branch</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="detailForm">
                        <div class="packet"></div>
                       <button type="button" class="btn btn-primary" onclick="js:createJewelleryPacketForm('<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/gold_management/masters/sent_to_branch_khbk.blade.php</b> on line <b>69</b><br />
')">Submit</button>
                    </form>
                </div>
                <div class="modal-footer">
                  <!--<button type="button" class="btn btn-primary" onclick="js:createSentToBranchDetailsForm()">Submit</button>-->
                </div>
            </div>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset(mix('js/scripts/custom/common.js')) }}"></script>
    <script>
    $(document).ready(function(){
       jewelleryCategoryList();
       jewellerySubCategoryList();
       var row = $('#no_of_rows').val();
       //jewelleryCategoryById(2, '<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/gold_management/masters/sent_to_branch_khbk.blade.php</b> on line <b>91</b><br />
', 0);
       //jewellerySubCategoryById(2, '<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/gold_management/masters/sent_to_branch_khbk.blade.php</b> on line <b>92</b><br />
', 0);
       //var promise = getTag('<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/gold_management/masters/sent_to_branch_khbk.blade.php</b> on line <b>93</b><br />
', 1,1,1, 0);
       //console.log(promise);
       //promise.success(data => alert(data));
     
    });
        $(document).on('change','.jewellery_category', function(){
           console.log('category chnaged'); 
           var categoryId = $(this).val();
           var id = $(this).attr('id');
           index = id.split('_');
           console.log('id '+id);
           console.log('categoryId ' +categoryId);
           console.log('index '+index[1]);
           categoryWiseSubcategoryList(categoryId,index[1]);
        });
        
        $(document).on('change','.jewellery_subcategory', function(){
           console.log('sub category chnaged'); 
           var categoryId = $(this).val();
           var id = $(this).attr('id');
           index = id.split('_');
           console.log('subcategoryid '+id);
           console.log('subcategoryId ' +categoryId);
           console.log('index '+index[1]);
          // categoryWiseSubcategoryList(categoryId,index[1]);
        });
        
        function sentToBranchForm(){
            branchList();
            jewelleryCategoryList();
            jewellerySubCategoryList();
            $('#row_to_created').modal('hide');
            $('#sent_to_branch').modal('show');
            let row = $('#no_of_rows').val();
            if(row == ''){
                alert("Row number can not be empty.");
                return false;
            }
            
            for(let i=0; i < row; i++){
                $('#sent_to_branch .modal-body .sent_to_branch_form').append(`
                    <div class="row">
                        <div class="col-md-2">
                            <label>Select Branch</label>
                            <select class="form-control mb-2 branch-dropdown" id="branch-dropdown_${i}">
                                <option value="">Select Branch</option>
                            </select>
                        </div>
                        <div class="col-md-1"> <label>Item Name </label> <input type="text" id="item-name_${i}" value="" class="form-control"></div>
                        <div class="col-md-1"> <label>Weight </label> <input type="number" id="total-weight_${i}" value="" class="form-control"></div>
                        <div class="col-md-2">
                            <label>Select Category</label>
                            <select class="form-control mb-2 jewellery_category" id="jewellery-category_${i}">
                                
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label>Select Sub Category</label>
                            <select class="form-control mb-2 jewellery_subcategory" id="jewellery-subcategory_${i}">
                                
                            </select>
                        </div>
                        
                        
                        <div class="col-md-2"> <label>Carat </label> <input type="number" class="form-control" id="carat_${i}" placeholder="Carat"> </div>
                        <div class="col-md-2"> <label>Total Quantity </label> <input type="number" class="form-control" id="total-quantity_${i}" placeholder="Total Quantity"> </div>
                        
                    </div>
                    <hr>
                `);
            }
            
        }
        function sentToBranchDetailsForm(){
            //console.log('reached in sentToBranchDetailsForm');
            $('#sent_to_branch').modal('hide');
            $('#sent_to_branch_details').modal('show');
            //$('#sent_to_branch').modal('show');
            //$('#sent_to_branch_details').modal('hide');
            //sent_to_branch_form
            //sent_to_branch_form_detail
            let row = $('#no_of_rows').val();
            $('#sent_to_branch_details .modal-body #detailForm .packet').append('<input type="hidden" value="'+row+'" name="row">');
            //jewelleryCategoryList();
            //jewellerySubCategoryList();
            //console.log('rows '+row);
            //$('#sent_to_branch_form').css('display','none');
           // $('#sent_to_branch_form_detail').css('display','block');
            for(let i=0; i < row; i++){
                console.log('i = '+i);
                var branch = $('#branch-dropdown_'+i).val();
                var item = $('#item-name_'+i).val();
                var weight = $('#total-weight_'+i).val();
                var category = $('#jewellery-category_'+i).val();
                var subcategory = $('#jewellery-subcategory_'+i).val();
                var carat = $('#carat_'+i).val();
                var quantity = $('#total-quantity_'+i).val();
                $('#sent_to_branch_details .modal-body #detailForm .packet').append(`<input type="hidden" value="${branch}" name="packets[${i}][branch_id]">
                <input type="hidden" value="${item}" name="packets[${i}][item]">
                <input type="hidden" value="${weight}" name="packets[${i}][weight]">
                <input type="hidden" value="${category}" name="packets[${i}][category_id]">
                <input type="hidden" value="${subcategory}" name="packets[${i}][subcategory_id]">
                <input type="hidden" value="${carat}" name="packets[${i}][carat]">
                <input type="hidden" value="${quantity}" name="packets[${i}][quantity]">`
                );
                console.log('branch = '+branch);
                console.log('item = '+item);
                console.log('weight = '+weight);
                console.log('category = '+category);
                console.log('subcategory = '+subcategory);
                console.log('carat = '+carat);
                console.log('quantity = '+quantity);
                //console.log('category text '+$('#jewellery-category_'+i).text());
                //console.log('subcategory text '+$('#jewellery-subcategory_'+i).text());
                //console.log('tag = '+tag)
                var tag = getTag('<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/gold_management/masters/sent_to_branch_khbk.blade.php</b> on line <b>208</b><br />
', branch,category, subcategory, i);
                jewelleryCategoryById(category, '<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/gold_management/masters/sent_to_branch_khbk.blade.php</b> on line <b>209</b><br />
', i);
                jewellerySubCategoryById(subcategory, '<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/gold_management/masters/sent_to_branch_khbk.blade.php</b> on line <b>210</b><br />
', i);
                //console.log('tag = '+tag)
                for(let j=0; j < quantity; j++){
                    
                    
                    //console.log(tag);
                    $('#sent_to_branch_details .modal-body #detailForm .packet').append(`
                        <div class="row" id="${i}_${j}">
                            <div class="col-md-1"> <label>Tag </label> <input type="text" id="tag_${i}_${j}"  class="form-control" readonly name="packet_details[${i}][${j}][tag]"></div>
                            <div class="col-md-1"> <label>Item </label> <input type="text" id="item_${i}_${j}"  class="form-control" readonly name="packet_details[${i}][${j}][item]"></div>
                            <div class="col-md-1"> <label>Weight </label> <input type="number" id="total-weight_${i}_${j}"  class="form-control" name="packet_details[${i}][${j}][weight]"></div>
                            <div class="col-md-2"><input type="hidden" id="category_id_${i}_${j}"  class="form-control" name="packet_details[${i}][${j}][category_id]" value="`+category+`"><input type="hidden" id="subcategory_id_${i}_${j}"  class="form-control" name="packet_details[${i}][${j}][subcategory_id]" value="`+subcategory+`">
                                <label>Category</label>
                                <select class="form-control mb-2 jewellery_category_${i}" id="jewellery-category_${i}_${j}" disabled name="packet_details[${i}][${j}][category_id]">
                                    
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label>Subcategory</label>
                                <select class="form-control mb-2 jewellery_subcategory_${i}" id="jewellery-subcategory_${i}_${j}" disabled name="packet_details[${i}][${j}][subcategory_id]">
                                  
                                </select>
                            </div>
                            
                            
                            <div class="col-md-2"> <label>Carat </label> <input type="number" class="form-control" id="carat_${i}_${j}"   readonly name="packet_details[${i}][${j}][carat]"> </div>
                            <div class="col-md-2"> <label>Remark </label> <input type="text" class="form-control" id="remark_${i}_${j}"  placeholder="Remark" name="packet_details[${i}][${j}][remark]"> </div>
                            
                        </div>
                    <hr>
                    `);
                    //console.log('tag ='+tag);
                    //alert($('#tag_'+i).val());#sent_to_branch .tag_generation
                    var tagValue = $('#sent_to_branch .tag_generation #tag_'+i).val();
                    console.log('tagValue = '+$('#tagVal_'+i).val());
                    //console.log($('#jewellery-category_0_0').val());
                    $('#tag_'+i+'_'+j).val(tagValue+'-'+j);
                    $('#item_'+i+'_'+j).val(item);
                    $('#carat_'+i+'_'+j).val(carat);
                   
                }
            }
        }
        
        function branchList(){
            $.ajax({
                url: "/api/branch/list",
                type: "Get",
                dataType: "json",
                success: function (response) {
                    //console.log('reached in branch response');
                    for (var i = 0; i < response.length; i++) {
                        $(".branch-dropdown").append(`
                        <option value="${response[i].id}">${response[i].branch_code}, ${response[i].city}</option>
                    `);
                    }
                },
            });
        }
        
        function jewelleryCategoryList(){
            //jewellery category
            $.ajax({
                url: "/api/jewellery/categories",
                type: "Get",
                dataType: "json",
                
                success: function (response) {
                    for (var i = 0; i < response.length; i++) {
                        $(".jewellery_category").append(`<option value="${response[i].id}">${response[i].category+' - '+response[i].short_code}</option>`);
                    }
                    
                },
            });
        }
        
        function categoryWiseSubcategoryList(id, index){
            //jewellery category
            console.log('index = '+index+'parent id '+id);
            $.ajax({
                url: "/api/jewellery/subcategories",
                type: "Get",
                dataType: "json",
                data:{
                  parent_id:  id
                },
                success: function (response) {
                        console.log('reached in category wise subcategory response');
                        $("#jewellery-subcategory_"+index).empty();
                    for (var i = 0; i < response.length; i++) {
                       $("#jewellery-subcategory_"+index).append(`<option value="${response[i].id}">${response[i].text}</option>`);
                    }
                    
                },
            });
        }
        function jewellerySubCategoryList(){
            //jewellery category
            //console.log('all sub categories');
            $.ajax({
                url: "/api/jewellery/allsubcategories",
                type: "Get",
                dataType: "json",
                
                success: function (response) {
                       // console.log('reached in all subcategory response');
                      // $(".jewellery_subcategory").empty();
                    for (var i = 0; i < response.length; i++) {
                       $(".jewellery_subcategory").append(`<option value="${response[i].id}">${response[i].subcategory+' - '+response[i].short_code}</option>`);
                    }
                    
                },
            });
        }
        
        
        
        function getTag(token, branch,category, subcategory, i){
            try{
            $.ajax({
                url: "/api/gold-management/jewellery/generateToken",
                type: "Get",
                dataType: "json",
                headers: {
                    'Authorization': 'Bearer '+token 
                },
                
                data:{
                  'branch':branch,
                  'category':category,
                  'subcategory':subcategory,
                  'i':i
                  //,'j':j  
                },
                async: false,
                cache: false,
                timeout: 30000,
                success: function (response) {
                    //$('#sent_to_branch_details #tag_'+j).val(response);
                    //$('#sent_to_branch tag_'+i).val()
                    $('#sent_to_branch .tag_generation').append('<input type="text" id="tag_'+i+'" value="'+response+'">');
                    $('#sent_to_branch_details .modal-body').append('<input type="hidden" id="tagVal_'+i+'" value="'+response+'">');
                    console.log('reached in  token = '+response);
                    return response;
                    
                },
                fail: function(){
                    return true;
                },
                done: function(response){ 
                    /*if (parseFloat(msg)){
                        return false;
                    } else {
                        return true;
                    }*/
                    return response;
                }
            });
            }catch(e){
                console.log('Error:', e);
            }
        }
        
        function jewelleryCategoryById(id, token, index){
            //jewellery category
            $.ajax({
                url: "/api/gold-management/jewellery/categoryById",
                type: "Get",
                dataType: "json",
                headers: {
                    'Authorization': 'Bearer '+token 
                },
                data:{'id':id},
                success: function (response) {
                    $(".jewellery_category_"+index).append(`<option value="${response.id}">${response.text}</option>`);
                    /*for (var i = 0; i < response.length; i++) {
                        $(".jewellery_category_"+index).append(`<option value="${response[i].id}">${response[i].text}</option>`);
                    }*/
                    
                },
            });
        }
        
        function jewellerySubCategoryById(id, token, index){
            $.ajax({
                url: "/api/gold-management/jewellery/subcategoryById",
                type: "Get",
                dataType: "json",
                headers: {
                    'Authorization': 'Bearer '+token 
                },
                data:{'id':id},
                success: function (response) {
                    $(".jewellery_subcategory_"+index).append(`<option value="${response.id}">${response.text}</option>`);
                    
                },
            });
        }
        
        function createJewelleryPacketForm(token){
            //console.log('recahed in createJewelleryPacketForm');
            var form = $('form')[0];
            var formData = new FormData(form);
            //console.log($('form').serialize());
            $.ajax({
                    url: "/api/gold-management/jewellery/createJewelleryPackets",
                    type: "post",
                    dataType: "json",
                    headers: {
                        Authorization: "Bearer " + token,
                    },
                    data: $('form').serialize(),
                    success: function (response) {
                        //alert(response);
                        //alert("Form Submited Successfully");
                        $("#sent_to_branch_details").modal('hide');
                        setTimeout(function () {
                            toastr["success"](
                                "",
                                "Saved",
                                {
                                    closeButton: false,
                                    tapToDismiss: false,
                                    rtl: "rtl",
                                }
                            );
                        }, 2000);
                        location.reload();
                    },
                    /*success: function(data) {
                      
                        // Ajax call completed successfully
                        alert("Form Submited Successfully");
                    },
                    error: function(data) {
                          
                        // Some error in ajax call
                        alert("some Error"+data);
                    }*/
                });
        }
    </script>
@endsection