@extends('user.layout.header_footer')
@section('content')
    <title>Groups</title>
    <link href="{!! asset('theme/user_theme/css/sb-admin-2.min.css') !!}" rel="stylesheet">
    <link href="{!! asset('theme/user_theme/css/main.css') !!}" rel="stylesheet">


    <style>
        .adsgyh input {
            border-radius: 0px;
            color: black;
            font-size: 14px;
        }

        .adsgyh textarea {
            border-radius: 0px;
            color: black;
            font-size: 14px;
        }

        .adsgyh label {
            font-size: 16px;
            margin-bottom: 3px;
        }

        .addimag {
            padding: 3px;
        }

        .tjhry {
            margin-bottom: 55px !important;
        }

        .dvdf h4 {
            font-size: 17px;
            font-weight: 700;
            color: black;
        }

        .dvdf p {
            font-size: 14px;
            margin-bottom: 20px;
        }

        .dvdf h6 {
            font-size: 16px;
            font-weight: 700;
            color: black;
        }

        .dvdf h3 {
            font-size: 19px;
            font-weight: 600;
            color: black;
            margin-top: 20px;
        }

        .grocheck input {
            width: 14px;
            margin-top: 5px;
        }

        .grocheckfe {
            margin-bottom: -1px;
        }
    </style>

    <div id="content">
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
            <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                <i class="fa fa-bars"></i>
            </button>

            <div class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                <h1 class="pegheading">Groups</h1>
            </div>

            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown no-arrow d-sm-none">
                    <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-search fa-fw"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                        aria-labelledby="searchDropdown">
                        <div class="form-inline mr-auto w-100 navbar-search">
                            <div class="input-group">
                                <input type="text" class="form-control bg-light border-0 small"
                                    placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" />
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button">
                                        <i class="fas fa-search fa-sm"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>

        <div class="container-fluid">
            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                <div class="maintpsmall">

                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-8 fghfle tjhry">

                        </div>
                        <div class="col-sm-4">
                            <div class="topribtn">
                                <button type="button" class="btn btn-primary barbut ghty" onclick="addNewObj()"
                                    data-toggle="modal" data-target="#addModal"> + Add Groups
                                </button>

                                <div class="modal addModal fade" id="addModal" tabindex="-1" role="dialog"
                                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered mughe" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title mng" id="exampleModalLongTitlee">Add New Group
                                                </h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">

                                                {!! Form::open([
                                                    'id' => 'add_group_form',
                                                    'class' => 'myformcalss',
                                                    'method' => 'POST',
                                                    'route' => ['group.save'],
                                                    'files' => true,
                                                ]) !!}

                                                <div class="sgyh adsgyh dvdf">
                                                    <div class="form-group">
                                                        <label for="exampleFormControlInput1">Name*</label>
                                                        <div>
                                                            {!! Form::text('group_name', null, [
                                                                'class' => 'form-control group_name',
                                                                'data-parsley-required' => 'true',
                                                                'data-parsley-trigger' => 'change',
                                                                'placeholder' => 'Name',
                                                                'required',
                                                                'maxlength' => '100',
                                                            ]) !!}

                                                        </div>
                                                        <div class="form-group">
                                                            <label for="exampleFormControlInput1">Description*</label>
                                                            {!! Form::textarea('description', null, [
                                                                'class' => 'form-control description',
                                                                'data-parsley-required' => 'true',
                                                                'data-parsley-trigger' => 'change',
                                                                'placeholder' => 'Description',
                                                                'required',
                                                                'maxlength' => '50',
                                                            ]) !!}
                                                        </div>
                                                        <h4>Depreciation</h4>
                                                        <p>i Enter the percentage to be depreciated each year</p>
                                                        <h6>Calculate depreciation of Assets by entering</h6>
                                                        <div class="grocheck">
                                                            <div class="form-group form-check grocheckfe">
                                                                <input type="checkbox" class="form-check-input"
                                                                    id="exampleCheck1">
                                                                <label class="form-check-label"
                                                                    for="exampleCheck1">Percentage of
                                                                    Depreciation</label>
                                                            </div>
                                                            <div class="form-group form-check">
                                                                <input type="checkbox" class="form-check-input"
                                                                    id="exampleCheck2">
                                                                <label class="form-check-label" for="exampleCheck2">Useful
                                                                    Life of Assets</label>
                                                            </div>
                                                        </div>
                                                        <h3>Straight Line (Straight line)</h3>
                                                        <div class="form-group">
                                                            <label for="exampleInputEmail1">Useful Life in
                                                                Months*</label>
                                                            {!! Form::number('name', null, [
                                                                'class' => 'form-control name',
                                                                'data-parsley-required' => 'true',
                                                                'data-parsley-trigger' => 'change',
                                                                'placeholder' => 'Useful Life in Months',
                                                                'required',
                                                                'maxlength' => '100',
                                                            ]) !!}
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" id="closeModal"
                                                        data-dismiss="modal">Cancel</button>
                                                    <button type="button" id="addObj"
                                                        onclick="submit_form('#add_group_form','add_function')"
                                                        class="btn btn-primary">Save</button>
                                                    <button type="button" style="display: none" id="updateObj"
                                                        onclick="submit_form('#add_group_form','update_function')"
                                                        class="btn btn-primary">Update</button>
                                                </div>

                                                {!! Form::close() !!}

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

                                    {{-- <button type="button" class="btn btn-primary ghty">Export to
                                        CSV</i></button> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid">
                <div class="tabonweback">

                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card shadow mb-4">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="dataTable" width="100%"
                                            cellspacing="0">
                                            <thead>
                                                <tr class="tablelinehead">
                                                    <th>Group Name</th>
                                                    <th>Description</th>
                                                    <th>Assests Quantity</th>
                                                    <th>Assest Stock Quantity</th>
                                                    <th>Inventory Quantity</th>
                                                    <th>Sub Group</th>
                                                    <th>Created On</th>
                                                    <th>Edit</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody id="table_data">
                                                @foreach ($group_list as $key => $c)
                                                    <tr id="grouplist_{!! $c->id !!}" class="tablismall">
                                                        <td class="bnum">
                                                            <p>{!! ucwords($c->group_name) !!}</p>
                                                        </td>
                                                        <td>
                                                            <p>{!! ucwords($c->description) !!}</p>
                                                        </td>
                                                        <td>
                                                            <p>1</p>
                                                        </td>
                                                        <td>
                                                            <p>2</p>
                                                        </td>
                                                        <td>
                                                            <p>3</p>
                                                        </td>
                                                        <td>
                                                            <p>4</p>
                                                        </td>
                                                        <td>
                                                            <p>04-11-2022 , 02:30 PM</p>
                                                        </td>
                                                        <td><button class='btn btn-primary'
                                                                onclick="edit_grouplist({!! $c->id !!})">Edit</button>
                                                        </td>
                                                        <td><button class='btn btn-primary'
                                                                onclick="delete_grouplist({!! $c->id !!})">Delete</button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12 col-md-5">
                            <div class="dataTables_info" id="dataTable_info" role="status" aria-live="polite">
                                Showing 1 to 10 of entries
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-7">
                            <div class="dataTables_paginate paging_simple_numbers" id="dataTable_paginate">
                                <ul class="pagination">
                                    <li class="paginate_button page-item previous disabled" id="dataTable_previous">
                                        <a href="#" aria-controls="dataTable" data-dt-idx="0" tabindex="0"
                                            class="page-link">Previous</a>
                                    </li>
                                    <li class="paginate_button page-item active">
                                        <a href="#" aria-controls="dataTable" data-dt-idx="1" tabindex="0"
                                            class="page-link">1</a>
                                    </li>
                                    <li class="paginate_button page-item">
                                        <a href="#" aria-controls="dataTable" data-dt-idx="2" tabindex="0"
                                            class="page-link">2</a>
                                    </li>
                                    <li class="paginate_button page-item">
                                        <a href="#" aria-controls="dataTable" data-dt-idx="3" tabindex="0"
                                            class="page-link">3</a>
                                    </li>
                                    </li>
                                    <li class="paginate_button page-item next" id="dataTable_next">
                                        <a href="#" aria-controls="dataTable" data-dt-idx="7" tabindex="0"
                                            class="page-link">Next</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <script>
           
            function addNewObj() {
                $('#add_group_form').attr('action', '{!! asset('user/group_save') !!}');
                $('#updateObj').css('display', 'none');
                $('#addObj').css('display', 'block');
            }

            function get_table_row_data(group_data) {
                var tr = `<td>` + group_name.group_name + `</td>`;
                tr = tr + `<td>` + description.description + `</td>`;

                tr = tr + `<td><button class="btn btn-primary" onclick="edit_grouplist(` + group_data.id +
                    `)">Edit</button></td>`;
                tr = tr + `<td><button class="btn btn-primary" onclick="delete_grouplist(` + group_data.id +
                    `)">Delete</button></td>`;
                return tr;
            }

            function add_function(group_form, group_data) {
                console.log('res 1', group_data);
                if (group_data.status) {
                    console.log('res 2', group_data);
                    $('#closeModal').click();
                    var tr = `<tr id="asset_` + group_data.response.id + `">` + get_table_row_data(group_data.response) +
                        `</tr>`;
                    $('#table_data').prepend(tr);
                    $(group_form + " input").val("");
                    $(group_form + " textarea").val("");
                }
            }

            function update_function(group_form, group_data) {
                console.log('res 1', group_data);
                if (group_data.status) {
                    console.log('res 2 up', group_data);
                    $('#closeModal').click();
                    var tr = get_table_row_data(group_data.response);
                    $('#grouplist_' + group_data.response.id).html(tr);
                    $(group_form + " input").val("");
                    $(group_form + " textarea").val("");
                }
            }

            function set_values(data) {
                console.log('data', data);

                if (data.status) {
                    var res = data.response;
                    $('.group_name').val(res.group_name);
                    $('.description').val(res.description);
                    $('#addModal').modal('toggle');
                }
            }

            function edit_grouplist(location_id) {
                send_ajax({
                    method: 'GET',
                    action: '{!! asset('user/group_edit') !!}/' + location_id
                }, 'set_values');
                $('#add_group_form').attr('action', '{!! asset('user/group_update') !!}/' + location_id);
                $('#updateObj').css('display', 'block');
                $('#addObj').css('display', 'none');
            }

            function delete_grouplist(location_id) {
                send_ajax({
                    method: 'POST',
                    action: '{!! asset('user/group_delete') !!}/' + location_id
                }, 'delete_row')
            }

            function delete_row(data) {
                console.log('res', data);
                console.log('idddddd', 'asset_' + data.response);
                $('#grouplist_' + data.response).remove();
            }
        </script>
    @endsection