@extends('dashboard::layouts.app')

@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
        Question Set
    </h5>
@endsection

@section('content')
    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact card-collapsed" data-card="true" id="kt_card_4">
        <div class="card-header">
            <h3 class="card-title">
                Add New Question Set
            </h3>
            <div class="card-toolbar">
                <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-1" data-card-tool="toggle">
                    <i class="ki ki-arrow-down icon-nm"></i>
                </a>
            </div>
        </div>

        <form class="form" action="{{ route('cd-admin.store_question_set') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="row form-group">
                    <label class="col-lg-2 col-form-label text-right">Question Set Title:</label>
                    <div class="col-lg-4">
                        <input type="text" class="form-control" name="qestion_set_title" placeholder="Enter Question Set title here" value="{{ old('qestion_set_title') }}" required />
                        @error('qestion_set_title')
                            <span style="color: red;">{{ $message }}</span>
                        @enderror
                    </div>

                    <label class="col-lg-2 col-form-label text-right">Question Set Topics:</label>
                    <div class="col-lg-4">
                        <select class="form-control selectpicker" name="topic_id[]" data-size="7" data-live-search="true" multiple required>
                            @if (count($topics) > 0)
                                @foreach ($topics as $topic)
                                    <option value="{{ $topic->id }}">{{ $topic->topic_title }}</option>
                                @endforeach
                            @else
                                <option>No Topics to Select</option>
                            @endif
                        </select>
                        @error('topic_id')
                            <span style="color: red;">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <button type="submit" class="btn btn-success mr-2">Add New Question Set</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--end::Card-->



    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">
                    Question Set List
                </h3>
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <table class="table">
                <div class="float-right">
                    <form action="{{ route('cd-admin.view_question_set') }}" class="" method="get">
                        <div class="input-group mb-3">
                            <input type="text" name="searchkey" class="form-control" placeholder="Search" required />
                            <div class="input-group-append">
                                {{-- <button class="btn btn-outline-secondary" type="button">Button</button> --}}
                                <button type="submit" class="btn btn-sm btn-clean btn-icon mr-2 ">
                                    <i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
                @if (count($sets) > 0)
                    <thead>
                        <tr>
                            <th></th>
                            <th>SN</th>
                            <th>Question Set Title</th>
                            <th>Set's Questions</th>
                            <th>Selected Questions</th>
                            <th>Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        @for ($i = 0; $i < count($sets); $i++)
                            <tr>
                                <td></td>
                                <td>{{ $i + 1 }}</td>
                                <td>
                                    {{ $sets[$i]->qestion_set_title }}
                                </td>
                                <td>
                                    <a href="{{ route('cd-admin.assign_questions', $sets[$i]->qestion_set_slug) }}" class="btn btn-sm btn-clean btn-icon mr-2" title="Select Question">
                                        <span class="svg-icon svg-icon-md">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24" />
                                                    <circle fill="#000000" cx="12" cy="12" r="10" opacity="0.3" />
                                                    <path d="M11,11 L11,7 C11,6.44771525 11.4477153,6 12,6 C12.5522847,6 13,6.44771525 13,7 L13,11 L17,11 C17.5522847,11 18,11.4477153 18,12 C18,12.5522847 17.5522847,13 17,13 L13,13 L13,17 C13,17.5522847 12.5522847,18 12,18 C11.4477153,18 11,17.5522847 11,17 L11,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L11,11 Z" fill="#000000" />
                                                </g>
                                            </svg>
                                        </span>
                                    </a>
                                </td>
                                <td>
                                    <span class="label label-xl label-success label-inline mr-2">{{ $sets[$i]->count }} question</span>
                                </td>
                                <td>
                                    <a href="{{ route('cd-admin.view_set_question', $sets[$i]->qestion_set_slug) }}" class="btn btn-sm btn-clean btn-icon mr-2" title="View Questions">
                                        <span class="svg-icon svg-icon-md">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24" />
                                                    <path d="M3,12 C3,12 5.45454545,6 12,6 C16.9090909,6 21,12 21,12 C21,12 16.9090909,18 12,18 C5.45454545,18 3,12 3,12 Z" fill="#000000" fill-rule="nonzero" />
                                                    <path d="M12,15 C10.3431458,15 9,13.6568542 9,12 C9,10.3431458 10.3431458,9 12,9 C13.6568542,9 15,10.3431458 15,12 C15,13.6568542 13.6568542,15 12,15 Z" fill="#000000" opacity="0.3" />
                                                </g>
                                            </svg>
                                        </span>
                                    </a>
                                    <a href="{{ route('cd-admin.edit_question_set', $sets[$i]->id) }}" class="btn btn-sm btn-clean btn-icon mr-2" title="Edit details">
                                        <span class="svg-icon svg-icon-md">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24" />
                                                    <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" \ transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) " />
                                                    <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1" />
                                                </g>
                                            </svg>
                                        </span>
                                    </a>
                                    <a href="javascript:;" class="btn btn-sm btn-clean btn-icon delete-button" title="Delete" data-toggle="modal" data-target="#exampleModalCenter" data-id="{{ $sets[$i]->id }}">
                                        <span class="svg-icon svg-icon-md">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24" />
                                                    <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero" />
                                                    <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3" />
                                                </g>
                                            </svg>
                                        </span>
                                    </a>
                                </td>
                            </tr>
                        @endfor
                    </tbody>
                @endif
            </table>
            <!--end: Datatable-->
        </div>
    </div>
    <!--end::Card-->
    <div class='dataTables_paginate float-right paging_simple_numbers'>
        {{ $sets->links() }}
    </div>


    <!--begin::Delete Modal-->
    <div class="modal fade" id="exampleModalCenter" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
        <div class="modal-dialog .modal-dialog-centered" role="document">
            <form class="form" action="{{ route('cd-admin.delete_question_set') }}" method="get">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Delete Question Set</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i aria-hidden="true" class="ki ki-close"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this Question Set ?
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="id" id="set_id">
                        <input type="submit" class="btn btn-primary font-weight-bold" value="Yes, Delete">
                        <button type="reset" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">No, Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!--end::Delete Modal-->

    <script>
        $('.delete-button').click(function(e) {
            e.preventDefault();
            item_id = $(this).data('id');
            $('#set_id').val(item_id);
        });
    </script>
@endsection