@extends('layouts.v_template')
<style>
    .one-line {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

@section('content')
    <div class="container-fluid">
        <!-- ========== title-wrapper start ========== -->
        <div class="title-wrapper pt-30">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="title">
                        <h2>Database Study Kasus</h2>
                    </div>
                </div>
                <!-- end col -->
                <div class="col-md-6">
                    <div class="breadcrumb-wrapper">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="#0">Database Study Kasus</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="{{ URL::to('/study-kasus') }}">Dashboard</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    {{ $data->title }}
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
        </div>
        <!-- ========== title-wrapper end ========== -->
        <div class="tables-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card-style mb-30">
                        <div class="d-flex justify-content-between mb-15">
                            <h6 class="mb-25">Study Kasus</h6>
                            <a href="{{ URL::to('/study-kasus') }}" class="btn btn-sm btn-primary">Kembali</a>
                        </div>
                        <label for="">Case</label>
                        <div class="input-style-1">
                            <input type="text" value="{{ $data->title }}" id="title" name="title" />
                        </div>
                        <label for="">Deskripsi</label>
                        <div class="input-style-1">
                            <textarea placeholder="Message" rows="10" id="description"
                                name="description">{{ $data->description }}</textarea>
                        </div>

                        <label for="">Gambar</label>
                        <div class="d-flex gap-3 align-items-center">
                            <div><img src="{{ asset('uploads/case-study/' . $data->gambar) }}" width="300"></div>
                            <div class="input-style-1 w-50">
                                <form action="{{ url('/study-kasus/update-gambar') }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input class="hidden" type="text" name="id" value="{{ $data->id }}" hidden>
                                    <input class="mb-3" type="file" name="image" accept="image/*">
                                    <button class="btn btn-secondary" type="submit">Simpan</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- end card -->
                </div>
                <!-- end col -->
                <div class="col-lg-12">
                    <div class="card-style mb-30">
                        <div class="d-flex justify-content-between mb-15">
                            <h6 class="mb-25">Skenario</h6>
                            <a href="{{ URL::to('/study-kasus/skenario/new?case=' . Crypt::encrypt($data->id)) }}"
                                class="btn btn-sm btn-primary">Tambah
                                Skenario</a>
                        </div>
                        <div class="table-wrapper table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>
                                            <h6>Label Skenario</h6>
                                        </th>
                                        <th>
                                            <h6>Action</h6>
                                        </th>
                                    </tr>
                                    <!-- end table row-->
                                </thead>
                                <tbody>
                                    @foreach ($node as $item)
                                        <tr>
                                            <td>
                                                {{ $item->label }}
                                            </td>
                                            <td>
                                                <div class="d-flex gap-1">
                                                    <a href="{{ URL::to('/study-kasus/skenario/' . Crypt::encrypt($item->id)) }}"
                                                        class="btn btn-sm btn-primary">Detail</a>
                                                    <button class="btn btn-sm btn-danger btn-delete-node"
                                                        data-id="{{ $item->id }}">Delete</button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <!-- end table -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->
        </div>

        <div class="tables-wrapper">
            <div class="col-lg-12">
                <div class="card-style mb-30">
                    <div class="d-flex justify-content-between mb-15">
                        <h6 class="mb-25">Alternatif Solusi</h6>
                        <a href="{{ URL::to('/study-kasus/alternatif-solusi/new?case=' . Crypt::encrypt($data->id)) }}"
                            class="btn btn-sm btn-primary">Tambah Alternatif Solusi</a>
                    </div>
                    <div class="table-wrapper table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>
                                        <h6>Label Alternatif Solusi</h6>
                                    </th>
                                    <th>
                                        <h6>Action</h6>
                                    </th>
                                </tr>
                                <!-- end table row-->
                            </thead>
                            <tbody>
                                @foreach ($alternatif as $item)
                                    <tr>
                                        <td>
                                            {{ $item->label }}
                                        </td>
                                        <td>
                                            <div class="d-flex gap-1">
                                                <a href="{{ URL::to('/study-kasus/alternatif-solusi/' . Crypt::encrypt($item->id)) }}"
                                                    class="btn btn-sm btn-primary">Detail</a>
                                                <button class="btn btn-sm btn-danger btn-delete-alternatif"
                                                    data-id="{{ $item->id }}">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <!-- end table -->
                    </div>
                </div>
            </div>
        </div>

        <div class="tables-wrapper">
            <div class="col-lg-12">
                <div class="card-style mb-30">
                    <div class="d-flex justify-content-between mb-15">
                        <h6 class="mb-25">Puzzle</h6>
                    </div>
                    <div>
                        <div class="input-style-1">
                            <label for="">Langkah 1</label>
                            <input type="text" class="puzzle_langkah" data-kolom="opsi1" name=""
                                value="{{ $puzzle->opsi1 }}" />
                        </div>
                        <div class="input-style-1">
                            <label for="">Langkah 2</label>
                            <input type="text" class="puzzle_langkah" data-kolom="opsi2" name=""
                                value="{{ $puzzle->opsi2 }}" />
                        </div>
                        <div class="input-style-1">
                            <label for="">Langkah 3</label>
                            <input type="text" class="puzzle_langkah" data-kolom="opsi3" name=""
                                value="{{ $puzzle->opsi3 }}" />
                        </div>
                        <div class="input-style-1">
                            <label for="">Langkah 4</label>
                            <input type="text" class="puzzle_langkah" data-kolom="opsi4" name=""
                                value="{{ $puzzle->opsi4 }}" />
                        </div>
                        <div class="input-style-1">
                            <label for="">Langkah 5</label>
                            <input type="text" class="puzzle_langkah" data-kolom="opsi5" name=""
                                value="{{ $puzzle->opsi5 }}" />
                        </div>
                        <div class="input-style-1">
                            <label for="">Langkah 6</label>
                            <input type="text" class="puzzle_langkah" data-kolom="opsi6" name=""
                                value="{{ $puzzle->opsi6 }}" />
                        </div>
                        <div class="input-style-1">
                            <label for="">Feedback Poin 4</label>
                            <textarea class="feedback_puzzle" rows="5"
                                data-kolom="feedback4">{{ $puzzle->feedback4 }}</textarea>
                        </div>
                        <div class="input-style-1">
                            <label for="">Feedback Poin 3</label>
                            <textarea class="feedback_puzzle" rows="5"
                                data-kolom="feedback3">{{ $puzzle->feedback3 }}</textarea>
                        </div>
                        <div class="input-style-1">
                            <label for="">Feedback Poin 2</label>
                            <textarea class="feedback_puzzle" rows="5"
                                data-kolom="feedback2">{{ $puzzle->feedback2 }}</textarea>
                        </div>
                        <div class="input-style-1">
                            <label for="">Feedback Poin 1</label>
                            <textarea class="feedback_puzzle" rows="5"
                                data-kolom="feedback1">{{ $puzzle->feedback1 }}</textarea>
                        </div>
                        <div class="input-style-1">
                            <label for="">Feedback Poin 0</label>
                            <textarea class="feedback_puzzle" rows="5"
                                data-kolom="feedback0">{{ $puzzle->feedback0 }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
@endsection

@section('script')
    <script>
        $('#title').on('blur', function () {
            $.ajax({
                url: "{{ URL::to('/study-kasus/update/' . Crypt::encrypt($data->id)) }}",
                type: "GET",
                data: {
                    kolom: "title",
                    value: $(this).val()
                }
            })
        })

        $('#description').on('blur', function () {
            $.ajax({
                url: "{{ URL::to('/study-kasus/update/' . Crypt::encrypt($data->id)) }}",
                type: "GET",
                data: {
                    kolom: "description",
                    value: $(this).val()
                }
            })
        })

        $('.puzzle_langkah').on('blur', function () {
            $.ajax({
                url: "{{ URL::to('/study-kasus/puzzle/update/' . Crypt::encrypt($puzzle->id)) }}",
                type: "GET",
                data: {
                    kolom: $(this).data('kolom'),
                    value: $(this).val()
                }
            })
        })

        $('.feedback_puzzle').on('blur', function () {
            $.ajax({
                url: "{{ URL::to('/study-kasus/puzzle/update/' . Crypt::encrypt($puzzle->id)) }}",
                type: "GET",
                data: {
                    kolom: $(this).data('kolom'),
                    value: $(this).val()
                }
            })
        })

        $('.btn-delete-node').click(function () {
            const id = $(this).data('id');
            Swal.fire({
                title: "Hapus data?",
                text: "Data akan dihapus permanen",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Ya, hapus!",
                cancelButtonText: "Tidak, batalkan!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ URL::to('/node/delete') }}" + '/' + id,
                        type: "GET",
                        success: function (response) {
                            location.reload();
                        }
                    })
                }
            });
        })
    </script>
@endsection

<!-- ========== section end ========== -->

<!-- ========== footer start =========== -->