@extends('internal.layouts.index')
@section('content')
<style>
    #summernote {
        height: 300px; /* You can change this to whatever height you prefer */
    }
</style>
<!-- /.row -->
<!-- Main row -->
<div class="row">
    <!-- Left col -->
    <section class="col-lg-12 connectedSortable">
    <!-- Custom tabs (Charts with tabs)-->
    <div class="card">
        <div class="card-header">
        <h3 class="card-title">
            <h2>Deskripsi Testimoni<h2>
        </h3>
        <div class="card-tools">
            <ul class="nav nav-pills ml-auto">
        </div>
        </div><!-- /.card-header -->
        <div class="card-body">
        <div class="tab-content p-0">
            <div class="row">
                <textarea name="default" id="default"> {{ $deskripsi }} </textarea>
            </div>
            <div class="row">
            <button class="btn btn-success" style="margin: 10px;" id="btn-deskripsi-summernote"> <i class="fas fa-pencil-alt"></i> Update</button>
            </div>
        </div>
        </div><!-- /.card-body -->
    </div>
    </section>
</div>

<div class="row">
    <!-- Left col -->
    <section class="col-lg-12 connectedSortable">
    <!-- Custom tabs (Charts with tabs)-->
    <div class="card">
        <div class="card-header">
        <h3 class="card-title">
            <h2>Testimoni<h2>
        </h3>
        <div class="card-tools">
            <ul class="nav nav-pills ml-auto">
        </div>
        </div><!-- /.card-header -->
        <div class="card-body">
        <div class="tab-content p-0">
            <div class="row">
                <div class="col-md-3">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="margin:10px"> <i class="fas fa-plus-circle"></i> Tambah Testimoni</button>
                </div>
            </div>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>User Testimoni</th>
                        <th>Testimoni</th>
                        <th>Position</th>
                        <th>Foto</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($result as $k => $v)
                        <tr>
                            <td> {{ $loop->iteration }}</td>
                            <td> {{ $v->user_testimoni }}</td>
                            <td> {!! $v->testimoni  !!}</td>
                            <td> {{ $v->title_testimoni  }}</td>
                            <td> 
                                
                                @if(empty($v->foto)) 
                                    -
                                @else
                                 <img src="{{ asset('uploads/'.$v->foto) }}" class="testimonial-img" alt="" height="80px" width="80px"/>
                                @endif
                            </td>
                            <td>
                                <button class="btn btn-warning btn-sm" onclick="return editDataTestimoni(`{{ $v->id_m_testimoni }}`)" data-toggle="modal" data-target="#editData"> <i class="fas fa-edit"></i></button>
                                <button class="btn btn-danger btn-sm" onclick="return deleteData(`{{ $v->id_m_testimoni }}`)"> <i class="fas fa-trash-alt"></i></button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        </div><!-- /.card-body -->
    </div>
    </section>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Tambah Testimoni</h4>
      </div>
      <div class="modal-body">
        <div class="row" style="margin:5px">
            <div class="col-md-4">
                <label for="">Nama Testimoni</label>
            </div>
            <div class="col-md-8">
                <input type="text" class="form-control" name="" id="nama_testimoni" placeholder="" value="">
            </div>
        </div>

        <div class="row" style="margin:5px">
            <div class="col-md-4">
                <label for="">Testimoni</label>
            </div>
            <div class="col-md-8">
                <textarea name="" id="testimoni" class="form-control" style="height: 100px;"></textarea>
            </div>
        </div>

        <div class="row" style="margin:5px">
            <div class="col-md-4">
                <label for="">Title Testimoni</label>
            </div>
            <div class="col-md-8">
                <input type="text" class="form-control" name="" id="title_testimoni" placeholder="">
            </div>
        </div>

        <div class="row" style="margin:5px">
            <div class="col-md-4">
                <label for="">Foto</label>
            </div>
            <div class="col-md-8">
                <input type="file" class="form-control" name="" id="foto_testimoni" placeholder="">
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="submit-testimoni">Submit</button>
      </div>
    </div>

  </div>
</div>

<!-- Modal -->
<div id="editData" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit Testimoni</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <label for="pwd">User Testimoni</label>
            <input type="hidden" class="form-control" id="user-testimoni-id">
            <input type="text" class="form-control" id="user-testimoni-edit">
        </div>
        <div class="form-group">
            <label for="pwd">Testimoni</label>
            <Textarea id="testimoni-edit" class="form-control"></Textarea>
        </div>

        <div class="form-group">
            <label for="pwd">Title Testimoni</label>
            <input type="text" class="form-control" id="title-testimoni-edit">
       </div>

       <div class="row" style="margin:5px">
            <div class="col-md-4">
                <label for="">Foto</label>
            </div>
            <div class="col-md-8">
                <input type="file" class="form-control" name="" id="foto_testimoni_edit" placeholder="">
            </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="update-testimoni">Submit</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.3.0/tinymce.min.js"></script>
