<?php include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php"); ?>

<style>
    .formfield {
        position: relative;
        box-sizing: border-box;
        float: left;
        margin: auto;
        padding: 0px;
        border: 0px;
        background: white;
        width: 100%;
    }


    .formfield>input,
    .formfield>select,
    .formfield>textarea,
    .formfield>label {
        padding: 0.8em;
        margin: 0.5em;
        width: 100%;
        background: none;
    }

    .formfield>input,
    .formfield>textarea,
    .formfield>select {
        border: 1px solid #d4d4d4;
        border-radius: 5px;
        outline: none;
    }

    .formfield>label {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        color: #6b6b6b;
        font-size: 12px;
    }

    input:focus+label,
    select:focus+label,
    textarea:focus+label,
    input:valid+label,
    textarea:valid+label,
    select:valid+label {
        color: #686868;
        font-size: 0.9em;
        width: auto;
        height: 1em;
        padding: 0px 0.5em 0px 0.5em;
        margin: 0px;
        background: white;
        transition: 0.2s ease-in-out;
        top: 0em;
        left: 2em;
        font-weight: 600px;

    }

    input:focus,
    input:valid,
    select:focus,
    select:valid,
    textarea:focus,
    textarea:valid {
        border: 2px solid #5381aa;
    }


    input:focus~label,
    input:valid~label,
    select:focus~label,
    select:valid~label,
    textarea:focus~label,
    textarea:valid~label {
        font-size: 12px;
        color: #286397;
        font-weight: 500;
        /* border: 2px solid #009688; */
    }


    input:focus~label span,
    input:valid~label span,
    select:focus~label span,
    select:valid~label span,
    textarea:focus~label span,
    textarea:valid~label span {
        color: red !important;
    }

    /* .containerr {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    } */

    .radio_container {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        background-color: #cecece !important;
        width: 100% !important;
        margin-top: 10px;
        height: 50px;
        border-radius: 5px;
        box-shadow: inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.15);
        margin-left: 7px;
    }

    .radio_container input[type="radio"] {
        appearance: none !important;
        display: none !important;
    }

    .radio-label {
        font-family: "Open Sans", sans-serif;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: none !important;
        width: 48% !important;
        height: 40px !important;
        text-align: center;
        border-radius: 5px;
        overflow: hidden;
        transition: linear 0.3s;
        color: #6e6e6edd !important;
    }

    .radio_container input[type="radio"]:checked+label {
        background-color: #f15a2b !important;
        color: #f1f3f5 !important;
        /* font-weight: 900; */
        transition: 0.3s;
    }

    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;
    }

    .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;
    }

    /* === HEADING STYLE #2 === */

    .boutonn {
        text-transform: uppercase;
        font-weight: 500;
        color: #fff;
        border-radius: 100px;
        border: 0px;
        background-image: linear-gradient(60deg, #05579e, #05579e);
        width: 250px;
        transition: box-shadow 0.1s linear;
        height: 40px;
        margin-top: 20px;
    }

    .boutonn:hover {
        transition: box-shadow 0.1s linear;
        text-transform: uppercase;
        font-weight: 800;
        color: #fff;
        border-radius: 100px;
        border: 0px;
        background-image: linear-gradient(60deg, #05579e, #05579e);
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        cursor: pointer;
    }

    .boutonn:active {
        text-transform: uppercase;
        font-weight: 800;
        color: #fff;
        border-radius: 100px;
        border: 0px;
        background-image: linear-gradient(60deg, #05579e, #7c4891);
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        height: 45px;
        width: 145px;
    }

    .modal-header {
        background: linear-gradient(90deg, hsla(212, 50%, 34%, 1) 0%, hsla(215, 62%, 34%, 1) 36%, hsla(203, 92%, 37%, 1) 100%);
        background: -moz-linear-gradient(90deg, hsla(212, 50%, 34%, 1) 0%, hsla(215, 62%, 34%, 1) 36%, hsla(203, 92%, 37%, 1) 100%);
        background: -webkit-linear-gradient(90deg, hsla(212, 50%, 34%, 1) 0%, hsla(215, 62%, 34%, 1) 36%, hsla(203, 92%, 37%, 1) 100%);
        color: white;
    }

    input[type="date"]::before,
    input[type="file"]::before {
        content: attr(placeholder);
        position: absolute;
        color: #999999;

    }

    input[type="date"],
    input[type="file"] {
        color: #ffffff;
        background: url("add-file.png") no-repeat;
        text-indent: -9999px;
    }

    input[type="date"]:focus,
    input[type="date"]:valid,
    input[type="file"]:focus,
    input[type="file"]:valid {
        color: #666666;
        background: none;
        text-indent: 0px;
    }

    input[type="date"]:focus::before,
    input[type="date"]:valid::before,
    input[type="file"]:focus::before,
    input[type="file"]:valid::before {
        content: "";
    }

    .dose h1,
    .dose {
        margin-top: 8px;
        text-align: right;
        font-size: 13px;
    }


    .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;
        }
    }

    #addressFirst {
        height: 93px;
    }

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



    #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: black;
        font-size: .85em;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

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

    #tableProfile td div {
        padding-left: 35px;
    }

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

    input[type="radio"],
    input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        border: 2px solid #999;
        transition: 0.2s all linear;
        position: relative;
    }

    input[type="radio"]:checked,
    input[type="checkbox"]:checked {
        border: 6px solid #f15a2b;
        background: white;
        outline: unset !important
            /* I added this one for Edge (chromium) support */
    }

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



    table tr {
        border: 1px solid #ddd;
        padding: .35em;
    }

    table tr:nth-child(even) {
        background: #f8f8f8;
    }

    table th,
    table td {
        padding: .625em;
        text-align: center;

    }

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

    table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btnn {
        /* width:50px !important;
        height:30px !important; */
        border-radius: 8px;
        cursor: pointer;

    }

    .ii {
        font-size: 13px;
        width: 100%;
        float: right;
        text-align: right;
    }
