@extends('layouts.v_template')

@section('content')
    @if ($data == "new")
        <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>{{ $case->title }}</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="{{ URL::to('/study-kasus') }}">Database Study Kasus</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a
                                            href="{{ URL::to('/study-kasus/' . Crypt::encrypt($case->id)) }}">{{ $case->title }}</a>
                                    </li>
                                    <li class="breadcrumb-item active" aria-current="page">
                                        Skenario
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <div class="col-lg-12">
                <div class="card-style mb-30">
                    <form action="{{ URL::to('/node/new') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="case_study_id" value="{{ $case->id }}">
                        <div class="input-style-1">
                            <label for="">Label</label>
                            <input type="text" class="" name="labelNode" required />
                        </div>
                        <div class="input-style-1">
                            <label for="">Skenario</label>
                            <textarea placeholder="Message" rows="10" id="contentNode" name="contentNode" required></textarea>
                        </div>
                        <div class="input-style-1 w-50">
                            <label for="">Gambar</label>
                            <input class="mb-3" type="file" name="image" accept="image/*">
                        </div>
                        <button type="submit" class="btn btn-primary">Tambah</button>
                    </form>
                </div>
            </div>
        </div>
    @else
        <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>{{ $data->caseStudy->title }}</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="{{ URL::to('/study-kasus') }}">Database Study Kasus</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a
                                            href="{{ URL::to('/study-kasus/' . Crypt::encrypt($data->case_study_id)) }}">{{ $data->caseStudy->title }}</a>
                                    </li>
                                    <li class="breadcrumb-item active" aria-current="page">
                                        Skenario
                                    </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">
                                <h5>Skenario</h5>
                                <a href="{{ URL::to('/study-kasus/skenario/new?case=' . Crypt::encrypt($data->case_study_id)) }}"
                                    class="btn btn-sm btn-primary">Tambah
                                    Skenario Baru</a>
                            </div>
                            <div class="input-style-1">
                                <label for="">Label</label>
                                <input type="text" class="" id="label" name="label" value="{{ $data->label }}"
                                    data-id="{{ $data->id }}" required />
                            </div>
                            <div class="input-style-1">
                                <label for="">Skenario</label>
                                <textarea placeholder="Message" rows="10" id="content" name="content"
                                    data-id="{{ $data->id }}">{{ $data->content }}</textarea>
                            </div>
                            <div class="input-style-1">
                                <label for="">Gambar</label>
                                <div class="d-flex gap-3 align-items-center">
                                    <div><img src="{{ asset('uploads/nodes/' . $data->gambar) }}" width="300"></div>
                                    <div class="input-style-1 w-50">
                                        <form action="{{ url('/node/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>
                        </div>
                    </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">Pilihan</h6>
                                <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="modal"
                                    data-bs-target="#exampleModal">Tambah Pilihan</button>
                            </div>
                            <div class="accordion accordion-flush" id="accordionFlushExample">
                                @foreach ($pilihan as $item)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#flush-collapseOne{{ $item->id }}" aria-expanded="false"
                                                aria-controls="flush-collapseOne{{ $item->id }}">
                                                {{ $item->label }} - {{ $item->text }}
                                            </button>
                                        </h2>
                                        <div id="flush-collapseOne{{ $item->id }}" class="accordion-collapse collapse"
                                            data-bs-parent="#accordionFlushExample">
                                            <div class="accordion-body">
                                                <div class="input-style-1">
                                                    <label for="">Label</label>
                                                    <input type="text" class="choice-label" value="{{ $item->label }}"
                                                        data-id="{{ $item->id }}" />
                                                </div>
                                                <div class="input-style-1">
                                                    <label for="">Text</label>
                                                    <textarea class="choice-text" rows="3"
                                                        data-id="{{ $item->id }}">{{ $item->text }}</textarea>
                                                </div>
                                                <div class="input-style-1">
                                                    <label for="">Data</label>
                                                    <textarea class="choice-data" rows="3"
                                                        data-id="{{ $item->id }}">{{ $item->data }}</textarea>
                                                </div>
                                                <div class="select-style-1">
                                                    <label>Status</label>
                                                    <div class="select-position">
                                                        <select class="choice-status" data-id="{{ $item->id }}">
                                                            <option value="Tepat" {{ $item->status == 'Tepat' ? 'selected' : '' }}>
                                                                Tepat</option>
                                                            <option value="Cukup Tepat" {{ $item->status == 'Cukup Tepat' ? 'selected' : '' }}>Cukup Tepat</option>
                                                            <option value="Kurang Tepat" {{ $item->status == 'Kurang Tepat' ? 'selected' : '' }}>Kurang Tepat</option>
                                                            <option value="Tidak Tepat" {{ $item->status == 'Tidak Tepat' ? 'selected' : '' }}>Tidak Tepat</option>
                                                            <option value="Tindakan Salah" {{ $item->status == 'Tindakan Salah' ? 'selected' : '' }}>Tindakan Salah</option>
                                                            <option value="Tindakan Fatal" {{ $item->status == 'Tindakan Fatal' ? 'selected' : '' }}>Tindakan Fatal</option>
                                                            <option value="Belum Ditemukan" {{ $item->status == 'Belum Ditemukan' ? 'selected' : '' }}>Belum Ditemukan</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="input-style-1">
                                                    <label for="">Score</label>
                                                    <input type="number" class="choice-score" value="{{ $item->score }}"
                                                        data-id="{{ $item->id }}" />
                                                </div>
                                                <div class="select-style-1">
                                                    <label for="">Skenario Berikutnya</label>
                                                    <div class="select-position">
                                                        <select class="choice-next_node_id" data-id="{{ $item->id }}">
                                                            @foreach ($nodes as $node)
                                                                <option value="{{ $node->id }}" {{ $item->next_node_id == $node->id ? 'selected' : '' }}>{{ $node->label }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <button class="btn btn-sm btn-warning tombol-hapus"
                                                        data-id="{{ $item->id }}">Hapus</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div>
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <form action="{{ URL::to('/choices/new') }}" method="POST">
                        @csrf
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">Pilihan Jawaban</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" name="node_id" value="{{ $data->id }}" required>
                                <input type="hidden" name="case_study_id" value="{{ $data->case_study_id }}" required>
                                <input type="hidden" name="score" value="0" required>
                                <div class="input-style-1">
                                    <label for="">Label</label>
                                    <input type="text" name="label" id="label" required />
                                </div>
                                <div class="input-style-1">
                                    <label for="">Text</label>
                                    <textarea name="text" id="text" rows="3" required></textarea>
                                </div>
                                <div class="input-style-1">
                                    <label for="">Hasil</label>
                                    <textarea name="hasil" id="data" rows="3" required></textarea>
                                </div>
                                <div class="select-style-1">
                                    <label>Status</label>
                                    <div class="select-position">
                                        <select name="status" id="status" required>
                                            <option value="Tepat">Tepat</option>
                                            <option value="Cukup Tepat">Cukup Tepat</option>
                                            <option value="Kurang Tepat">Kurang Tepat</option>
                                            <option value="Tidak Tepat">Tidak Tepat</option>
                                            <option value="Tindakan Salah">Tindakan Salah</option>
                                            <option value="Tindakan Fatal">Tindakan Fatal</option>
                                            <option value="Belum Ditemukan">Belum Ditemukan</option>
                                        </select>
                                    </div>
                                </div>
                                <!--<div class="input-style-1">-->
                                <!--    <label for="">Score</label>-->
                                <!--    <input type="number" name="score" id="score" required />-->
                                <!--</div>-->
                                <div class="select-style-1">
                                    <label for="">Skenario Berikutnya</label>
                                    <div class="select-position">
                                        <select name="next_node_id" id="next_node_id" required>
                                            @foreach ($nodes as $node)
                                                <option value="{{ $node->id }}">{{ $node->label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('script')
    <script>
        $('#label').on('blur', function () {
            let id = $(this).attr('data-id');
            $.ajax({
                url: "{{ URL::to('/node/update') }}" + "/" + id,
                type: "GET",
                data: {
                    kolom: "label",
                    value: $(this).val()
                }
            })
        })

        $('#content').on('blur', function () {
            let id = $(this).attr('data-id');
            $.ajax({
                url: "{{ URL::to('/node/update') }}" + "/" + id,
                type: "GET",
                data: {
                    kolom: "content",
                    value: $(this).val()
                }
            })
        })

        // choice
        $('.choice-label').on('blur', function () {
            let id = $(this).attr('data-id');
            $.ajax({
                url: "{{ URL::to('/choices/update') }}" + "/" + id,
                type: "GET",
                data: {
                    kolom: "label",
                    value: $(this).val()
                }
            })
        })
        $('.choice-text').on('blur', function () {
            let id = $(this).attr('data-id');
            $.ajax({
                url: "{{ URL::to('/choices/update') }}" + "/" + id,
                type: "GET",
                data: {
                    kolom: "text",
                    value: $(this).val()
                }
            })
        })
        $('.choice-data').on('blur', function () {
            let id = $(this).attr('data-id');
            $.ajax({
                url: "{{ URL::to('/choices/update') }}" + "/" + id,
                type: "GET",
                data: {
                    kolom: "data",
                    value: $(this).val()
                }
            })
        })
        $('.choice-status').on('change', function () {
            let id = $(this).attr('data-id');
            $.ajax({
                url: "{{ URL::to('/choices/update') }}" + "/" + id,
                type: "GET",
                data: {
                    kolom: "status",
                    value: $(this).val()
                }
            })
        })
        $('.choice-score').on('blur', function () {
            let id = $(this).attr('data-id');
            $.ajax({
                url: "{{ URL::to('/choices/update') }}" + "/" + id,
                type: "GET",
                data: {
                    kolom: "score",
                    value: $(this).val()
                }
            })
        })
        $('.choice-next_node_id').on('change', function () {
            let id = $(this).attr('data-id');
            $.ajax({
                url: "{{ URL::to('/choices/update') }}" + "/" + id,
                type: "GET",
                data: {
                    kolom: "next_node_id",
                    value: $(this).val()
                }
            })
        })
        $('.tombol-hapus').click(function () {
            let id = $(this).data('id');
            Swal.fire({
                title: "Hapus Pilihan Ini?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Ya",
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed){
                    $.ajax({
                        url: "{{ URL::to('/choices/delete') }}" + '/' + id,
                        type: "GET",
                        success: function (success) {
                            location.reload();
                        }
                    })
                };
            });
        })
    </script>

@endsection

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

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