@include('layouts.header');
@include('layouts.sidebar');
<!-- <link rel="stylesheet" type="text/css" href="{{ asset('jquery.dataTables.min') }}" /> -->

<!-- <script type="text/javascript" src="DataTables/datatables.min.js"></script> -->


<link href='css/jquery-ui.css' rel='stylesheet'>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script src="jquery.js"></script>

<style>
    .error {
        /*font-weight: bold;*/
        /* margin-top: 40px; */
        font-size: 13px;
        font-weight: 610;
        color: red;
    }

    #ex_img {
        width: 27px;
        float: right;
        margin-top: -4%;
    }

    /* span.select2-selection.select2-selection {
        height: 58px !important;
    } */


    div.dt-buttons {
        position: relative;
        float: right !important;
        margin-left: 10px;

    }

    .ui-datepicker {
        width: 265px;
        height: 265px;
        color: #963131;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
    }

    .ui-datepicker-header {
        background: #963131;
        color: #963131;
        font-family: 'Times New Roman';
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #111;
    }

    .ui-datepicker-calendar .ui-state-default {
        background: linear-gradient(#963131, #963131);
        color: #ffffff;
        height: 35px;
        width: 35px;
        border: 1px;
        border-radius: 2px;
    }

    .ui-datepicker-calendar .ui-state-hover {
        background: white;
        color: #963131;
    }



    #infinity_loader {
        background: rgba(255, 255, 255, 50%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }

    #infinity_loader img {
        left: 36%;
        margin-left: -90px;
        margin-top: -32px;
        position: absolute;
        top: 25%;
        height: 200px;
    }

    #show_vtype {
        display: none;
    }

    .labels tr td {
        background-color: #edeff6;
        font-weight: bold;
        color: black;
        cursor: pointer;
    }

    .label tr td label {
        display: block;
    }





    @media screen and (max-width: 600px) {
        #infinity_loader img {
            left: 40%;
            margin-left: -90px;
            margin-top: -32px;
            position: absolute;
            top: 30%;
            height: 200px;
        }
    }

    #datato_hide {
        background: rgba(0, 0, 0, 0.9);
        position: fixed;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 100%;
        z-index: 100;
        display: none;

    }

    #datato_hide2 {
        background-color: #fff;
        width: 50%;
        position: relative;
        top: 25%;
        left: 30%;
        right: 25%;
        left: calc(50%-25%);
        padding: 15px;
        border-radius: 4px;

    }

    #crud {
        width: 200px;
    }

    /* load page */

    #pageloader {
        background: rgb(255 255 255 / 20%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }

    #pageloader img {
        left: 60%;
        margin-left: -90px;
        margin-top: -32px;
        position: absolute;
        top: 40%;
        height: 150px;
        border: black;
        border-style: double;
        background-color: antiquewhite;
        border-radius: 20px;
    }

    @media screen and (max-width: 600px) {
        #pageloader img {
            left: 50%;
            margin-left: -90px;
            margin-top: -32px;
            position: absolute;
            top: 50%;
            height: 150px;
            border: black;
            border-style: double;
            background-color: antiquewhite;
            border-radius: 20px;
        }


    }

    .select2-container .select2-selection--multiple {
        min-height: 50px;

    }

    .select2-container .select2-selection--multiple {
        min-height: 52px;

    }
</style>

