@extends('admin.layouts.master')

@section('title')
    Custom Theme
@stop

@section('style')
    <link rel="stylesheet" type="text/css" href="{{asset('/css/loader.css')}}">

    <style>
        tr.group,
        tr.group:hover {
            background-color: #ddd !important;
        }
        .form-sec{width:400px; background:#ccc; padding:15px;width: 400px;
        background: #f8f9fa;padding: 15px;box-shadow: 0 0 4px #ccc;}
        /*Disabled href*/
        /*
        .btn-disabled,
        .btn-disabled[disabled] {
          opacity: .4;
          cursor: default !important;
          pointer-events: none;
        */
        .modal {
           /*position: relative;*/
           z-index: 9999;
           vertical-align: middle;
        }
        .modal-content textarea.form-control {
            max-width: 100%;
        }
        textarea {
          resize: vertical;
        }
        table.dataTable th.selectall-checkbox,
        table.dataTable td.selectall-checkbox {
          cursor: pointer;
          outline: none;
          text-align: center;
        }
        /*filter on top*/
        tfoot {
            display: table-header-group;
        }
        thead {
            display: table-row-group;
        }
        /*hide show entries*/
        .dataTables_length {
            display: none;
        }
        .dataTables_filter {
            display: none;
        }
        .highlight {
          background-color: #79D3CE;
        }
        .highlight-teacher {
          background-color: #CCB5D3;
        }
        .highlight2 {
          background-color: #93ABB0;
        }
        .font-sizee {
          font-size: 16px;
          font-weight: bold;
          text-align: center;
        }
        .font-center {
          text-align: center;
        }
    </style>
@stop

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <span class="fa fa-gear"></span> Custom Theme
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-gear"></i> Admin Panel</a></li>
                <li class="active">Custom Theme</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content" style=" padding-bottom: 10%;">
            <div class="page-header">
                <a href="{{route('sites')}}" class="btn btn-primary"><i class="fa fa-backward"></i> Back</a> {{--<a href="{{route('students.calendar', $room[0]->student_id)}}" class="btn btn-success"><i class="fa fa-calendar"></i> Calendar View</a>--}}
            </div>

            <div id="overlay">
                <div class="cv-spinner">
                    <span class="spinner"></span>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group has-feedback @if($errors->has('themes')) has-error @endif">
                    <label for="themes" class="control-label">Theme</label>
                    <select id="themes" name="themes" class="form-control status">
                        <option value="" >Select Theme</option>
                        @foreach($thems as $key => $thm)
                            <option value="{{$thm->id}}" selected="selected">{{$thm->scheme}} </option>
                        @endforeach
                    </select>
                    @if($errors->has('themes')) <span class="help-block">{{$errors->first('themes')}}</span> @endif
                </div>
                <button id="btnOk" name="btnOk" class="btn btn-success"><i class="fa fa-check-o"></i> Apply Theme</button>
            </div>

            <div class="col-md-6">
                    <table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
                        <thead>
                          <tr>
                            {{--<th style="width: 40px;">No.</th>--}}
                            <th style="width: 210px;">Skin Class</th>
                            <th style="width: 50px;"></th>
                          </tr>
                        </thead>
                        <tbody>
                            {{--@foreach($thems as $key => $thm)
                                <tr>
                                    <td>{{$thm->id}}</td>
                                    <td><code>{{$thm->scheme}}</code></td>
                                    <td><a href="#" data-skin="skin-green" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
                                </tr>
                            @endforeach--}}
                          <tr>
                            <td><code>skin-blue</code></td>
                            <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-blue-light</code></td>
                            <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-yellow</code></td>
                            <td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-yellow-light</code></td>
                            <td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-green</code></td>
                            <td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-green-light</code></td>
                            <td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-purple</code></td>
                            <td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-purple-light</code></td>
                            <td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-red</code></td>
                            <td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-red-light</code></td>
                            <td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-black</code></td>
                            <td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                          <tr>
                            <td><code>skin-black-light</code></td>
                            <td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
                          </tr>
                        </tbody>
                    </table>
                </div>


            <div style="height: 10px;"></div>

            @if(Session('info'))
                <div class="row" style="margin-bottom: 50px;">
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <div class="tem alert alert-success navbar-fixed-bottom"><span class="glyphicon glyphicon-ok-circle"></span> {{Session('info')}}</div>
                    </div>
                </div>
            @endif

        </section>

       <div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style=" padding-right: 0px;background-color: rgba(4, 4, 4, 0.8);">
          <div class="modal-dialog modal-lg" style="top: 20%;width: 70%;text-align: center;">
            <div class="modal-content" style="border-radius: 0px;border: none;top: 40%;">
              <div class="modal-body" id="modBody" style="background-color: #E3E1A1;color: white;"> {{--0f8845--}}
                <h3 id="h22"></h3>
                <h5 id="h44"></h5>
              </div>
            </div>
          </div>
        </div>

    </div>
@stop

@section('script')

<script>
    $(document).ready(function() {
        //$('#overlay').show();

        $('#btnOk').on('click', function() {
            var tid   = $('#themes').find('option:selected').val();
            $("#overlay").fadeIn(300);
            $.ajax({
                url:"{{route('settings.apply-theme')}}",
                method: 'post',
                headers:  {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data:{
                  tid: tid
                },
                dataType:'json',
                success:function(data) {
                    console.log(data);
                    location.reload();
                },
                complete: function() {
                   //$('#wait').hide();
                   setTimeout(function(){
                   $("#overlay").fadeOut(300);
                   },500);
                },
                error: function (jqXHR, exception) {
                    console.log(jqXHR);
                }
            });
        });

    });
</script>

<script type="text/javascript">
    function notifPopup(title,body) {
        $('#h22').text(title);
        $('#h44').text(body);
        $('.bs-modal-lg').modal('toggle');
        setTimeout(function() {$('.bs-modal-lg').modal('hide');}, 10000);
    }
</script>

@stop