@extends('layouts.front.masterapp')
@section('content')
@section('title', 'Instrument')
@section('content')
<section class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body px-3 py-4-5">
                <div class="row">
                    <div class="col-md-12">
                        <h6 class="text-muted font-semibold">Data Instrument</h6>
                       
                        <button type="button" class="btn btn-outline-primary block" data-bs-toggle="modal" data-bs-target="#tambah">
                            Tambah
                        </button>

                        <!--Basic Modal -->
                        <div class="modal fade text-left" id="tambah" tabindex="-1" role="dialog"
                            aria-labelledby="myModalLabel1" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="myModalLabel1">Tambah Instrument</h5>
                                        <button type="button" class="close rounded-pill" data-bs-dismiss="modal"
                                            aria-label="Close">
                                            <i data-feather="x"></i>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ route('instrument.store') }}" method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="basicInput">Instrument</label>

                                                        <textarea id="w3review" name="instrument" rows="4" class="form-control" placeholder="Instrument"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <button type="submit" class="btn btn-success">Simpan</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                       

                        <table class="table table-lg">
                            <thead>
                                <th>No</th>
                                <th>Instrument</th>
                                <th>Aksi</th>
                            </thead>
                            <tbody>
                                
                                </tr> 
                                @foreach ($instrument as $item)
                                    @php
                                        $token = Str::random(10);
                                    @endphp
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $item->instrument }}</td>
                                      
                                        <td>
                                           
                                            <div class="btn-group">
                                           
                                                <button onclick="edit('{{ route('instrument.edit', ['instrument' => encrypt($item->id)]) }}', 'Instrument')" class="btn btn-warning btn-sm">Edit</button>
                                           
                                                <button onclick="destroy('{{ route('instrument.destroy', ['instrument' => encrypt($item->id)]) }}')" class="btn btn-danger btn-sm">Hapus</button>
                                           
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="modal fade text-left" id="edit-form" tabindex="-1" role="dialog"
                            aria-labelledby="modal-edit-label" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="modal-edit-label">Edit Periode</h5>
                                        <button type="button" class="close rounded-pill" data-bs-dismiss="modal"
                                            aria-label="Close">
                                            <i data-feather="x"></i>
                                        </button>
                                    </div>
                                    <div class="modal-body" id="edit-form-body">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('js')
{{-- <script src="{{URL::to('template/assets/js/ckeditor.js')}}"></script> --}}
<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
<script>
    function remove(element){
        $(element).remove();
    }
    function edit(url, title){
        var token = "{{ csrf_token() }}";
        $('#edit-form').modal('toggle');
        $('#edit-form-body').html('Loading...');
        $('#modal-edit-label').html(title);
        var request = $.ajax({
            url : url,
            type : "GET",
            dataType : "html",
            data : {_token: token},
            success: function(data){
                $('#edit-form-body').html(data);
            }
        })
    }



    function destroy(url){
        Swal.fire({
        title: 'Apakah Anda Yakin?',
        text: "Anda akan menghapus data ini!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Ya'
        }).then((result) => {
            if (result.isConfirmed) {
                var token = "{{ csrf_token() }}";
                var request = $.ajax({
                    url : url,
                    type : "DELETE",
                    dataType : "html",
                    data : {_token: token, _method: 'PUT'},
                    success: function(data){
                        Swal.fire({
                            position: 'top-end',
                            icon: 'success',
                            title: 'Berhasil menghapus data',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        location.reload();
                },
                error: function(data){
                    Swal.fire({
                        position: 'top-end',
                        icon: 'error',
                        title: 'Gagal menghapus data',
                        showConfirmButton: false,
                        timer: 1500
                    })
                }
            })
            }
        })
    }


</script>
@endpush
