@extends('main')

@section('css')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
@endsection

@section('content')
<div class="content-wrapper">

    <!-- Main content -->
    <section class="content">
      @if(session('message'))
      <div class="row">
        <div class="col-12">
          <div class="form-group mt-3">
            <div class="alert alert-success" role="alert">
                {{ session('message') }}
            </div>
        </div>
        </div>
      </div>
       @endif
      <!-- /.row -->
      <div class="row">
        <div class="col-12">
          <div class="card card-primary mt-3">
            <div class="card-header"></div>
            <div class="card-body">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <a class="nav-link active" id="welcome-tab" data-toggle="tab" href="#welcome" role="tab" aria-controls="welcome" aria-selected="true">Welcome</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="display-tab" data-toggle="tab" href="#display" role="tab" aria-controls="display" aria-selected="true">Display</a>
                  </li>


              </ul>
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active text-center" id="welcome" role="tabpanel" aria-labelledby="welcome-tab">

                        <div class="row">
                          <div class="col-12 mt-3">
                            <a href="{{ route('button.create') }}" class="btn btn-primary float-right">Add New Button</a>
                          </div>
                          <div class="col-12 mt-3">
                            <table id="example2" class="table table-bordered table-hover">
                              <thead>
                              <tr>
                                <th>Button</th>
                                <th>Link</th>
                                <th>Options</th>
                              </tr>
                              </thead>
                              <tbody>
                              @if(!empty($button))
                              @foreach($button as $b)
                              <tr>
                                <td>{{ $b->nama }}</td>
                                <td>{{ $b->link }}</td>
                                <td class="text-center">
                                    <a href="/admin/dashboard/chat/edit/{{$b->id}}" class="btn btn-warning btn-sm"  title="Edit Chat Button"><i class="fas fa-edit"></i></a>
                                  <a href="/admin/dashboard/chat/delete/{{$b->id}}" class="btn btn-danger btn-sm" title="Delete Chat Button"><i class="fas fa-trash" onclick="return confirm('Anda Ingin Menghapus Chat Button ?');"></i></a>
                                </td>
                              </tr>
                             @endforeach
                             @endif
                              </tbody>
                            </table>
                          </div>
                        </div>

                </div>
                <div class="tab-pane fade" id="display" role="tabpanel" aria-labelledby="display-tab">
                    <form role="form" method="POST" action="{{ route('displaychat.update') }}" enctype="multipart/form-data">
                      {{csrf_field()}}
                        <div class="form-group mt-3">
                          <label for="background">Background Color</label>
                          <input type="color" name="background_popup" class="form-control" id="background_popup" placeholder="Background Code" value="{{ $display->background_popup }}">
                        </div>
                        <div class="form-group">
                          <label for="background">Background Button</label>
                          <input type="color" name="background_button" class="form-control" id="background_button" placeholder="Background Code" value="{{ $display->background_button }}">
                        </div>
                        <div class="form-group">
                          <label for="background">Big Title</label>
                          <input type="text" name="big_title" class="form-control" id="big_title" placeholder="big title" value="{{ $display->big_title }}">
                        </div>
                        <div class="form-group">
                          <label for="background">Small Title</label>
                          <input type="text" name="small_title" class="form-control" id="small_title" placeholder="small title" value="{{ $display->small_title }}">
                        </div>
                        <div class="form-group">
                            <label for="background">Close Button</label>
                            <input type="text" name="close_button" class="form-control" id="close_button" placeholder="close button" value="{{ $display->close_button }}">
                        </div>
                        <div class="form-group">
                            <label for="background">Close Button Background</label>
                            <input type="color" name="close_button_background" class="form-control" id="close_button_background" placeholder="close button background" value="{{ $display->close_button_background }}">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                  </div>


              </div>
            </div>
          </div>
        </div>
      </div>
    <!-- /.content -->
    </section>
  </div>
@endsection

@section('js')
<!-- DataTables -->
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>


<script>
$(document).ready(function() {
    $('#example2').DataTable({
      "ordering": false
    })
})
</script>

@endsection