@extends('admin.layout.app')

@section('main_title', 'Tixstock Log')
@section('title', 'Tixstock Log')
@section('sub_title', 'Control Panel')

@push('styles')
<link href="{{ asset('public/assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<!-- datatables-->
<link href="{{ asset('public/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
<!--<link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet"/>-->
<link href="{{ asset('public/assets/libs/datatables.net-bs5/css/editor.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('public/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css" rel="stylesheet" type="text/css" />
<link href="{{ asset('public/assets/libs/x-editable/bootstrap-editable/css/bootstrap-editable.css') }}" rel="stylesheet" type="text/css" />
<!-- Loading button css -->
<link href="{{ asset('public/assets/libs/ladda/ladda.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('public/assets/libs/ladda/ladda-themeless.min.css') }}" rel="stylesheet" type="text/css" />


@endpush

<!-- start content -->
@section('content')
<div class="row">
    <div class="col-12">
        @if($uniqueLogIds->count() > 0)
        <div class="card filter_box">
            <form id="filter">
                <div class="card-body">
                   
                    <div class="row mb-2">
                        <div class="col-sm-4">
                            <div class="text-sm-end mt-3 mt-md-0 form-group">
                                <select class="form-control select2" id="batch_id">
                                    <option value="">Select Batch Id</option>
                                    @foreach($uniqueLogIds as $batch)
                                    <option value="{{$batch->batch_id}}">{{$batch->batch_id}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-4" style="text-align:center">
                             
                            <button type="button" class="btn btn-primary filter waves-effect waves-light mb-2 me-4 fw-bold" id="search">Search
                            <div class="search_loader spinner-border spinner-border-sm m-0" style="display:none" role="status"></div>
                            </button>
                             <button type="reset" class="btn btn-primary mb-2 me-4 fw-bold">Reset
                            </button>
                        </div> 
                        <div class="col-sm-4" style="text-align:right">
                            <a type="button" href="{{route('failedjobs.index')}}" class="btn btn-primary mb-2 me-4 fw-bold">Monitor Failed jobs</a>
                        </div>
                    </div>
            
                    <div class="row mb-2">
                        <div class="progress mb-0" style="height: 2px;">
                            <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div> <!-- end card-body-->
            </form>
        </div>
        @endif
        <div class="card">   
            <div class="card-body">
                <div class="table-responsive">
                    <table id="tixstocklog_table" class="table m-0 table-centered no-wrap table-striped dt-responsive w-100">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Batch Id</th>
                                <th>Event Name</th>
                                <th>Event Date</th>
                                <th>Created At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col -->
</div>
<div id="advance-modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="standard-modalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-full-width">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="advance-modalLabel">Tixstock Log Details</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <hr/>
                    <div class="modal-body">
                        <form id="modal_form">
                            <input type="hidden" name="id" id="id" value="" />
                            <input type="hidden" name="method" id="method" value="modal_save" />
                            <div class="dynamic_content"></div>
                        </form>
                    </div>
                    <!--<div class="modal-footer">-->
                    <!--    <button type="button" class="btn btn-success waves-effect waves-light m-1" id="modal_save"><i class="fe-check-circle me-1"></i> Save Changes</button>-->
                    <!--    <button type="button" id="close_modal" class="btn btn-dark waves-effect waves-light m-1" data-bs-dismiss="modal"><i class="fe-x me-1"></i> Close</button>-->
                    <!--</div>-->
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
@endsection


@push('scripts')
        <!-- datatables js -->
        <script src="{{ asset('public/assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('public/assets/libs/select2/js/select2.min.js') }}"></script>
        <script src="{{ asset('public/assets/libs/datatables.net/js/dataTables.editor.min.js') }}"></script>
        <script src="{{ asset('public/assets/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('public/assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('public/assets/libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js') }}"></script>
        <script src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
        <script src="{{ asset('public/assets/libs/x-editable/bootstrap-editable/js/bootstrap-editable.min.js') }}"></script>
        <!-- Sweet Alerts js -->
        <script src="{{ asset('public/assets/libs/sweetalert2/sweetalert2.all.min.js') }}"></script>
        <!-- tool tip js -->
        <script src="{{ asset('public/assets/libs/tippy.js/tippy.all.min.js') }}"></script>
        <!-- Loading buttons js -->
        <script src="{{ asset('public/assets/libs/ladda/spin.min.js') }}"></script>
        <script src="{{ asset('public/assets/libs/ladda/ladda.min.js') }}"></script>
        <script>
            
            
            $(document).ready(function(){
                $(".select2").select2();
                var groupColumn = 1;
                var user_datatable = $('#tixstocklog_table').DataTable({
                    'processing': true,
                    'serverSide': true,
                    'serverMethod': 'get',
                    'ajax': {
                       'url':"{{route('tixstocklog.data')}}",
                       'data': function(d) {
                               d.batch_id = $("#batch_id").val();
                        }
                    },
                drawCallback: function() {
                    $(".dataTables_paginate > .pagination").addClass("pagination-rounded");
                    tippy('[data-plugin="tippy"]');
                    var api = this.api();
                    var rows = api.rows({ page: 'current' }).nodes();
                    var last = null;
             
                    api.column(groupColumn, { page: 'current' }).data().each(function (group, i) {
                        if (last !== group) {
                            $(rows)
                                .eq(i)
                                .before(
                                    '<tr class="group alert-danger"><td style = "text-align:center" class="alert-danger" colspan="5">Batch Id : ' +
                                        group +
                                        '</td></tr>'
                                );
         
                            last = group;
                        }
                    });
                },
                "columnDefs": [{
                        "targets": [ 0,1 ],
                        "visible": false,
                        "searchable": false
                        }],
                'columns': [{
                        className: 'dt-control',
                        orderable: false,
                        data: null,
                        defaultContent: ''
                },
                { data: 'batch_id'},
                { data: 'name' },
                { data: 'event_date' },
                { data: 'created_at' },
                { data: 'actions',name: 'actions', orderable: false, searchable: false },
                    //  { data: 'edit' },
                ],
                'order': [[4, 'desc']],
                "rowGroup": {
                    "dataSrc": 'batch_id',
                    "startRender": function (rows, group) {
                    // Customize the appearance of the grouped row
                    return $('<tr/>')
                        .append('<td colspan="5" class="group-row">' + group + '</td>');
                    }
                },
               });
                $('#tixstocklog_table tbody').on('click', 'tr.group', function () {
                    var currentOrder = user_datatable.order()[0];
                    if (currentOrder[1] === 1 && currentOrder[1] === 'asc') {
                        user_datatable.order([1, 'desc']).draw();
                    } else {
                        user_datatable.order([1, 'asc']).draw();
                    }
                });
                
                $(".filter").on('click',function(){
                    user_datatable.draw();
                })
            });
            
            
              $('#tixstocklog_table tbody').on('click', '.tixstock_log', function (e) {
                    e.preventDefault();  
                    var id = $(this).attr("id");
                    var event_name = $(this).attr("event_name");
                    var me = $(this);
                    var la = Ladda.create(this);
                    la.start();

                    $.ajax({
                        url: '{{route("fetch.event.tixstock.log")}}',
                        type: 'post',
                        data: {'id':id,'_token':"{{csrf_token()}}"},
                        success: function(response){
                            la.stop();
                            me.removeClass('ladda-button');
                            $('#advance-modal').modal('show');
                            $('#advance-modal').find('#advance-modalLabel').text(event_name);
                            $('#advance-modal').find('#modal_form').find('#id').val(response.id);
                            $('#advance-modal').find('.dynamic_content').html(response.html);
                            tippy('[data-plugin="tippy"]');
                            
                            var parent = $('#standard-modal').find('.modal-body');
                            $.fn.editableform.buttons = '',
                            
                            $.fn.editable.defaults.mode = 'inline';
                            $(parent).find(".inline-category").editable({
                                display:function(value) {
                                     $(this).html('<i class="mdi mdi-adjust me-1"></i>'+value + ' (category)');
                                 }
                            });
                            $(parent).find(".inline-section").editable({
                                 display:function(value) {
                                     $(this).html('<i class="mdi mdi-menu-right-outline me-1"></i>'+value + ' (section)');
                                 }
                            });
                            
                        }
                    });
                    
                });
    </script>

@endpush