</style>


<div class="row">
    <div class="col-md-9">
        <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="example" style='Width:100%'>
                        <thead class="bg-info">
                            <tr>
                                <!-- <th scope="col" style="width:50px;"></th> -->
                                <th scope="col">Invoice No.</th>
                                <th scope="col">Vendor</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-3">
        <div class="card" style="border-top-left-radius: 0px; border-top-right-radius: 0px;">
            <div class="card-body">
                <h4 class="card-title">Stock List</h4>
                <h6 class="card-subtitle"></h6>
                <div class="table-responsive">
                    <table id="example" style='Width:100%'>
                        <thead class="bg-info">
                            <tr>
                                <!-- <th scope="col" style="width:50px;"></th> -->
                                <th scope="col">Invoice No.</th>
                                <th scope="col">Vendor</th>
                                <th scope="col">No. of Items</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modals"></div>

<script>
    $(".modals").load(domain + "/COMPONENTS/sub-pages/modals.php");
    $(".addStock1").off().on("click", function() {
        var form_name = $(this).attr("data-form-name");
        var endpoint = $(this).attr("data-endpoint");
        var category = $("#itemDescription option:selected").attr("data-category");
        $("#" + form_name).submit(function(e) {
            $.ajax({
                url: domain_api + endpoint + "?category=" + category,
                type: "POST",
                data: new FormData(this),
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $(".addStock1").attr("disabled", "disabled");
                    $(".submitLoader").html("<i class='fa fa-spinner fa-spin'></i>")
                },
                success: function(data) {
                    $(".submitLoader").html("Save");
                    if (data.code == 200) {
                        $("#" + form_name)[0].reset();
                        swal("Succes!", data.message, "success");
                        var table = $('#example').DataTable({
                            bDestroy: true,
                            responsive: true,
                            "ajax": {
                                "url": domain_api + "/stock/stocklist.php",
                                "dataSrc": "stock_list"
                            },
                            "columns": [{
                                    "data": "invoice_no"
                                },
                                {
                                    "data": "vendor"
                                },
                                {
                                    "data": "status"
                                },
                                {
                                    "data": null,
                                    render: function(data, type, row) {
                                        return '<div class="btn btnn btn-primary profile" data-id="' + data.id + '" title="Profile"><i class="ii far fa-eye"></i></div>' +
                                            '<div class="btn btnn btn-success action" data-id="' + data.id + '" data-url="/COMPONENTS/sub-pages/edit-agent-details.php" title="Edit" style="margin-left:5px; margin-right:5px;"><i class="ii fas fa-edit"></i></div>' +
                                            '<div class="btn btnn btn-danger action" data-id="' + data.id + '" data-url="/COMPONENTS/sub-pages/delete-agent.php" title="Delete"><i class="ii fa fa-trash"></i></div>'

                                    }
                                }
                            ]
                        });

                        new $.fn.dataTable.FixedHeader(table);
                    } else {
                        swal("Oops!", data.message, "error");
                    }
                    $(".addStock1").attr("disabled", false);
                },
                error: function(request, error) {
                    $(".submitLoader").html("Save");
                    swal("Oops!", "Saving was not successful, you should try again!", "error");
                },
            });
            e.preventDefault();
        });
        $(this).off("click");
    });



    var table = $('#example').DataTable({
        responsive: true,
        "ajax": {
            "url": domain_api + "/stock/stocklist.php",
            "dataSrc": "stock_list"
        },
        "columns": [{
                "data": "invoice_no"
            },
            {
                "data": "vendor"
            },
            {
                "data": "category"
            },
            {
                "data": "item"
            },
            {
                "data": "quantity"
            },
            {
                "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-danger action" data-id="' + data.id + '" data-url="/COMPONENTS/sub-pages/delete-stock.php" title="Delete"><i class="ii fa fa-trash"></i></div>' +
                            '<div class="btn btnn btn-success action" 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>'
                    } else {
                        return '<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>' +
                            '<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>'
                    }
                }
            }
        ]
    });
    new $.fn.dataTable.FixedHeader(table);

    $(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");
            });
        })
    });











    // var table = $('#example').DataTable({
    //     responsive: true,
    //     "ajax": {
    //         "url": domain_api + "/stock/stocklist.php",
    //         "dataSrc": "stock_list"
    //     },
    //     "columns": [{
    //             "data": "invoice_no"
    //         },
    //         {
    //             "data": "vendor"
    //         },
    //         {
    //             "data": "category"
    //         },
    //         {
    //             "data": "item"
    //         },
    //         {
    //             "data": "quantity"
    //         },
    //         {
    //             "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-danger action" data-id="' + data.id + '" data-url="/COMPONENTS/sub-pages/delete-stock.php" title="Delete"><i class="ii fa fa-trash"></i></div>' +
    //                         '<div class="btn btnn btn-success action" 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>'
    //                 } else {
    //                     return '<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>' +
    //                         '<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>'
    //                 }
    //             }
    //         }
    //     ]
    // });
    // new $.fn.dataTable.FixedHeader(table);

    // $(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>
<script src="<?php echo $website_name; ?>/dist/js/pages/dashboards/dashboard1.min.js"></script>