@extends('backoffice.layouts.main')

@section('title', 'Skrining Video')

@section('content')
<!-- Content -->

<h4 class="fw-bold py-3 mb-4">Skrining Video</h4>

<!-- Basic Bootstrap Table -->
<div class="card">
    <div class="card-header">
        <h5>Daftar Skrining Video</h5>
    </div>

    <div class="card-body">
        <table class="table data-table">
            <thead>
                <tr>
                    <th>Label</th>
                    <th>Urutan</th>
                    <th>Dibuat Pada</th>
                    <th>Diubah Pada</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody class="table-border-bottom-0">
                @foreach ($data as $item)
                <tr>
                    <td>{{$item->judul}}</td>
                    <td>{{$item->urutan == 1 ? 'Awal Skrinig' : 'Akhir Skrining'}}</td>
                    <td>{{$item->created_at}}</td>
                    <td>{{$item->updated_at}}</td>
                    <td class="d-flex">
                        <button data-bs-toggle="modal" data-bs-target="#editModal-{{$item->uuid}}"
                            class="btn btn-warning me-2">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button data-bs-toggle="modal" data-bs-target="#detailModal-{{$item->uuid}}"
                            class="btn btn-success">
                            <i class="fas fa-eye"></i>
                        </button>
                      
                    </td>
                </tr>

                <!-- Detail Modal -->
                <div class="modal fade pt-5" id="detailModal-{{$item->uuid}}" tabindex="-1"
                    aria-labelledby="detailModalLabel-{{$item->uuid}}" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="detailModalLabel-{{$item->uuid}}">{{$item->judul}}</h5>
                            </div>
                            <div class="modal-body d-flex">
                                <iframe allow="fullscreen;"
                                    style="height: 300px; width: 620px; margin: auto !important;" class="mx-auto"
                                    src="{{$item->link}}"></iframe>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Edit Modal -->
                <div class="modal fade pt-5" id="editModal-{{$item->uuid}}" tabindex="-1"
                    aria-labelledby="editModalLabel-{{$item->uuid}}" aria-hidden="true">
                    <form action="{{route('bo.skrining_video.update')}}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="editModalLabel-{{$item->uuid}}">{{$item->judul}}</h5>
                                </div>
                                <div class="modal-body">
                                    <input type="hidden" name="uuid" value="{{$item->uuid}}">
                                    <div class="form-group mb-3">
                                        <label for="judul" class="form-label">Label</label>
                                        <input type="text" class="form-control" id="judul" name="judul" placeholder="Masukkan label skrining video" value="{{$item->judul}}"
                                            required>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="link" class="form-label">Link Video (https://www.youtube.com/embed/kode)</label>
                                        <input type="text" class="form-control" id="link" name="link" placeholder="contoh: https://www.youtube.com/embed/fQeSTYE_Q5E"
                                        value="{{$item->link}}" required >
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Tutup</button>
                                        <div id="submit" class="btn btn-success"
                                        >Ubah</div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                @endforeach
            </tbody>
        </table>
    </div>

</div>
</div>
<!--/ Basic Bootstrap Table -->
@endsection

@push('scripts')
@if (session('success'))
<script>
    Swal.fire({
        title: '{{session("success")}}',
        icon: 'success',
        confirmButtonText: 'Tutup'
    })

</script>
@endif

@if (session('error'))
<script>
    Swal.fire({
        title: 'Proses Gagal',
        text: '{{session("error")[1]}} | Line : {{session("error")[2]}}',
        icon: 'error',
        confirmButtonText: 'Tutup'
    })

</script>
@endif

<script>
    tinyMCE.init({
        selector: 'textarea#deskripsi',
        plugins: 'lists | link',
  toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | link',
    });


    $('div#submit').on('click', function (event) {
        event.preventDefault();
        tinyMCE.triggerSave();
        let required;
        if (!$('#judul').val()) {
            required = 'Judul ';
        } else if (!$('#link').val()) {
            required = 'Link ';
        } 


        if (required) {
            $.toast({
                heading: required + ' belum diisi',
                icon: 'error',
                position: 'top-center'
            })
        } else {
            $( "form" ).trigger( "submit" );
        }

    })

    loading()

</script>
@endpush