<!-- /.row (main row) -->
@endsection


@section('internal.layouts.script')
<script>

    
    function editDataTestimoni($id)
    {
        $.ajax({
            url: "{{ route('adm.edit.testimoni') }}",
            type: "POST",
            dataType: "JSON",
            data: {
                id: $id,
                _token: "{{ csrf_token() }}"
            },
            success: function(data){
                $('#user-testimoni-id').val(data.id_m_testimoni);
                $('#user-testimoni-edit').val(data.user_testimoni);
                $('#testimoni-edit').val(data.testimoni);
                $('#title-testimoni-edit').val(data.title_testimoni);
                $('#modal-edit-testimoni').modal('show');
            },
            error: function (jqXHR, textStatus, errorThrown){
                alert('Error get data from ajax');
            }
        })
    }

    $('#submit-testimoni').click(function(){
        let formData = new FormData();
        formData.append('nama_testimoni', $('#nama_testimoni').val());
        formData.append('title_testimoni', $('#title_testimoni').val());
        formData.append('testimoni', $('#testimoni').val());
        formData.append('foto_testimoni', $('#foto_testimoni')[0].files[0]);
        formData.append('_token', "{{ csrf_token() }}");

        $.ajax({
            url: `{{ route('adm.testimoni.store') }}`,
            data: formData,
            type: 'POST',
            processData: false,  // Important for file uploads
            contentType: false,  // Important for file uploads
            success: function(response){
                if(response.status){
                    swal({
                        title: "Good job!",
                        text: "Data Berhasil Ditambahkan",
                        icon: "success",
                        button: "",
                    });
                    setTimeout(function() {
                        location.reload();  // Reload the page after 2 seconds (2000ms)
                    }, 1000);  // Adjust the delay as needed
                }
            }
        });
    });


    $('#update-testimoni').click(function(){
            let formData = new FormData();
            formData.append('id', $('#user-testimoni-id').val());
            formData.append('nama_testimoni', $('#user-testimoni-edit').val());
            formData.append('title_testimoni', $('#title-testimoni-edit').val());
            formData.append('testimoni', $('#testimoni-edit').val());
            formData.append('foto_testimoni', $('#foto_testimoni_edit')[0].files[0]);
            formData.append('_token', "{{ csrf_token() }}");

        $.ajax({
            url : `{{ route('adm.testimoni.update.testimoni') }}`,
            data: formData,
            type: 'POST',
            processData: false,  // Important for file uploads
            contentType: false,  // Important for file uploads
            success:function(response){
                if(response.status){
                    swal({
                        title: "Good job!",
                        text: "Data Berhasil Diupdate",
                        icon: "success",
                        button: "",
                    });
                    setTimeout(function() {
                        location.reload();  // Reload the page after 2 seconds (2000ms)
                    }, 1000);  // Adjust the delay as needed
                }
            }
        })
    })


    function deleteData($id){
        
        swal({
          title: "",
          text: "Apakah ingin menghapus data ini ?",
          icon: "warning",
          buttons: true,
          dangerMode: true,
        })
        .then((willDelete) => {
          if (willDelete) {
            $.ajax({
                url : `{{ route('adm.testimoni.delete') }}`,
                type : 'POST',
                data : {
                    id : $id,
                    _token : '{{ csrf_token() }}'
                },
                success : function(data){
                    if(data.status){
                        swal({
                            title: "Good job!",
                            text: "Data Berhasil Di Hapus",
                            icon: "success",
                        });
                        setTimeout(function() {
                            location.reload();  // Reload the page after 2 seconds (2000ms)
                        }, 1000);  // Adjust the delay as needed
                    }
                }
            })
          }
        });
    };

    $('#btn-deskripsi-summernote').click(function(){
        var content = tinymce.get('default').getContent(); // Get the content from the editor
        $.ajax({
            url : `{{ route('adm.testimoni.update') }}`,
            type : 'POST',
            data : {
                id : content,
                _token : '{{ csrf_token() }}'
            },
            success : function(data){
                if(data.status){
                    swal({
                        title: "Good job!",
                        text: "Data Berhasil Diupdate",
                        icon: "success",
                    });
                    setTimeout(function() {
                        location.reload();  // Reload the page after 2 seconds (2000ms)
                    }, 1000);
                }
            }
        })  
    });

    tinymce.init({
        selector: "#default",
        plugins: [
            "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
            "help", "image", "insertdatetime", "link", "lists", "media",
            "preview", "searchreplace", "table", "visualblocks",
        ],
        force_br_newlines: true,
        force_p_newlines: false,
        forced_root_block: 'p', // Use 'p' or 'div' for block elements, no need for an object
        toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        content_style: "p { margin: 5px 0; }", // You can apply your margin style here
    });

</script>
@endsection