@extends('layouts.app')

@section('css')
    <link href="./assets/vendor/datatables/css/jquery.dataTables.min.css" rel="stylesheet">
@endsection
@section('content')
    <div class="container-fluid">

        <!-- row -->


        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Holdings</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="example3" class="display" style="min-width: 845px">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Holding Users</th>
                                        <th>Stok</th>
                                        <th>Q1</th>
                                        <th>Q2</th>
                                        <th>Q3</th>
                                        <th>Q4</th>
                                        <th>Q5</th>
                                        <th>Q6</th>
                                        <th>Q7</th>
                                        <th>Q8</th>
                                        <th>Q9</th>
                                        <th>Q10</th>
                                        <th>Q11</th>
                                        <th>Q12</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script src="./assets/vendor/datatables/js/jquery.dataTables.min.js"></script>
    {{-- <script src="./assets/js/plugins-init/datatables.init.js"></script> --}}
    <script>
        var token = sessionStorage.getItem('token');
        var url = "{{ env('APP_URL') }}";

        function displayData() {

            $.ajax({
                type: "GET",
                url: url + "/list-holdings",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function(msg) {
                    console.log(msg);
                    if (msg.success) {
                        var json = msg.data.holdings;
                        var row = '';
                        $.each(json, function(index, obj) {
                            // console.log(obj);
                            row += '<tr><td> ' + obj.id + ' </td> <td>' + obj.holdings_name +
                                '</td><td> ' + obj.stok +
                                ' </td><td> ' + obj.jan +
                                ' </td><td> ' + obj.feb +
                                ' </td><td> ' + obj.mar +
                                ' </td><td> ' + obj.Apr +
                                ' </td><td> ' + obj.May +
                                ' </td><td> ' + obj.Jun +
                                ' </td><td> ' + obj.Jul +
                                ' </td><td> ' + obj.Aug +
                                ' </td><td> ' + obj.Sep +
                                ' </td><td> ' + obj.Oct +
                                ' </td><td> ' + obj.Nov +
                                ' </td><td> ' + obj.Dec +
                                ' </td> <td><div class="d-flex"><a href="' + url +
                                '/edit-holdings-view/' + obj.id +
                                '" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a><a data-id="' +
                                obj.id +
                                '" class="btn btn-danger shadow btn-xs sharp delete-holdings"><i class="fa fa-trash"></i></a></div></td> </tr>';
                        });
                        $(".display tbody").html(row);
                        $('#example3').DataTable();
                    } else if (msg.message == 'User is not Authenticated.') {
                        window.location = url + "/login-view";
                    } else {
                        $('#response').html("<div class='alert alert-danger'>" + msg.message +
                            "</div>");
                    }
                }
            });

        }

        $("body").on("click", "#example3 .delete-holdings", function() {
            var id = $(this).attr("data-id");
            $.ajax({
                type: "GET",
                url: url + "/delete-holdings/" + id,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    if (msg.success) {
                        $('#response').html("<div class='alert alert-success'>" + msg.message +
                            "</div>");
                            displayData();
                            $('#example3').DataTable();
                    } else {
                        $('#response').html("<div class='alert alert-danger'>" + msg.message +
                            "</div>");
                    }
                }
            });
        });

        $(document).ready(function() {
            CheckSession();
            displayData();
        });
    </script>
@endsection