@extends('layouts.master')
@section('content')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900%7CRoboto+Slab:400,700">

    <link href="{{ asset('assets/dc/css/css-nucleo-icons.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/dc/css/css-nucleo-svg.css') }}" rel="stylesheet">

    <script src="{{ asset('assets/dc/js/42d5adcbca.js') }}" crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">

    <link id="pagestyle" href="{{ asset('assets/dc/css/css-material-dashboard.min.css') }}" rel="stylesheet">
    <style>
        i#iconSidenav:before {
            content: ' ✕';
            background-color: black !important;
            border-radius: 20px;
            padding: 2px 11px 0px 5px;
            position: absolute;
            bottom: 2px;
            right: 0px;
        }

        i#iconSidenav {
            background-color: black !important;
            border-radius: 5px;
        }

        a.navbar-brand.m-0 {
            background-color: #26262947;
        }

        p.p_text {
            font-weight: 600;
            font-size: 12px;
            margin: -43px 0px 10px 71px;
            color: #fff !important;
        }

        span.ms-1.font-weight-bold.text-white {
            font-size: 12px;
            color: #004226 !important;
        }

        .sidenav .navbar-brand {
            padding: 0.5rem 1rem !important;
        }

        .navbar-vertical .navbar-brand-img,
        .navbar-vertical .navbar-brand>img {
            max-width: 100%;
            max-height: 4rem;
        }

        h3.mt-5.form_class {
            margin-top: -8px !important;
            color: white;
            letter-spacing: 2px;
        }

        .input-group.input-group-dynamic.is-focused label,
        .input-group.input-group-static.is-focused label {
            color: #4caf50;
        }

        .input-group.input-group-dynamic .form-control,
        .input-group.input-group-dynamic .form-control:focus,
        .input-group.input-group-static .form-control,
        .input-group.input-group-static .form-control:focus {
            background-image: linear-gradient(0deg, #4caf50 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
            border-radius: 0 !important;
        }

        .choices .choices__input {
            background-image: linear-gradient(0deg, #4caf50 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
            background-size: 0 100%, 100% 100%;
        }

        .choices .choices__list.choices__list--single,
        .choices .choices__list.choices__list--single:focus {
            background-image: linear-gradient(0deg, #4caf50 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
        }

        .input-group.input-group-static .form-control,
        .input-group.input-group-static .form-control:focus {
            background-image: linear-gradient(0deg, #4caf50 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
            border-radius: 0 !important;
        }

        .container-fluid.py-1.px-3 {
            background-color: #ffffffe3;
            border-radius: 9px;
        }

        .multisteps-form__panel .multisteps-form__content .is-filled .btn:hover,
        .multisteps-form__panel .multisteps-form__content .is-filled.is-focused .btn:hover,
        .multisteps-form__panel .multisteps-form__content .is-focused .btn:hover {
            color: #004226 !important;
        }

        div#ofBar {
            display: none;
        }

        .bg-gradient-primary {
            background-image: linear-gradient(195deg, #00A651 0%, #13451E 100%);
        }

        .bg-gradient-primary .multisteps-form__progress-btn:before {
            background-color: #5cffb9;
        }

        .btn-outline-primary:hover:not(.active) {
            background-color: transparent;
            opacity: .75;
            box-shadow: none;
            color: #004226;
        }

        .btn-outline-primary {
            --bs-btn-color: #004226;
            --bs-btn-border-color: #004226;
            --bs-btn-hover-color: #000;
            --bs-btn-hover-bg: #2cd58d;
            --bs-btn-hover-border-color: #004226;
            --bs-btn-focus-shadow-rgb: 233, 30, 99;
            --bs-btn-active-color: #000;
            --bs-btn-active-bg: #004226;
            --bs-btn-active-border-color: #004226;
            --bs-btn-active-shadow: none;
            --bs-btn-disabled-color: #004226;
            --bs-btn-disabled-bg: transparent;
            --bs-btn-disabled-border-color: #004226;
            --bs-gradient: none;
        }

        .async-hide {
            opacity: 0 !important
        }



        #dropzone {
            position: relative;
            color: rgb(117, 115, 115);
            font: bold 15px/146px arial;
            text-align: center;
        }

        #dropzone div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        #dropzone.hover {
            border: 10px solid #FE5;
            color: #FE5;
        }

        #dropzone.dropped {
            background: #222;
            border: 10px solid #444;
        }

        #dropzone img {
            border-radius: 10px;
            vertical-align: middle;
            max-width: 95%;
            max-height: 95%;
        }

        #dropzone [type="file"] {
            cursor: pointer;
            position: absolute;
            opacity: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12 text-center">
                <h3 class="">Create Quiz</h3>
                <div class="multisteps-form mb-5">
                    @if ($message = Session::get('success'))
                        <div class="alert alert-success" role="alert">{{ $message }}</div>
                    @elseif ($message = Session::get('error'))
                        <div class="alert alert-danger" role="alert">{{ $message }}</div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="row">
                        <div class="col-12 col-lg-8 mx-auto my-5">
                            <div class="card">
                                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                                        <div class="multisteps-form__progress">
                                            <button class="multisteps-form__progress-btn js-active" type="button"
                                                title="User Info">
                                                <span>1.Quiz Info</span>
                                            </button>
                                            <button class="multisteps-form__progress-btn" type="button" title="Address">
                                                <span>2.Add Video</span>
                                            </button>
                                            <button class="multisteps-form__progress-btn" type="button" title="Order Info">
                                                <span>3.Add Question</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    {!! Form::open([
                                        'route' => 'storequizes',
                                        'method' => 'POST',
                                        'class' => 'multisteps-form__form ',
                                        'style' => 'height: 376px',
                                        'files' => true,
                                        'enctype' => 'multipart/form-data',
                                    ]) !!}
                                    @csrf
                                    <div class="multisteps-form__panel js-active" data-animation="FadeIn">
                                        <div class="row text-center mt-2">

                                        </div>
                                        <div class="multisteps-form__content">
                                            <h5 class="font-weight-bolder" style="text-align: left">Quiz Information</h5>
                                            <div class="row-mt-3">
                                                <div class="col-12 col-md-12 mt-4">
                                                    <div class="input-group input-group-static">
                                                        <label>Quiz Name </label>
                                                        <input class="form-control" name="quiz_name" style="margin: 0px"
                                                            value="{{ old('quiz_name') }}" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-3">
                                                <div class="col-12 col-md-4 mt-3">
                                                    <div class="input-group input-group-static">
                                                        <label>Category</label>
                                                        <select class="form-control" name="category" id='category_id'>
                                                            <option value="">Select</option>
                                                            @foreach ($category as $cat)
                                                                <option value="{{ $cat->id }}" 
                                                                    {{ old('category') == $cat->id ? 'selected' : '' }}>
                                                                    {{ $cat->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-4 mt-3">
                                                    <div class="input-group input-group-static">
                                                        <label>Level</label>
                                                        <select class="form-control" name="level"  id="level-dropdown" >
                                                            <option value="">Select</option>
                                                            @foreach ($levels as $level)
                                                                <option value="{{ $level->level_id }}"
                                                                    {{ old('level') == $level->level_id ? 'selected' : '' }}>
                                                                    {{ $level->level_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                
                                                 <div class="col-12 col-md-4 mt-3">
                                                    <div class="input-group input-group-static">
                                                        <label>Topic</label>
                                                        <select class="form-control" name="topic" id="topic-dropdown">
                                                            <option value="">Select</option>
                                                        </select>
                                                    </div>
                                                </div>


                                            </div>
                                            <div class="button-row d-flex mt-4">
                                                <button class="btn bg-gradient-dark ms-auto mb-0 js-btn-next" type="button"
                                                    title="Next">Next</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="multisteps-form__panel" data-animation="FadeIn">
                                        <div class="row  mt-2">
                                            <h5 class="font-weight-bolder" style="text-align: left">Video Upload</h5>
                                        </div>
                                        <div class="multisteps-form__content">
                                            <div class="row ">

                                                <div class="col-12 col-md-12 mt-1">
                                                    <div class="input-group input-group-static">
                                                        <div action=""
                                                            class="form-control border dropzone dz-clickable"
                                                            id="dropzone">

                                                            <label for="quiz-video" class="custom-file-upload">
                                                                <i class="fa fa-cloud-upload"></i> Upload Topic Video
                                                            </label>
                                                            <input type="file" accept="image/png, application/pdf"
                                                                name="quiz_video" id="quiz-video" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <span
                                                    style="text-align: left;font-size: 12px;color: #f06f6f; padding-top: 9px;">*Allowed
                                                    Video Type:mp4</span>

                                            </div>
                                            <div class="button-row d-flex mt-4">
                                                <button class="btn btn-outline-dark mb-0 js-btn-prev" type="button"
                                                    title="Prev">Prev</button>
                                                <button class="btn bg-gradient-dark ms-auto mb-0 js-btn-next" type="button"
                                                    title="Next">Next</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="multisteps-form__panel" data-animation="FadeIn">
                                        <div class="row  mt-2">
                                            <h5 class="font-weight-bolder" style="text-align: left">Upload Question &
                                                Answer
                                            </h5>
                                        </div>

                                        <div class="multisteps-form__content">
                                            <div class="row mt-4" style="justify-content: center;">
                                                <div class="col-sm-3 ">
                                                    <div class="card btn btn-lg btn-outline-primary border-2 p-0">
                                                        <div class="card-body p-4">
                                                            <label>
                                                                <a href="{{ asset('uploads\quiz_question_sample\question_sheet.csv') }}"
                                                                    download="GFG">
                                                                    <i class="material-icons">download</i>
                                                                    <h6
                                                                        style="font-size: 12px;font-weight: 400;padding-top: 10px;">
                                                                        Export Sample <br>File</h6>
                                                                </a>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-3">
                                                    <div class="card btn btn-lg btn-outline-primary border-2 p-0">
                                                        <div class="card-body p-4">
                                                            <input type="file" name="question_sheet" class="btn-check"
                                                                id="import-questions" data-gtm-form-interact-field-id="2">
                                                            <label for="import-questions">
                                                                <i class="material-icons">publish</i>
                                                                <h6
                                                                    style="font-size: 12px;font-weight: 400;padding-top: 10px;">
                                                                    Import Question Sheet</h6>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="button-row d-flex mt-4 col-12">
                                                <button class="btn btn-outline-dark mb-0 js-btn-prev" type="button"
                                                    title="Prev">Prev</button>
                                                <button class="btn bg-gradient-dark ms-auto mb-0" type="submit"
                                                    title="Send">Send</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <script>
          $(document).ready(function () {
  
            /*------------------------------------------
            --------------------------------------------
            category Dropdown Change Event
            --------------------------------------------
            --------------------------------------------*/
            $('#level-dropdown').on('change', function () {
                var level_id= this.value;
                var category_id=$('#category_id').val();
                $("#topic-dropdown").html('');
                $.ajax({
                    url: "{{url('/topics/')}}/"+level_id,
                    type: "GET",
                    dataType: 'json',
                    data:{category_id:category_id},
                    success: function (result) {
                        console.log(result);
                        $('#topic-dropdown').html('<option value=""> Select</option>');
                        $.each(result.response, function (key, value) {
                            $("#topic-dropdown").append('<option value="' + value
                                .id + '">' + value.topic_name + '</option>');
                        });
                    }
                });
            });
          });
        //to show name of file
        $('#quiz-video').change(function() {
            var i = $(this).prev('label').clone();
            var file = $('#quiz-video')[0].files[0].name;
            $(this).prev('label').text(file);
        });

        $('#import-questions').change(function() {
            var i = $(this).next('label').clone();
            var file = $('#import-questions')[0].files[0].name;
            $(this).next('label').text(file);
        });
    </script>
    
    

    <script src="{{ asset('assets/dc/js/core-popper.min.js') }}"></script>
    <script src="{{ asset('assets/dc/js/core-bootstrap.min.js') }}"></script>
    <script src="{{ asset('assets/dc/js/plugins-perfect-scrollbar.min.js') }}"></script>
    <script src="{{ asset('assets/dc/js/plugins-smooth-scrollbar.min.js') }}"></script>

    <script src="{{ asset('assets/dc/js/dragula-dragula.min.js') }}"></script>
    <script src="{{ asset('assets/dc/js/jkanban-jkanban.js') }}"></script>
    <script src="{{ asset('assets/dc/js/plugins-multistep-form.js') }}"></script>
    <script src="{{ asset('assets/dc/js/plugins-choices.min.js') }}"></script>



    <script async defer src="{{ asset('assets/dc/`js/buttons.github.io-buttons.js') }}"></script>

    <script src="{{ asset('assets/dc/js/js-material-dashboard.min.js') }}"></script>
    <script defer src="https://static.cloudflareinsights.com/beacon.min.js/v52afc6f149f6479b8c77fa569edb01181681764108816"
        integrity="sha512-jGCTpDpBAYDGNYR5ztKt4BQPGef1P0giN6ZGVUi835kFF88FOmmn8jBQWNgrNd8g/Yu421NdgWhwQoaOPFflDw=="
        data-cf-beacon='{"rayId":"7cd5c6401cd7eb3f","version":"2023.4.0","r":1,"b":1,"token":"1b7cbb72744b40c580f8633c6b62637e","si":100}'
        crossorigin="anonymous"></script>

@endsection