@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="pt-3 px-3">
                    <div class="row justify-content-center">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="job_id">Select Job Number</label>
                                <select id="job_id" name="job_id" class="form-control">
                                    <option selected disabled="">Select Job</option>
                                    @foreach ($jobs as $item)
                                        <option value="{{$item->id}}">{{$item->job_no}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<form class="form" id="updateGDNoForm">
<div class="row d-none" id="delivery_data">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="pt-3 px-3">
                    <form class="form">
                        <div class="form-body">
                            <h4 class="form-section">
                                <i class="icon-user"></i> Job Details</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Consignee Name</label>
                                        <h4 class="consignee_name">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Client Name</label>
                                        <h4 class="client_name">...</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Description</label>
                                        <h4 class="descripton">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Port of Delivery</label>
                                        <h4 class="port">...</h4>
                                    </div>
                                </div>
                            </div>

                            <h4 class="form-section">
                                <i class="icon-book-open"></i>Update GD Number</h4>
                                <input type="hidden" name="job_no">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h6>Previously added GD Number</h6>
                                    </div>
                                    <div class="col-md-12 d-none" id="previous_gd"></div>
                                    <input type="hidden" name="role" value="{{auth()->user()->roles[0]->name}}">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="gd_no">GD Number</label>
                                            <input type="text" class="form-control" placeholder="GD Number" name="gd_no">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="exchange_rate">Exchange Rate</label>
                                            <input type="text" class="form-control" placeholder="Exchange Rate" name="exchange_rate">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="insurance_amount">Insurance Amount</label>
                                            <input type="text" class="form-control" placeholder="Insurance Amount" name="insurance_amount">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="import_currency">Import Value</label>
                                            <input type="text" class="form-control" placeholder="Import Currency" name="import_currency">
                                        </div>
                                    </div>
                                </div>
                                <div id="taxes"></div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-success addTax">
                                            <i class="icon-plus"></i> Add Taxes
                                        </button>
                                    </div>
                                </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                            <button type="button" class="btn btn-success" id="saveBtn">
                                <i class="icon-note"></i> Update GD Number
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
@endsection
@section('afterScript')
    <script>
        $(document).ready(function(){
            var  count = 0;
            $('#shipping_id').select2();
            $('#job_id').select2().on('change',function(){
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                var id = $(this).val();
                $.ajax({
                    url: 'getJob/'+id,
                    method:'GET',
                    dataType:'json',
                    success:function(data)
                    {
                        console.log(data);
                        $('#delivery_data').removeClass('d-none');
                        $('.consignee_name').text(data[0].consignee.consignee_name);
                        $('.client_name').text(data[0].client.client_name);
                        $('.descripton').text(data[0].consignment_detail.description);
                        $('.port').text(data['port']!=null && data['port'].port_name);
                        $('[name=job_no]').val(id);
                        var html='';
                        if(data['gd_no']!=null)
                        {
                            html+='<pre style="font-weight:bold">'+data['gd_no'].gd_no+'</pre>';
                            // data['gd_no'].forEach(element => {
                            // });
                            $('#previous_gd').html(html).removeClass('d-none');
                            var role = $('[name=role]').val();
                            $('[name=gd_no]').val(data['gd_no'].gd_no).attr('readonly',role=='admin' ? false : true);
                            $('[name=exchange_rate]').val(data['gd_no'].exchange_rate);
                            $('[name=insurance_amount]').val(data['gd_no'].insurance_amount);
                            $('[name=import_currency]').val(data['gd_no'].import_currency);
                        } else {
                            $('#previous_gd').addClass('d-none');
                            $('[name=gd_no]').val(null);
                            $('[name=exchange_rate]').val(null);
                            $('[name=insurance_amount]').val(null);
                            $('[name=import_currency]').val(null);
                        }

                        if(data['gd_details'].length>0)
                        {
                            var html=''

                            for (let index = 0; index < data['gd_details'].length; index++) {
                                var theRandomNumber = Math.floor(Math.random() * 100) + 1;
                                var html='<div class="row" id="tax_'+theRandomNumber+'">';
                                    html +='<div class="col-md-4">'
                                    html +='<div class="form-group">'
                                    html +='<label for="head_of_tax_id">Head of Tax</label>'
                                    html +='<select name="head_of_tax_id[]" id="head_of_tax_id_'+theRandomNumber+'" class="form-control account_lists account_'+theRandomNumber+' ">'
                                    html +='<option  selected disabled>Select Option</option>'
                                    html +='@foreach ($tax as $acc)'
                                    html +='<option  value="{{$acc->id}}">{{$acc->name}}</option>'
                                    html +='@endforeach'
                                    html +='</select>'
                                    html +='</div>'
                                    html +='</div>'
                                    html +='<div class="col-md-4">'
                                    html +='<div class="form-group">'
                                    html +='<label for="rate">Rate</label>'
                                    html +='<input type="text" placeholder="Rate" id="rate_'+theRandomNumber+'" class="form-control" name="rate[]" value='+data['gd_details'][index].rate+'>'
                                    html +='</div>'
                                    html +='</div>'
                                    html +='<div class="col-md-4">'
                                    html +='<div class="form-group">'
                                    html +='<label for="amount">Amount</label>'
                                    html +='<input type="text" placeholder="Amount" id="amount_'+theRandomNumber+'" class="form-control" name="amount[]" value='+data['gd_details'][index].amount+'>'
                                    html +='</div>'
                                    html +='</div>'
                                    html +='<div class="col-md-6">';
                                    html +='</div>';
                                    html +='<div class="col-md-6 text-left text-md-right">';
                                    html +='<button class="btn btn-danger removeTax" data-id="'+theRandomNumber+'" {{ auth()->user()->is_admin == 1 ? "" : "hidden"}}>Remove</button>'
                                    html +='</div>';
                                    html +='</div>';

                                    $('#taxes').append(html);
                                    $('#head_of_tax_id_'+theRandomNumber).val(data['gd_details'][index].head_of_tax_id);
                            }
                        }

                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            });

            $(document).on('click',"#saveBtn", function(e){
                e.preventDefault();
            
                var form_data = new FormData($("#updateGDNoForm")[0]);
                $.ajaxSetup({
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url : "{{ route('update_gd_no.update') }}",
                    type: "POST",
                    data : form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function (res) {
                        swal("Inserted!", "Data has been Added Successfully!", "success");
                        //  setTimeout(function() { 
                        //     // location.reload();
                        // }, 1000);
                        $('#updateGDNoForm')[0].reset();
                    },
                    error: function(err) {
                        swal('Not Valid',err.responseJSON.message,'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);
                    
                    }
                });
            });

             $(document).on('click','.addTax',function(e){
                e.preventDefault();

                var html='<div class="row" id="tax_'+count+'">';
                    html +='<div class="col-md-4">'
                    html +='<div class="form-group">'
                    html +='<label for="head_of_tax_id">Head of Tax</label>'
                    html +='<select name="head_of_tax_id[]" class="form-control account_lists account_'+count+' ">'
                    html +='<option selected disabled>Select Option</option>'
                    html +='@foreach ($tax as $acc)'
                    html +='<option value="{{$acc->id}}">{{$acc->name}}</option>'
                    html +='@endforeach'
                    html +='</select>'
                    html +='</div>'
                    html +='</div>'
                    html +='<div class="col-md-4">'
                    html +='<div class="form-group">'
                    html +='<label for="rate">Rate</label>'
                    html +='<input type="text" placeholder="Rate" class="form-control" name="rate[]">'
                    html +='</div>'
                    html +='</div>'
                    html +='<div class="col-md-4">'
                    html +='<div class="form-group">'
                    html +='<label for="amount">Amount</label>'
                    html +='<input type="text" placeholder="Amount" class="form-control" name="amount[]">'
                    html +='</div>'
                    html +='</div>'
                    html +='<div class="col-md-6">';
                    html +='</div>';
                    html +='<div class="col-md-6 text-left text-md-right">';
                    html +='<button class="btn btn-danger removeTax" data-id="'+count+'">Remove</button>'
                    html +='</div>';
                    html +='</div>';

                    $('#taxes').append(html);
                    count=count+1;
                });

                $(document).on('click','.removeTax',function(e){
                    e.preventDefault();

                    var data_id =$(this).attr('data-id');
                    $('#tax_'+data_id).remove();
                });
        })
    </script>
@endsection