@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">
                                        Alternatif Solusi
                                    </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('/alternatif_solusi/new') }}" method="POST">
                        @csrf
                        <input type="hidden" name="idnya" value="">
                        <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="d-flex gap-3 w-100">
                            <div class="input-style-1 w-100">
                                <label for="">Pilihan A</label>
                                <input type="text" class="" name="pilihan_a" required />
                            </div>
                            <div class="input-style-1 w-25">
                                <label for="">Bobot</label>
                                <input type="text" class="" name="nilai_a" required />
                            </div>
                        </div>
                        <div class="d-flex gap-3 w-100">
                            <div class="input-style-1 w-100">
                                <label for="">Pilihan B</label>
                                <input type="text" class="" name="pilihan_b" required />
                            </div>
                            <div class="input-style-1 w-25">
                                <label for="">Bobot</label>
                                <input type="text" class="" name="nilai_b" required />
                            </div>
                        </div>
                        <div class="d-flex gap-3 w-100">
                            <div class="input-style-1 w-100">
                                <label for="">Pilihan C</label>
                                <input type="text" class="" name="pilihan_c" required />
                            </div>
                            <div class="input-style-1 w-25">
                                <label for="">Bobot</label>
                                <input type="text" class="" name="nilai_c" required />
                            </div>
                        </div>
                        <div class="d-flex gap-3 w-100">
                            <div class="input-style-1 w-100">
                                <label for="">Pilihan D</label>
                                <input type="text" class="" name="pilihan_d" required />
                            </div>
                            <div class="input-style-1 w-25">
                                <label for="">Bobot</label>
                                <input type="text" class="" name="nilai_d" required />
                            </div>
                        </div>
                        <div class="input-style-1">
                            <label for="">Feedback Benar</label>
                            <textarea name="feedback_benar" id="feedback_benar" rows="3" required></textarea>
                        </div>
                        <div class="input-style-1">
                            <label for="">Feedback Salah</label>
                            <textarea name="feedback_salah" id="feedback_salah" rows="3" required></textarea>
                        </div>
                        <div class="d-flex gap-3 w-100">
                            <div class="select-style-1 w-50">
                                <label for="">Mulai</label>
                                <div class="select-position">
                                    <select name="mulai" id="mulai">
                                        <option value="">Semua</option>
                                        @foreach ($pilihan as $p)
                                            <option value="{{ $p->id }}">{{ $p->label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="select-style-1 w-50">
                                <label for="">Selesai</label>
                                <div class="select-position">
                                    <select name="selesai" id="selesai">
                                        <option value="">Semua</option>
                                        @foreach ($pilihan as $p)
                                            <option value="{{ $p->id }}">{{ $p->label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </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>{{ $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">
                                        Alternatif Solusi
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <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($value->case_study_id)) }}"
                            class="btn btn-sm btn-primary">Tambah Alternatif Solusi</a>
                    </div>
                    <form action="{{ URL::to('/alternatif_solusi/new') }}" method="POST">
                        @csrf
                        <input type="hidden" name="idnya" value="{{ $value->id }}">
                        <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" value="{{ $value->label }}" required />
                        </div>
                        <div class="d-flex gap-3 w-100">
                            <div class="input-style-1 w-100">
                                <label for="">Pilihan A</label>
                                <input type="text" class="" name="pilihan_a" value="{{ $value->pertanyaan_a }}" required />
                            </div>
                            <div class="input-style-1 w-25">
                                <label for="">Bobot</label>
                                <input type="text" class="" name="nilai_a" value="{{ $value->score_a }}" required />
                            </div>
                        </div>
                        <div class="d-flex gap-3 w-100">
                            <div class="input-style-1 w-100">
                                <label for="">Pilihan B</label>
                                <input type="text" class="" name="pilihan_b" value="{{ $value->pertanyaan_b }}" required />
                            </div>
                            <div class="input-style-1 w-25">
                                <label for="">Bobot</label>
                                <input type="text" class="" name="nilai_b" value="{{ $value->score_b }}" required />
                            </div>
                        </div>
                        <div class="d-flex gap-3 w-100">
                            <div class="input-style-1 w-100">
                                <label for="">Pilihan C</label>
                                <input type="text" class="" name="pilihan_c" value="{{ $value->pertanyaan_c }}" required />
                            </div>
                            <div class="input-style-1 w-25">
                                <label for="">Bobot</label>
                                <input type="text" class="" name="nilai_c" value="{{ $value->score_c }}" required />
                            </div>
                        </div>
                        <div class="d-flex gap-3 w-100">
                            <div class="input-style-1 w-100">
                                <label for="">Pilihan D</label>
                                <input type="text" class="" name="pilihan_d" value="{{ $value->pertanyaan_d }}" required />
                            </div>
                            <div class="input-style-1 w-25">
                                <label for="">Bobot</label>
                                <input type="text" class="" name="nilai_d" value="{{ $value->score_d }}" required />
                            </div>
                        </div>
                        <div class="input-style-1">
                            <label for="">Feedback Benar</label>
                            <textarea name="feedback_benar" id="feedback_benar" rows="3"
                                required>{{ $value->feedback_benar }}</textarea>
                        </div>
                        <div class="input-style-1">
                            <label for="">Feedback Salah</label>
                            <textarea name="feedback_salah" id="feedback_salah" rows="3"
                                required>{{ $value->feedback_salah }}</textarea>
                        </div>
                        <div class="d-flex gap-3 w-100">
                            <div class="select-style-1 w-50">
                                <label for="">Mulai</label>
                                <div class="select-position">
                                    <select name="mulai" id="mulai">
                                        <option value="" {{ $value->mulai == "" ? 'selected' : '' }}>Semua</option>
                                        @foreach ($pilihan as $p)
                                            <option value="{{ $p->id }}" {{ $value->mulai == $p->id ? 'selected' : '' }}>
                                                {{ $p->label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="select-style-1 w-50">
                                <label for="">Selesai</label>
                                <div class="select-position">
                                    <select name="selesai" id="selesai">
                                        <option value="" {{ $value->selesai == "" ? 'selected' : '' }}>Semua</option>
                                        @foreach ($pilihan as $p)
                                            <option value="{{ $p->id }}" {{ $value->selesai == $p->id ? 'selected' : '' }}>
                                                {{ $p->label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </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-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()
                }
            })
        })
    </script>
@endsection

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

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