<body>
    <div class="col-lg-12" id="pageloader">
        <img src="images/256x256.gif">

    </div>
    @include ('layouts.head')

    <main id="main" class="main">

        {{-- <div id="infinity_loader"><img src="{{ asset('assets/img/lod.gif') }}"></div> --}}


        <section class="section dashboard">


            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Standard Items</h5>
                    <div class="tab-content pt-2" id="myTabjustifiedContent">
                        <div class="tab-pane fade show active" id="home-justified" role="tabpanel"
                            aria-labelledby="home-tab">
                            <div class="card">
                                <div class="card-body">


                                    <!-- Floating Labels Form -->
                                    <div class="row">
                                        <form class="row g-3" id="standard_item">
                                            <input type="hidden" id="" name="_token" value="{{ csrf_token()}}">

                                          



                                            <div class="col-md-6">
                                                <div class="form-floating mb-3">
                                                    <input type="text" class="form-control" id="item_name" name="item_name"
                                                        placeholder="Standard Items " autocomplete="off" required="" >
                                                   
                                                    <label for="floatingName">Standard Item</label>
                                                    <span id="item_error"></span>
                                                </div>
                                            </div>



                                     

                                            <div class="text-center">
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                                <button type="button" onclick="reset_data();"
                                                    class="btn btn-primary">Reset</button>
                                                <!-- <input type="button" id="export" onclick="export_category_count();" class="btn btn-success" value="Export"> -->
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Report</h5>

                <!-- Bordered Tabs -->
                <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                            data-bs-target="#bordered-home" type="button" role="tab" aria-controls="home"
                            aria-selected="true"> List</button>
                    </li>


                </ul>
                <div class="tab-content pt-2" id="borderedTabContent">
                    <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                        aria-labelledby="home-tab">
                        <div class="col-lg-12" id="tcp_table1">
                            <!-- <div class="col-lg-12"> -->
                            <div class="card">
                                <div class="card-body">

                                    <table id="view_standard_item_table" class='display dataTable' style="width:100%">
                                        <thead>
                                            <tr>

                                                <th scope="col">#</th>
                                                <th scope="col">Item Name</th>
                                                <th scope="col">Action</th>
                                              

                                            </tr>
                                        </thead>

                                    </table>


                                </div>
                            </div>

                        </div>
                    </div>

                </div><!-- End Bordered Tabs -->

            </div>
        </div>



        <div class="modal fade" id="extra_large_model_1" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Standard Items</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome" role="tabpanel"
                                    aria-labelledby="storehome-tab">

                                    <div class="row">
                                        <form class="row g-3" id="view_std_item">
                                            <input type="hidden" id="view_id" name="_token" value="{{ csrf_token()}}">

                                          
                                            <div class="col-md-12">
                                                <div class="form-floating mb-3">
                                                    <input type="text" class="form-control" id="view_item_name" name="view_item_name"
                                                        placeholder="Standard Items " autocomplete="off" required="" readonly>
                                                   
                                                    <label for="floatingName">Standard Item</label>
                                                    <span id="area_manager_name_error"></span>
                                                </div>
                                            </div>



                                     


                                        </form>
                                    </div>


                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit" role="tabpanel"
                                    aria-labelledby="storeedit-tab">


                                    <div class="row">


                                        <form class="row g-3" id="update_std_item">
                                            <input type="hidden" id="" name="_token" value="{{ csrf_token()}}">
                                            <input type="hidden" id="update_id" name="update_id" value="">

  
                                            <div class="col-md-12">
                                                <div class="form-floating mb-3">
                                                    <input type="text" class="form-control" id="edit_item_name" name="edit_item_name"
                                                        placeholder="Standard Items " autocomplete="off" required="" >
                                                   
                                                    <label for="floatingName">Standard Item</label>
                                                    <span id="edit_std_error"></span>
                                                </div>
                                            </div>



                                            <div class="text-center">
                                                <button type="submit" class="btn btn-primary">Update</button>
                                                <button type="reset" onclick="reset_std_item_name();"
                                                    class="btn btn-primary">Reset</button>
                                                <input type="hidden" id="reset_standard_item_names"
                                                    name="reset_standard_item_names">
                                            </div>

                                        </form>


                                    </div>


                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete" role="tabpanel"
                                    aria-labelledby="storedelete-tab">


                                    <div class="row">


                                        <form class="row g-3" id="delete_std_item">
                                            <input type="hidden" id="" name="_token" value="{{ csrf_token()}}">
                                            <input type="hidden" id="delete_id" name="delete_id" value="">

                                        
                                            <div class="col-md-12">
                                                <div class="form-floating mb-3">
                                                    <input type="text" class="form-control" id="delete_item_name" name="delete_item_name"
                                                        placeholder="Standard Items " autocomplete="off" required="" readonly>
                                                   
                                                    <label for="floatingName">Standard Item</label>
                                                    <span id="delete_std_error"></span>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_std_items();"
                                                    id="submit_delete" class="btn btn-primary">Delete</button>

                                            </div>

                                        </form>

                                    </div>


                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main><!-- End #main -->



    @include('layouts.footer');
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <script src="js/jquery.dataTables.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>


    <script>
        var data = {};
        var arr = {};
        data['_token'] = "{{ csrf_token() }}";
        arr['_token'] = "{{ csrf_token() }}";


        $(document).ready(function (e) {
            $(".selUser").select2();
            // $(".chosen-select").chosen();

            $(function () {
                $("#date").datepicker({
                    dateFormat: 'dd-mm-yy',
                    altField: "#hidden_date",
                    altFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    minDate: '-0M',
                    maxDate: '+3M',
                    onSelect: function (dateText, inst) {
                        $(this).valid();
                    }
                });
            });


            $(function () {
                $("#update_date").datepicker({
                    dateFormat: 'dd-mm-yy',
                    altField: "#update_hidden_date",
                    altFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    minDate: '-0M',
                    maxDate: '+3M',
                    onSelect: function (dateText, inst) {
                        $(this).valid();
                    }
                });
            });




            $('#standard_item').validate({
                rules: {
                    item_name: "required",
                
                },
                messages: {
                    item_name: "This field is required",
                  
                },
                highlight: function (element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function (element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function (error, element) {
                    if (element.attr("name") == "item_name") {
                        error.appendTo('#item_error');
                    }  else {
                        error.insertAfter(element);
                    }
                },
                

            })



            
            $('#update_std_item').validate({
                rules: {
                    edit_item_name: "required",
                
                },
                messages: {
                    edit_item_name: "This field is required",
                  
                },
                highlight: function (element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function (element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function (error, element) {
                    if (element.attr("name") == "edit_item_name") {
                        error.appendTo('#edit_std_error');
                    }  else {
                        error.insertAfter(element);
                    }
                },

            })



       
           
            load_standard_item();


        })


        function reset_data(){

            $('#item_name').val('');

        }





        $('#standard_item').submit(function (e) {
            e.preventDefault();
            if ($('#standard_item').valid()) {


                var data = {};
                var item_name = $('#item_name').val();
                data['item_name'] = item_name;
                data['_token'] = "{{ csrf_token() }}";


                $.ajax({
                    type: 'POST',
                    url: 'insert_standard_items',
                    data: data,
                    success: function (result) {
                        var obj = jQuery.parseJSON(result);

                        if (obj == 'Exist') {
                            alert(' Data already Exist!');

                        } else {
                            alert('Standard Item Inserted Successfully');
                            reset_data();
                            load_standard_item();
                          
                        }
                    }
                })
            }
        })


        function load_standard_item() {
            $('#view_standard_item_table').DataTable().destroy();
            var table = $('#view_standard_item_table').DataTable({
                "ordering": true,
                "order": [0, 'desc'],
                "ajax": {
                    url: "retrive_standard_item_names",
                    type: "get",
                    data: data,

                },

                "columns": [{
                    "data": "id",
                    "title": "#"
                },
                {
                    "data": "item_name",
                    "title": "Item Name",
                 
                },
               
                {
                    "data": "id",
                    render: function (data, full, type) {
                        return '<button data-bs-toggle="modal" data-bs-target="#extra_large_model_1" type="submit" class="btn btn-danger" onclick="view_model(\'' +
                            data +
                            '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';
                    }
                }

                ],
                columnDefs: [

                    {
                        "width": "2%",
                        "targets": [0],
                        "orderable": true,
                        "className": "dt-center",
                        "searching": false
                    },
                    {
                        "width": "15%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "20%",
                        "targets": [2],
                        "className": "dt-center"
                    },

                  

                ],

                initComplete: function () {

                }

            });
            table.on('order.dt search.dt', function () {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function (cell) {
                    this.data(i++);
                });
            }).draw();

        }



        function reset_std_item_name() {
            var id = $("#reset_standard_item_names").val();

            view_model(id);
        }


        function view_model(id) {

            $("#reset_standard_item_names").val(id);
            $("#update_std_item")[0].reset();
            $("#update_id").val(id);

            var data = {};
            data['id'] = id;
            data['_token'] = "{{ csrf_token() }}";

            $.ajax({
                type: 'post',
                url: "retrive_single_std_id",
                data: data,
                success: function (returnData) {

                    var obj = jQuery.parseJSON(returnData);


                    // VIEW
                    
                
                    $('#view_id').val(obj[0]['id']);
                    $('#view_item_name').val(obj[0]['item_name']);
                   


                    // // Update
                    $('#update_id').val(obj[0]['id']);
                    $('#edit_item_name').val(obj[0]['item_name']);
                    


                    // delete

                    $('#delete_id').val(obj[0]['id']);
                    $('#delete_item_name').val(obj[0]['item_name']);
                   


                }
            });
        }




        function delete_std_items() {

            var data = {};
            var delete_id = $('#delete_id').val();
            data['delete_id'] = delete_id;
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'retrive_standard_item_by_id',
                data: data,
                success: function (returnData) {
                    var data = jQuery.parseJSON(returnData);
                    if (data == 'deleted') {
                        alert("Standard Item Deleted Successfully");
                        $(".btn-close").click();
                        $("#delete_std_item")[0].reset();
                        load_standard_item();
                      
                    }

                }
            })

        }


        $('#update_std_item').submit(function (e) {
            e.preventDefault();
            if ($('#update_std_item').valid()) {

               
                var data = {};
                var update_id = $('#update_id').val();
                var edit_item_name = $('#edit_item_name').val();
                data['update_id'] = update_id;
                data['edit_item_name'] = edit_item_name;
                data['_token'] = "{{ csrf_token() }}";

                $.ajax({
                    type: 'POST',
                    url: 'update_standard_item_by_id',
                    data: data,
                    success: function (result) {
                        var obj = jQuery.parseJSON(result);

                        if (obj == 'Exist') {
                            alert(' Data already Exist!');


                        } else {
                            alert('Standatrd Item Updated Successfully');
                          
                            $(".btn-close").click();
                            load_standard_item();
                            // reset_approver_name_update();

                        }
                    }
                })
            }
        })







    </script>
</body>

</html>