@extends('admin.layouts.app')
@section('content')

@foreach ($course->steps as $key => $step)
<x-danger-modal :id="$step->id" header="Danger" message="Are you sure deleted it?!" link="{{ route('admin.steps.destroy', $step->id) }}" />
@endforeach

<div class="row">
    <div class="col">
        <div class="card">
            <civ class="card-header">
                <h5 class="card-title mb-0">
                    Add new step in {{ $course->name }} course
                </h5>
            </civ>
            <div class="card-body">
                <form action="{{ route('admin.steps.store', $course) }}" method="post">
                    @csrf
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="general_data" class="form-label">General data <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('general_data') is-invalid @enderror" name="general_data" id="general_data" cols="5" rows="5" required></textarea>
                            @error('general_data')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="video_url" class="form-label">Video URL</label>
                            <input type="text" class="form-control @error('video_url') is-invalid @enderror" name="video_url" id="video_url" required>
                            @error('video_url')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row overflow-hidden mt-5">
    <h3 class="text-primary text-center text-decoration-underline mb-5">Steps of {{ $course->name }} course</h3>
    <div class="col-12">
        <ul class="timeline timeline-center">
            @foreach ($course->steps as $key => $step)
            <li class="timeline-item pb-md-4 pb-5">
                <span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
                    <i class="bi bi-bar-chart-steps"></i>
                </span>
                <div class="timeline-event card p-0 position-relative" data-aos="fade-right">
                    <div style="position: absolute; bottom: 0; right: 0;">
                        <a href="javascript: void(0);" data-bs-toggle='modal' data-bs-target='#danger-header-modal-{{ $step->id }}' class="btn btn-danger btn-sm">
                            <i class="bi bi-trash"></i>
                        </a>
                        <button class="btn btn-info btn-sm" onclick="editStep({{ $step->id }})">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <button class="btn btn-warning btn-sm" onclick="stepQuestions({{ $step->id }})">
                            <i class="bi bi-question-circle"></i>
                        </button>
                    </div>
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                        <h6 class="card-title mb-0">Step {{ $key + 1 }}</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-2">
                            {{ $step->general_data }}
                        </p>
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div>
                                <a href="javascript: void(0);" class="link-primary" onclick="showVideoModal({{ $step->id }})">
                                    Show video <i class="bi bi-youtube mx-2 fs-5"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            @endforeach
        </ul>
        <h4>End </h4>
    </div>
</div>


{{-- edit step modal --}}
<div class="modal fade" id="editStepModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editStepModalTitle"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body m-0 p-0" id="stepHtml">
                <div class="row">
                    <div class="col text-center">
                        <div class="spinner-border spinner-border-lg text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{{-- video modal  --}}
<div class="modal fade" id="showVideoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" id="videoHtml">
            <div class="row">
                <div class="col text-center">
                    <div class="spinner-border spinner-border-lg text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
@if (session()->has('stepModal'))
<script>
    document.addEventListener("DOMContentLoaded", (event) => {
        stepQuestions("{{ session()->get('stepModal')->id }}")
    });

</script>
@endif

<script>
    function editStep(stepId) {
        document.getElementById("editStepModalTitle").innerHTML = "Edit step";
        $("#editStepModal").modal('show');
        $.post("{{ route('admin.steps.show') }}", {
                "_token": "{{ csrf_token() }}"
                , "step_id": stepId
            })
            .done(function(response) {
                $("#stepHtml").html(response.htmlContent);
            })
            .fail(function(xhr, status, error) {
                console.log(xhr);
            })
    }

    function stepQuestions(stepId) {
        document.getElementById("editStepModalTitle").innerHTML = "Questions";
        $("#editStepModal").modal('show');
        $.post("{{ route('admin.questions.show-questions-by-step-id') }}", {
                "_token": "{{ csrf_token() }}"
                , "step_id": stepId
            })
            .done(function(response) {
                $("#stepHtml").html(response.htmlContent);
            })
            .fail(function(xhr, status, error) {
                console.log(xhr);
            })
    }

    function showVideoModal(stepId) {
        $("#showVideoModal").modal('show');
        $.post("{{ route('admin.steps.show') }}", {
                "_token": "{{ csrf_token() }}"
                , "step_id": stepId
            })
            .done(function(response) {
                // $("#videoHtml").html(`<iframe height="350" src="https://youtu.be/EngW7tLk6R8?si=6M25QdNORzGqFp89"></iframe>`);
                $("#videoHtml").html(`<iframe width="560" height="315" src="${response.step.video_url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`);
            })
            .fail(function(xhr, status, error) {
                console.log(xhr);
            })
    }

    const editStepModal = document.getElementById('editStepModal')
    editStepModal.addEventListener('hidden.bs.modal', event => {
        document.getElementById("editStepModalTitle").innerHTML = "";
        $("#stepHtml").html("<div class='row'><div class='col text-center'><div class='spinner-border spinner-border-lg text-primary' role='status'><span class='visually-hidden'>Loading...</span></div></div></div>");
    })
    const videoModal = document.getElementById('showVideoModal')
    videoModal.addEventListener('hidden.bs.modal', event => {
        $("#videoHtml").html("<div class='row'><div class='col text-center'><div class='spinner-border spinner-border-lg text-primary' role='status'><span class='visually-hidden'>Loading...</span></div></div></div>");
    })

</script>
@endsection