@extends('st::layouts.app')

@section('head')
<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
<link href="{{ asset('assets/css/hr/settings.css') }}" media="all" rel="stylesheet" type="text/css" />
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 23px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked+.slider {
        background-color: #2196F3;
    }

    input:focus+.slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>

<script>
    var group1_edit_permission = "{{Auth::user()->can('st_product_setting_group1_edit')}}";
    var group1_disable_permission = "{{Auth::user()->can('st_product_setting_group1_status')}}";

    var group2_edit_permission = "{{Auth::user()->can('st_product_setting_group2_edit')}}";
    var group2_disable_permission = "{{Auth::user()->can('st_product_setting_group2_status')}}";

    var group3_edit_permission = "{{Auth::user()->can('st_product_setting_group3_edit')}}";
    var group3_disable_permission = "{{Auth::user()->can('st_product_setting_group3_status')}}";

    var mesure_edit_permission = "{{Auth::user()->can('st_product_setting_unit_mesure_edit')}}";
    var mesure_disable_permission = "{{Auth::user()->can('st_product_setting_unit_mesure_status')}}";
</script>

@endsection

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="card ">
            <div class="card-body">
                <h6 class="card-title">Product Settings</h6>
                <div class="accordion" id="accordionExample">

                    @if(Auth::user()->can('st_product_setting_group1'))
                    <div class="col-md-12 mb-3">
                        <div class="card ">
                            <div class="card-header" id="headingTown">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" type="button" id="settingsModal" data-toggle="collapse" data-target="#collapseTown" aria-expanded="false" aria-controls="collapseTown" onclick="loadDataId1()">
                                        <i class="ti-settings mr-2"></i> Group Level 1
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseTown" class="collapse" aria-labelledby="headingTown" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div>
                                        @if(Auth::user()->can('st_product_setting_group1_add'))
                                        <button type="button" id="btnGrp1modal" class="btn btn-primary" data-target="#settingsAddModal" data-whatever="@getbootstrap" name="save">
                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                        </button>
                                        @endif
                                    </div>
                                    <div class="table-responsive">
                                        <!-- Required for Responsive -->
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th class="id">ID#</th>
                                                    <th>Name</th>
                                                    <th class="edit edit_status">Edit</th>
                                                    <th class="disable disable_status">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tblGrpId1"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    @if(Auth::user()->can('st_product_setting_group2'))
                    <div class="col-md-12 mb-3">
                        <div class="card">
                            <div class="card-header" id="headingCivilStatus">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseCivilStatus" aria-expanded="false" aria-controls="collapseCivilStatus" onclick="loadDataId2()">
                                        <i class="ti-settings mr-2"></i> Group Level 2
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseCivilStatus" class="collapse" aria-labelledby="headingCivilStatus" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div>
                                        @if(Auth::user()->can('st_product_setting_group2_add'))
                                        <button type="button" class="btn btn-primary" id="btnGrp2modal" data-target="#settingsAddModal" data-whatever="@getbootstrap" name="save" onclick="loadgrp1()">
                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                        </button>
                                        @endif
                                    </div>
                                    <div class="table-responsive">
                                        <!-- Required for Responsive -->
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th class="id">ID#</th>
                                                    <th>Name</th>
                                                    <th class="edit edit_status">Edit</th>
                                                    <th class="disable disable_status">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tblGrpId2"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    @if(Auth::user()->can('st_product_setting_group3'))
                    <div class="col-md-12 mb-3">
                        <div class="card">
                            <div class="card-header" id="headingDesignation">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseDesignation" aria-expanded="false" aria-controls="collapseDesignation" onclick="loadDataId3()">
                                        <i class="ti-settings mr-2"></i> Group Level 3
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseDesignation" class="collapse" aria-labelledby="headingDesignation" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div>
                                        @if(Auth::user()->can('st_product_setting_group3_add'))
                                        <button type="button" id="btnGrp3modal" class="btn btn-primary" data-target="#settingsAddModal" data-whatever="@getbootstrap" name="save">
                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                        </button>
                                        @endif
                                    </div>
                                    <div class="table-responsive">
                                        <!-- Required for Responsive -->
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th class="id">ID#</th>
                                                    <th>Name</th>
                                                    <th class="edit edit_status">Edit</th>
                                                    <th class="disable disable_status">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tblGrpId3"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- commented by nipuna --}}
                    {{-- <div class="col-md-12 mb-3">
                        <div class="card">
                            <div class="card-header" id="headingDepartment">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseDepartment" aria-expanded="false" aria-controls="collapseDepartment" onclick="loadDataproductType()">
                                        <i class="ti-settings mr-2"></i>Product Type
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseDepartment" class="collapse" aria-labelledby="headingDepartment" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div>
                                        <button type="button" class="btn btn-primary" id="btnType" data-target="#settingsAddModal" data-whatever="@getbootstrap" name="save" onclick="showModal('save','Department')">
                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                        </button>  
                                    </div>
                                    <div class="table-responsive">
                                        <!-- Required for Responsive -->
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th class="id">ID#</th>
                                                    <th>Name</th>
                                                    <th class="edit edit_status">Edit</th>
                                                    <th class="disable disable_status">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tblProductType"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}

                    @if(Auth::user()->can('st_product_setting_unit_mesure'))
                    <div class="col-md-12 mb-3">
                        <div class="card">
                            <div class="card-header" id="headingUOM">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#unitOfMesurement" aria-expanded="false" aria-controls="collapseDepartment" onclick="loadUOM()">
                                        <i class="ti-settings mr-2"></i> Unit Of Mesurement
                                    </button>
                                </h5>
                            </div>
                            <div id="unitOfMesurement" class="collapse" aria-labelledby="headingDepartment" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div>
                                        @if(Auth::user()->can('st_product_setting_unit_mesure_add'))
                                        <button type="button" class="btn btn-primary" id="btnUOM" data-target="#" data-whatever="@getbootstrap" name="save" onclick="showModal('save','Department')">
                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                        </button>
                                        @endif
                                    </div>
                                    <div class="table-responsive">
                                        <!-- Required for Responsive -->
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th class="id">ID#</th>
                                                    <th>Name</th>
                                                    <th class="edit edit_status">Edit</th>
                                                    <th class="disable disable_status">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tblUOM"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif


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


    <!-- Group level 1  -->
    <div class="modal fade" id="grp1modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Group Level 1</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="grp1form">
                    {{csrf_field()}}
                    <input type="hidden" id="settingID" name="settingID" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="txtName">Name</label>
                                <input type="text" class="form-control" name="grplevel1name" id="grplevel1name" placeholder="Name" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnSaveGrp1">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Group level 2 modal-->
    <div class="modal fade" id="grp2modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Group Level 2</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="grp2form">
                    {{csrf_field()}}
                    <input type="hidden" id="settingID" name="settingID" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <label for="txtUpGrpLevel">Group Level 1</label>
                            <select class="form-control" id="grpLevel1DropDown" name="grpLevel1DropDown"></select>
                        </div>
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="txtName">Name</label>
                                <input type="text" class="form-control" name="grplevel2name" id="grplevel2name" placeholder="Name" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnSaveGrp2">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Group level 3  modal   -->
    <div class="modal fade" id="grp3modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Group Level 3</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="grp3form">
                    {{csrf_field()}}
                    <input type="hidden" id="settingID" name="settingID" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <label for="txtUpGrpLevel">Group Level 1</label>
                            <select class="form-control" id="grpLevel1DropDown_grp3Modal" name="grpLevel1DropDown_grp3Modal" onchange="level1select()"></select>
                        </div>
                        <div class="form-row">
                            <label for="txtUpGrpLevel">Group Level 2</label>
                            <select class="form-control" id="grpLevel2DropDown" name="grpLevel2DropDown"></select>
                        </div>
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="txtName">Name</label>
                                <input type="text" class="form-control" name="grplevel3name" id="grplevel3name" placeholder="Name" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnSaveGrp3">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Type modal      -->
    <div class="modal fade" id="typemodal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Product Type</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="productTypeForm">
                    {{csrf_field()}}
                    <input type="hidden" id="settingID" name="settingID" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="txtName">Name</label>
                                <input type="text" class="form-control" id="productTypeName" name="productTypeName" placeholder="Name" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnProductType">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- UOM Modal     -->
    <div class="modal fade" id="UomModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Unit Of Mesurement</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="UomForm">
                    {{csrf_field()}}
                    <input type="hidden" id="uomHiddenId" name="uomHiddenId" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="txtName">Name</label>
                                <input type="text" class="form-control" id="uomName" name="uomName" placeholder="Name" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnUOMsave">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- UOM update modal  -->
    <div class="modal fade" id="UomUpdateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Update Unit Of Mesurement</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="uomUpdateForm">
                    {{csrf_field()}}
                    <input type="hidden" id="uomUpdateId" name="uomUpdateId" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label>Name</label>
                                <input type="text" class="form-control" id="uomUpdateInput" name="uomUpdateInput" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnUpdateUom">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Product Type update modal  -->
    <div class="modal fade" id="ProductTypeUpdateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Update Product Type</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="productTypeUpdateForm">
                    {{csrf_field()}}
                    <input type="hidden" id="productTypeUpdateId" name="productTypeUpdateId" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="txtName">Name</label>
                                <input type="text" class="form-control" id="productTypeUpdateInput" name="productTypeUpdateInput" placeholder="Name" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnUpdateProductType">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- group level 3 update  -->
    <div class="modal fade" id="GroupLevel3UpdateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Update Group Level 3</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="level3UpdateForm">
                    {{csrf_field()}}
                    <input type="hidden" id="level3UpdateId" name="level3UpdateId" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <label id="level1forLevel3"></label>
                        </div>
                        <div class="form-row">
                            <label for="txtUpGrpLevel">Group Level 2</label>
                            <select class="form-control" id="grpLevel3UpdateDropDown" name="grpLevel3UpdateDropDown"></select>
                        </div>
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="txtName">Name</label>
                                <input type="text" class="form-control" name="grplevel3Updatename" id="grplevel3Updatename" placeholder="Name" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnUpdateGrp3">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Group Level 2 Update  -->
    <div class="modal fade" id="GroupLevel2UpdateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Update Group Level 2</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="level2UpdateForm">
                    {{csrf_field()}}
                    <input type="hidden" id="level2UpdateId" name="level2UpdateId" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <label for="txtUpGrpLevel">Group Level 1</label>
                            <select class="form-control" id="grpLevel2UpdateDropDown" name="grpLevel2UpdateDropDown"></select>
                        </div>
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="txtName">Name</label>
                                <input type="text" class="form-control" name="grplevel2Updatename" id="grplevel2Updatename" placeholder="Name" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnUpdateGrp2">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Group Level 1 Edit  -->
    <div class="modal fade" id="GroupLevel1UpdateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsAddModalTitle">Update Group Level 1</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <form method="POST" id="level1UpdateForm">
                    {{csrf_field()}}
                    <input type="hidden" id="level1UpdateId" name="level1UpdateId" value>
                    <div class="modal-body" id="settingsAddModalBody">
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="txtName">Name</label>
                                <input type="text" class="form-control" name="grplevel1Updatename" id="grplevel1Updatename" placeholder="Name" required="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btnUpdateGrp1">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('script')


<!-- Sweet alert -->
<script src="{{ url('assets/js/examples/sweet-alert.js') }}"></script>
<script src="{{ Module::asset('st:js/Productsettings.js') }}"></script>
<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>
@endsection