@extends('layouts.admin')

@section('title') Jobs @endsection

@section('page_title') Jobs @endsection

@section('content')

@push('page_style')
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
@endpush

    <!-- Form section start -->
    <section id="multiple-column-form">
    <div class="row breadcrumbs-top">
                <div class="col-12">
                    <div class="user_nav">
                        <div class="breadcrumb-wrapper">
                        <h5>Jobs </h5>
                                <br>

                                <div class="form-group sellertypeFilter">
                                  <label>Jobs filter by :</label>
                                  <select id='is_succeed' class="form-control" style="width: 200px">
                                      <option value="1">Succeeded</option>
                                      <option value="2" selected="">Failed
                                      </option>
                                  </select>
                              </div>
                              <br>
                        </div>
                    </div>
                </div>     
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table id="jobsTable" class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>UUID</th>
                        <th>Name</th>
                        <th>Exception</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
        {{-- <div class="row">
            <div class="col-12">
                <div class="card">
                        <div class="card-body" id="jobList">
                            @foreach($jobs as $data)
                            <div class="row">
                                <div style="width: 100px" class="col-md-6 col-12">
                                    <div class="form-group">
                                        @php
                                        $dataModel = json_decode( $data->payload, true);
                                        @endphp
                                        <label class="form-label" style="width: 800%" for="setting_key"><span style="margin-right: 20px;"><b>{{ !empty($data) ? $data->id : '' }}.</span>{{ isset($data->uuid) ? $data->uuid : (isset($dataModel['uuid']) ? $dataModel['uuid'] : '') }}<b></label>
                                    </div>
                                </div>           
                            </div>
                            @endforeach
                        </div>
                </div>
            </div>
        </div> --}}
    </section>
    <!-- Form section end -->

@endsection

@push('page_script')

    @include('include.dataTableScripts')
    <script src="{{ asset('js/pages/jobs/index.js') }}"></script>

    {{-- <script>
    $(document).ready(function()
    {
        $('#is_succeed').on('change',function()
        {
            var val =$(this).val();
            $.ajax({
                url : site_url+'/show-jobs',
                type: "GET",
                data: {
                    jobStatus : val,
                    '_token' : $('meta[name="csrf-token"]').attr('content'),
                },
                success: function(response) {
                    var iterate = 1;
                    response.forEach(function(job) {
                    var payload = JSON.parse(job.payload); 
                    console.log(payload)
                    var uuid = payload.uuid;
                    if(iterate == 1)
                    {
                        $('#jobList').html('');
                    }
                    $('#jobList').append('<b>'+job.id+'.   '+uuid+'<b>');
                    $('#jobList').append('<br><br>');
                    iterate++;
                });
                }
            });

        })
    })
    </script> --}}
@endpush