<?php
include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php");
echo "<h5 class='invoiceNo' style='display:none;'>" . $_GET['invoiceNo'] . "</h5>";
?>
<style>
    .avatar-upload {
        position: relative;
        max-width: 210px;
        margin-left: 10px;
        margin: -5px auto;
    }

    .avatar-upload .avatar-edit {
        position: absolute;
        right: 12px;
        z-index: 1;
        top: 10px;
    }

    .avatar-upload .avatar-edit input {
        display: none;
    }

    .avatar-upload .avatar-edit input+label {
        display: inline-block;
        width: 34px;
        height: 34px;
        margin-bottom: 0;

        background: #FFFFFF;
        border: 1px solid transparent;
        -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        font-weight: normal;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .avatar-upload .avatar-edit input+label:hover {
        background: #f1f1f1;
        border-color: #d6d6d6;
    }

    .avatar-upload .avatar-edit input+label:after {
        color: #757575;
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        text-align: center;
        margin: auto;
    }

    .avatar-upload .avatar-preview {
        width: 200px;
        height: 210px;
        position: relative;
        border: 6px solid #F8F8F8;
        -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }

    .avatar-upload .avatar-preview>div {
        width: 100%;
        height: 100%;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    @media (max-width: 1024px) {
        .mobilePad {
            padding-left: 10px !important;
        }
    }

    #tableProfile {
        border: 1px solid #ccc;
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
    }



    #tableProfile tr {
        border: 1px solid #ddd;
        padding: .15em;
    }

    #tableProfile tr:nth-child(even) {
        /* background: #f8f8f8; */
    }

    #tableProfile th,
    #tableProfile td {
        padding: .455em;
        text-align: left;
    }

    #tableProfile th {
        /* background: #999; */
        color: #fff;
        font-size: .85em;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    #tableProfile td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px !important;
    }

    #tableProfile td:nth-child(2) {
        color: rgb(102, 102, 102) !important;
        font-weight: 200 !important;
    }

    h1 {
        position: relative;
        padding: 0;
        margin: 0;
        font-family: "Raleway", sans-serif;
        font-weight: 300;
        font-size: 18px;
        color: #080808;
        -webkit-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    h1 span {
        display: block;
        font-size: 0.5em;
        line-height: 0.2;
    }

    h1 em {
        font-style: normal;
        font-weight: 600;
    }

    /* === HEADING STYLE #1 === */

    .one h1 {
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 2px;
        font-size: 12px;
        font-weight: 400;
    }

    .one h1:before {
        width: 28px;
        height: 5px;
        display: block;
        content: "";
        position: absolute;
        bottom: 2px;
        left: 50%;
        margin-left: -14px;
        background-color: #f15a2b;
    }

    .one h1:after {
        width: 100px;
        height: 1px;
        display: block;
        content: "";
        position: relative;
        margin-top: 10px;
        left: 50%;
        margin-left: -50px;
        background-color: #f15a2b;
    }
</style>


<div class="row">
    <div class='col-md-4' style='padding-top:20px;'>
        <div class="avatar-upload">
            <div class="avatar-preview ">
                <div class="imagePreview"></div>
            </div>
        </div>
    </div>



    <div class='col-md-8'>
        <div class="card" style="border-top-left-radius: 0px; border-top-right-radius: 0px;">
            <div class="card-body">
                <h4 class="card-title">Added Stock</h4>
                <h6 class="card-subtitle"></h6>
                <div class="table-responsive">
                    <table id="exampleProfile" style='Width:100%'>
                        <thead class="bg-info">
                            <tr>
                                <!-- <th scope="col" style="width:50px;"></th> -->
                                <th scope="col">Category</th>
                                <th scope="col">Item</th>
                                <th scope="col">Quantity</th>
                                <th scope="col">Status</th>
                                <th scope="col">Date</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class='col-md-12' style='text-align:center; margin-top:20px;'>
        <button type="button" class="btn btn-dark printProfile" data-url="/COMPONENTS/reports/reports/print/print-candidate-profile.php"><span class='submitLoader'><i class="fa fa-print"></i> Print</span></button>
    </div>

</div>

<script>
    var invoiceNo = $('.invoiceNo').html();
    $.getJSON(domain_api + "/candidate/candidate.php?invoiceNo=" + encodeURIComponent(invoiceNo), function(data) {
        sessionStorage.setItem("profile_photo", data.candidates_information[0].profile_photo);
        $('.imagePreview').css('background-image', "url(" + domain_api + "/uploads/profile-photos/" + encodeURIComponent(profile_photo) + ")");
        $('.imagePreview').hide();
        $('.imagePreview').fadeIn(650);
    });



    var table = $('#exampleProfile').DataTable({
        responsive: true,
        "ajax": {
            "url": domain_api + "/stock/stocklist.php?invoiceNo="+encodeURIComponent(invoiceNo)+"",
            "dataSrc": "stock_list"
        },
        "columns": [
            {
                "data": "category"
            },
            {
                "data": "item"
            },
            {
                "data": "vendor"
            },
            {
                "data": null,
                render: function(data, type, row) {
                    if (data.status == "Pending") {
                        return '<span style="color:red;">' + data.status + '</span>'
                    } else {
                        return '<span style="color:green;">' + data.status + '</span>'
                    }
                }
            },
            {
                "data": null,
                render: function(data, type, row) {
                    var dateObj = new Date(data.date);
                    var myDate = (dateObj.getUTCDate() + "/" + (dateObj.getMonth() + 1) + "/" + (dateObj.getUTCFullYear()));
                    return '' + myDate + ' <span style="font-size:9px;">' + data.time + '</span>'
                }
            },
            {
                "data": null,
                render: function(data, type, row) {
                    if (data.status == "Pending") {
                        return '<div class="btn btnn btn-success actionWarehouse" data-id="' + data.id + '" data-url="/COMPONENTS/sub-pages/warehouse-stock.php" title="Edit" style="margin-left:5px; margin-right:5px;"><i class="ii fas fa-plus"></i></div>' +
                        '<div class="btn btnn btn-danger action" data-id="' + data.id + '" data-url="/COMPONENTS/sub-pages/delete-stock.php" title="Delete"><i class="ii fa fa-trash"></i></div>'
                            
                    } else {
                        return  '<div class="btn btnn btn-success" title="Edit" style="margin-left:5px; margin-right:5px; background:rgb(206, 230, 206); border:rgb(206, 230, 206);"><i class="ii fas fa-plus"></i></div>' +
                        '<div class="btn btnn btn-danger" title="Delete" style="background:rgb(211, 182, 182); border:rgb(211, 182, 182);"><i class="ii fa fa-trash"></i></div>'
                            
                    }
                }
            }
        ]
    });
    new $.fn.dataTable.FixedHeader(table);

    $(document).on('click', '.printProfile', function() {
        $("#myModal_profile").modal('hide');
        var url = $(this).attr('data-url');
        var url = domain + url;
        sessionStorage.setItem('url-print-profile', url + "?userId=" + encodeURIComponent(userId) + "");
        $("#profile").load(domain + "/COMPONENTS/sub-pages/print-profile-in-iframe.php", function() {
            $("#myModal_printProfile").modal('show');
        });
    });

    $(document).off().on("click", ".actionWarehouse", function() {
        var id = $(this).attr("data-id");
        var url = $(this).attr("data-url");
        var url = url + "?id=" + encodeURIComponent(id) + "&invoiceNo="+encodeURIComponent(invoiceNo)+"";
        $(".actionBodyOther").load(domain + url, function() {
            $("#myModal_warehouse").modal("show");
            $(".closeModal").on("click", function() {
                $("#myModal_warehouse").modal("hide");
            });
        })
    });

    $(document).on("click", ".action", function() {
        var id = $(this).attr("data-id");
        var url = $(this).attr("data-url");
        var url = url + "?id=" + encodeURIComponent(id) + "";
        $(".actionBody").load(domain + url, function() {
            $("#myModal_actions").modal("show");
            $(".closeModal").on("click", function() {
                $("#myModal_actions").modal("hide");
            });
        })
    });
</script>