@extends('layouts.layout')
@section('title', 'class theme')
@include('scripts.setting_terms_script')
@include('scripts.settings')

@section('content')
@include('settings.setting_sidebar')
<div class="tab-content-wrap">
<div class="tab-pane" id="setClassTheme">
                <div class="mb-4">
                    <h3 class="pb-3">Class Themes</h3>
                </div>
                <form method="post" action="{{url('/setting/store-class-theme')}}" id="add-theme">
                    @csrf
                    <div class="custom-form-inner">
                        <div class="custom-form-column">
                            <div class="form-wrap style-input">
                                <label for="class_theme_name" class="style-label @if(old('class_theme_name'))) with-value @endif">Theme Name*</label>
                                <input type="text" id="class_theme_name"  class="form-control" name="class_theme_name">
                              </div>
                            <div class="form-wrap">
                                <label for="" class="custom-switch-label mb-0 pb-0">Show Date/Time Field</label>
                                <div class="toggle-button-cover mt-2">
                                    <div class="button-cover1">
                                        <div class="button r" id="button-1">
                                            <input type="hidden" name="date_time_show" value="yes">
                                            <input type="checkbox" class="checkbox" name="date_time_show" value="no" />
                                            <div class="knobs"></div>
                                            <div class="layer"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end pb-3">
                        <button type="submit" class="btn">Save Theme Type</button>
                    </div>
                </form>
                <div class="custom-hr my-3"></div>
                <div class="table-custom-wrap   ">
                    <table class="table table-striped table-bordered text-center">
                        <thead>
                            <tr>
                                <th width="250">Class Theme Name</th>
                                <th width="250" >Date/Time</th>
                                <th width="250"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- @if(!empty($setting_theme))
                            @foreach($setting_theme as $value)
                            <tr>
                                <td>{{$value['class_theme_name']}}</td>
                                <td>{{$value['show_date_time']}}</td>
                                <td>
                                    <div class="link-btn-group">
                                        <button type="button" class="btn" onclick="classthemeEditFunction()"><i class="fas fa-edit"></i></button>
                                        <button type="button" class="btn" onclick="classthemeDeleteFunction()"><i class="fas fa-trash-alt"></i></button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                            @endif -->
                        </tbody>
                    </table>
                    <div class="modal fade small-modal" id="edit_setting_class_theme" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3 class="modal-title" id="exampleModalLabel">Edit Class Theme</h3>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <!-- {{url('admin/staff/update')}} -->
                                <div class="modal-body">
                                    <form action="{{url('/setting/update-class-theme')}}" method="post" enctype="multipart/form-data" id="edit-theme">
                                        @csrf
                                        @method('PATCH')
                                        <div class="form-wrap style-input">
                                            <label for="id" class="style-label with-value">Themes Name*</label>
                                            <input type="hidden" name="id" id="id">
                                            <input type="text" class="form-control" name="class_theme_name" id="class_theme_name"  >
                                        </div>
                                        <div class="form-wrap">
                                            <label for="" class="custom-switch-label">Show Date/Time Field</label>
                                            <div class="toggle-button-cover mt-0">
                                                <div class="button-cover1">
                                                    <div class="button r" id="button-1">
                                                        <input type="hidden" name="date_time_show" value="yes">
                                                        <input type="checkbox" class="checkbox" name="date_time_show" id="date_time_show" value="no" />
                                                        <div class="knobs"></div>
                                                        <div class="layer"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-end pt-2">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary ml-3">save</button>
                                            </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<script>
    $(function () {
    
    var table = $('.table-custom-wrap .table').DataTable({
        processing: true,
        dom: '<"custom-table-info"<"custom-table-left"B><"custom-table-right"frlp>><"custom-table"t>p',
        language: {
            searchPlaceholder: "Search",
            "lengthMenu": '<select class="form-select">'+
            '<option value="10">Show: 10</option>'+
            '<option value="25">Show: 25</option>'+
            '<option value="50">Show: 50</option>'+
            '<option value="75">Show: 75</option>'+
            '<option value="-1">Show: All</option>'+
            '</select> '
        },
        searching: false,
        serverSide: true,
        buttons: [],
        ajax: "{{ route('setting.class.theme') }}",
        columns: [
            {data: 'class_theme_name', name: 'class_theme_name'},
            {data: 'show_date_time', name: 'show_date_time'},
            {data: 'InventoryActive1',
                        "orderable": false,
                        "searchable": false,
                        "render": function(data,type,row,meta) { 
                            var editButton = '<div class="link-btn-group"><button type="button" class="btn" onclick="classthemeEditFunction(' + row.id + ')"><i class="fas fa-edit"></i></button>';
                          var deleteButton = '<button type="button" class="btn" onclick="classthemeDeleteFunction(' + row.id + ')"><i class="fas fa-trash-alt"></i></button></div>';
                            return editButton + deleteButton;
                        }
                    }
        ],
         fnDrawCallback: function (oSettings, json) {
            console.log("scroll");
           $("html, body").animate(
                {
                    scrollTop: $(".table-custom-wrap").offset().top,
                },
                "slow"
            );
            if($('.table-custom-wrap').find(".dataTables_paginate").eq(0).find('span').find("a").length > 1){
                $('.table-custom-wrap').find(".dataTables_paginate").show();
                }else{
                $('.table-custom-wrap').find(".dataTables_paginate").hide();
                }
        },
    });
    
  });
</script>
<script src="{{ url('admin/js/setting.js') }}"></script>
{!! JsValidator::formRequest('App\Http\Requests\SettingClassTheme','#add-theme') !!}
{!! JsValidator::formRequest('App\Http\Requests\SettingUpdateClassTheme','#edit-theme') !!}
@endsection