{% extends 'adminBase.html.twig' %}

{% block content %}
                <!-- Container Fluid-->
                <div class="container-fluid" id="container-wrapper">
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Horizontal Form -->
                            <div class="card mb-4">
                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h4 class="m-0 font-weight-bold ">Purchase Order Detail</h4>
                                    <div class="btn-groupss">
                                        {% if pr_info[0]['fld13'] == '1' %}
                                            <span class="badge badge-primary">{{ pr_info[0]['description'] }}</span>
                                        {% elseif pr_info[0]['fld13'] == '2' %}
                                            <span class="badge badge-success">{{ pr_info[0]['description'] }}</span>
                                        {% elseif pr_info[0]['fld13'] == '3' %}
                                            <span class="badge badge-warning">{{ pr_info[0]['description'] }}</span>
                                        {% elseif pr_info[0]['fld13'] == '4' %}
                                            <span class="badge badge-danger">{{ pr_info[0]['description'] }}</span>
                                        {% elseif pr_info[0]['fld13'] == '5' %}
                                            <span class="badge badge-secondary">{{ pr_info[0]['description']}}</span>
                                        {% elseif pr_info[0]['fld13'] == '6' %}
                                            <span class="badge badge-info">{{ pr_info[0]['description'] }}</span>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="card-body">
                                    <form>
                                        <div class="form-group row">
                                            <div class="col-sm-5">
                                                <div class="form-group row">
                                                    <label  class="col-sm-5 col-form-label font-weight-bold">PR Code :</label>
                                                    <label  class="col-sm-7 col-form-label">{{ pr_info[0]['fld1'] }}</label>
                                                </div>
                                                <div class="form-group row">
                                                    <label  class="col-sm-5 col-form-label font-weight-bold">Date Created :</label>
                                                    <label  class="col-sm-7 col-form-label">{{pr_info[0]['fld2']}}</label>
                                                </div>
                                                <div class="form-group row">
                                                    <label  class="col-sm-5 col-form-label font-weight-bold">Date Needed :</label>
                                                    <label  class="col-sm-7 col-form-label">{{pr_info[0]['fld3']}}</label>
                                                </div>
                                            </div>
                                            <div class="col-sm-7">
                                                <div class="form-group row">
                                                    <label  class="col-sm-4 col-form-label font-weight-bold">Department :</label>
                                                    <label  class="col-sm-7 col-form-label">{{pr_info[0]['fld4']}}</label>
                                                </div>
                                                <div class="form-group row">
                                                    <label  class="col-sm-4 col-form-label font-weight-bold">Purchasing Location :</label>
                                                    <label  class="col-sm-7 col-form-label">{{pr_info[0]['fld6']}}</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-sm-5">
                                                <div class="form-group row">
                                                    <label  class="col-sm-5 col-form-label font-weight-bold">Expense Type :</label>
                                                    <label  class="col-sm-7 col-form-label">{{pr_info[0]['fld8']}}</label>
                                                </div>
                                                <div class="form-group row">
                                                    <label  class="col-sm-5 col-form-label font-weight-bold">Nature of Request :</label>
                                                    <label  class="col-sm-7 col-form-label">{{pr_info[0]['fld11']}}</label>
                                                </div>
                                            </div>

                                            <div class="col-sm-7">
                                                <div class="form-group row">
                                                    <label  class="col-sm-4 col-form-label font-weight-bold">PPE Purpose :</label>
                                                    <label  class="col-sm-7 col-form-label">{{pr_info[0]['fld9']}}</label>
                                                </div>
                                                <div class="form-group row">
                                                    <label  class="col-sm-4 col-form-label font-weight-bold">Project Description :</label>
                                                    <label  class="col-sm-7 col-form-label">{{pr_info[0]['fld10']}}</label>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="form-group row">
                                            <div class="col-sm-6">
                                                <label for="exampleFormControlTextarea1">Request Notes</label>
                                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                            </div>
                                            <div class="col-sm-6 float-left float-right">
                                                 <label for="exampleFormControlTextarea1">Returned Notes</label>
                                                 <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-12 mb-4">
                                                <!-- Simple Tables -->
                                                <div class="card">
                                                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                                        <h4 class="m-0 font-weight-bold ">List of Items</h4>
                                                        <button id="savebtn" type="button" class="btn btn-primary mb-1 float-right">Save</button>

                                                    </div>
                                                    <div class="table-responsive">
                                                        <table class="table align-items-center table-flush" id = "items_table">
                                                            <thead class="thead-light">
                                                            <tr>
                                                                <th>Item Code</th>
                                                                <th>Description</th>
                                                                <th>QTY</th>
                                                                <th>Estimated Cost</th>
                                                                <th>Total Cost</th>
                                                                <th>Status</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            {% for data in items %}
                                                                <tr>
                                                                    <td>{{ data.fld2 }}</td>
                                                                    <td>{{ data.fld3 }}</td>
                                                                    <td>{{ data.fld7 }}</td>
                                                                    <td>{{ data.fld8}}</td>
                                                                    <td>{{ data.fld9 }}</td>
                                                                    <td>
                                                                        {% if pr_info[0]['fld13'] == '1' %}
                                                                            {% if data.fld11 == '1' %}
                                                                                <select class="form-control" name={{ data.fld2 }}  >
                                                                                    <option disabled="disabled">Active</option>
                                                                                    <option selected="true" value="1">Check</option>a
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% else %}
                                                                                <select class="form-control" name={{ data.fld2 }}  >
                                                                                    <option selected="true" disabled="disabled">Active</option>
                                                                                    <option value="1">Check</option>a
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% endif %}
                                                                        {% elseif pr_info[0]['fld13'] == '2' %}
                                                                            {% if data.fld12 == '1' %}
                                                                                <select class="form-control" name={{ data.fld2 }}>
                                                                                    <option disabled="disabled">Checked</option>
                                                                                    <option selected="true"value="1">Verify</option>
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% else %}
                                                                                <select class="form-control" name={{ data.fld2 }}>
                                                                                    <option selected="true" disabled="disabled">Checked</option>
                                                                                    <option value="1">Verify</option>
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% endif %}
                                                                        {% elseif pr_info[0]['fld13'] == '3' %}
                                                                            {% if data.fld13 == '1' %}
                                                                                <select class="form-control" name={{ data.fld2 }}>
                                                                                    <option disabled="disabled">Verified</option>
                                                                                    <option selected="true" value="1">Recommend</option>
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% else %}
                                                                                <select class="form-control" name={{ data.fld2 }}>
                                                                                    <option selected="true" disabled="disabled">Verified</option>
                                                                                    <option value="1">Recommend</option>
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% endif %}
                                                                        {% elseif pr_info[0]['fld13'] == '4' %}
                                                                            {% if data.fld14 == '1' %}
                                                                                <select class="form-control" name={{ data.fld2 }}>
                                                                                    <option disabled="disabled">Recommended</option>
                                                                                    <option selected="true" value="1">Review</option>
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% else %}
                                                                                <select class="form-control" name={{ data.fld2 }}>
                                                                                    <option selected="true" disabled="disabled">Recommended</option>
                                                                                    <option value="1">Review</option>
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% endif %}
                                                                        {% elseif pr_info[0]['fld13'] == '5' %}
                                                                            {% if data.fld15 == '1' %}
                                                                                <select class="form-control" name={{ data.fld2 }}>
                                                                                    <option disabled="disabled">Reviewed</option>
                                                                                    <option selected="true"  value="1">Approve</option>
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% else %}
                                                                                <select class="form-control" name={{ data.fld2 }}>
                                                                                    <option selected="true" disabled="disabled">Reviewed</option>
                                                                                    <option value="1">Approve</option>
                                                                                    <option value="0">Disapprove</option>
                                                                                </select>
                                                                            {% endif %}

                                                                        {% endif %}
                                                                    </td>
                                                                </tr>
                                                            {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-sm-12">
                                                <label for="exampleFormControlTextarea1">Notes (Optional)</label>
                                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                            </div>
                                        </div>
                                        {% if pr_info[0]['fld13'] == '1' %}
                                            <button id = "submitbtn" type="button" class="btn btn-success" aria-haspopup="true" aria-expanded="false">
                                                Check
                                            </button>
                                        {% elseif pr_info[0]['fld13'] == '2' %}
                                            <button id = "submitbtn" type="button" class="btn btn-success" aria-haspopup="true" aria-expanded="false">
                                                Verify
                                            </button>
                                        {% elseif pr_info[0]['fld13'] == '3' %}
                                            <button id = "submitbtn" type="button" class="btn btn-success" aria-haspopup="true" aria-expanded="false">
                                                Recommend
                                            </button>
                                        {% elseif pr_info[0]['fld13'] == '4' %}
                                            <button id = "submitbtn" type="button" class="btn btn-success" aria-haspopup="true" aria-expanded="false">
                                                Review
                                            </button>
                                        {% elseif pr_info[0]['fld13'] == '5' %}
                                            <button id = "submitbtn" type="button" class="btn btn-success" aria-haspopup="true" aria-expanded="false">
                                                Approve
                                            </button>
                                        {% endif %}

                                    </form>
                                </div>
                            </div>
                        </div>
                    <!--Row-->
                </div>
                <!---Container Fluid-->
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" >
        $(document).ready(function() {
            console.log( "ready!" );
            var table = $('#items_table').DataTable({
                columnDefs: [{
                    orderable: false,
                    targets: [0]
                }]
            });

            $('#savebtn').click( function() {
                var ItemData = table.$('input,select').serializeArray();
                var form_data  = table.rows().data();
                if(ItemData === false){
                    alert("No changes made")
                }else{
                    var itemsJSON = JSON.stringify(ItemData);
                    update_data(ItemData);
                }
            } );

            $('#submitbtn').click( function() {
                    update_header();
            } );

        } );


        function update_header()
        {
            var url = '{{ path("update") }}';
            var current_status = "{{ pr_info[0]['fld13'] }}";
            var update_status = parseInt(current_status) + 1 ;
            var prID = "{{ pr_info[0]['fld1'] }}";
            console.log(update_status);

            $.ajax({
                enctype: 'multipart/form-data',
                url: url,
                type: "POST",
                dataType: "json",
                data:{update_status:update_status, current_status:current_status, prID:prID},
                success:function(data)
                {
                    var url = '{{ path("p-req") }}';
                    window.location.href = url;

                    // $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
                    // $('#user_data').DataTable().destroy();
                    // fetch_data();
                },
                error: function (errormessage) {
                    console.log(errormessage.responseText);
                }
            });
            setInterval(function(){
                $('#alert_message').html('');
            }, 5000);
        }


        function update_data(ItemData)
        {
            var itemsJSON = JSON.stringify(ItemData);
            var url = '{{ path("item-update") }}';
            var current_status = "{{ pr_info[0]['fld13'] }}";

            $.ajax({
                enctype: 'multipart/form-data',
                url: url,
                type: "POST",
                dataType: "json",
                data:{id:itemsJSON, current_status:current_status},
                success:function(data)
                {
                    alert("Successfully Updated");
                    // $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
                    // $('#user_data').DataTable().destroy();
                    // fetch_data();
                },
                error: function (errormessage) {
                    console.log(errormessage.responseText);
                }
            });
            setInterval(function(){
                $('#alert_message').html('');
            }, 5000);
        }

    </script>
{% endblock %}