@extends('admin.layouts.app')
@section('title')
    @if (isset($data))
        Edit Education
    @else
        Add Education
    @endif

@endsection
@section('CSS')
    <style>
        .entry-content {
            font-family: 'Open Sans',
        }
    </style>
@endsection
@section('content')
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row page-title">

                    <div class="col-md-12 d-flex justify-content-between">
                        <div>
                            <h4 class="">
                                @if (isset($data))
                                    Edit Education
                                @else
                                    Add Education
                                @endif
                            </h4>
                        </div>
                        <nav aria-label="breadcrumb" class="float-right ">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a>admin</a></li>
                                <li class="breadcrumb-item"><a>
                                        @if (isset($data))
                                            EditEducation
                                        @else
                                            Add Education
                                        @endif
                                    </a></li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="card-body">

                                <form class="form-group subform" method="post" action="{{ route('education.store') }}"
                                    id="form">
                                    {{ csrf_field() }}
                                    <div class="form-group position-relative mb-3">
                                        @if (isset($data))
                                            <input type="hidden" class="" name='id' value="{{ $data->id }}">
                                            @php
                                                $firstcat = $data->category_id[0];
                                                $collectIDs = $data->category_id;
                                            @endphp
                                        @endif
                                        <label class="form-label">Category:</label>
                                        <select class="form-control category" id="category" name="category[]">
                                            <option value="">Select Category</option>
                                            @foreach ($category as $cat)
                                                @if (isset($data))
                                                    <option value="{{ $cat->id }}"
                                                        {{ $cat->id == $firstcat ? 'selected' : '' }}>
                                                        {{ $cat->category_name }}
                                                    </option>
                                                @else
                                                    <option value="{{ $cat->id }}">{{ $cat->category_name }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                        <span class="errmsg text-danger"></span>

                                        <div id="showSub">
                                            @if (isset($data))

                                                @if (!empty($sub))
                                                    @php
                                                        $selectedCat = array_keys($sub);
                                                        $start = 0;
                                                    @endphp
                                                    @foreach ($sub as $k => $v)
                                                        @if (!empty($v))
                                                            <label class="form-label" data-id="main_{{ $k }}">Sub
                                                                Category</label>
                                                            <select class="form-control category" name="category[]"
                                                                data-id="main_{{ $k }}">

                                                                <option value="">Select SubCategory</option>

                                                                @if (count($selectedCat) > 1)
                                                                    @foreach ($v as $index => $catName)
                                                                        @if (isset($selectedCat[$start + 1]))
                                                                            <option value="{{ $index }}"
                                                                                {{ $index == $selectedCat[$start + 1] ? 'selected' : '' }}>
                                                                                {{ $catName }}</option>
                                                                        @endif
                                                                    @endforeach
                                                                @else
                                                                    @foreach ($v as $index => $catName)
                                                                        <option value="{{ $index }}">
                                                                            {{ $catName }}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        @endif
                                                        @php
                                                            $start++;
                                                        @endphp
                                                    @endforeach
                                                @endif
                                            @endif
                                        </div>
                                        <div>
                                            <label class="form-label mt-2">Title:</label>
                                            <input class="form-control" type="text" name="title"
                                                value="{{ isset($data) ? $data->title : '' }}" id="title">
                                            <span class="errmsg text-danger"></span>
                                        </div>
                                        <div>
                                            <label class="form-label mt-2">Sub Title:</label>
                                            <input class="form-control" type="text" name="subTitle"
                                                value="{{ isset($data) ? $data->sub_title : '' }}" id="subTitle">
                                            <span class="errmsg text-danger"></span>
                                        </div>
                                        <div>
                                            <label class="form-label mt-2">Description:</label>
                                            <textarea class="form-control" name="description" id="description" cols="30" rows="10"
                                                style="font-family: 'Open Sans', sans-serif;">
                                                {!! isset($data) ? $data->description : '' !!}
                                            </textarea>
                                            <span id="descerr" class="errmsg text-danger" style="display: none">Please
                                                enter description</span>
                                        </div>
                                        <div>
                                            <label class="form-label mt-2">Date:</label>
                                            <input class="form-control" type="date" name="date"
                                                value="{{ isset($data) ? $data->date : '' }}" id="subTitle">
                                            <span class="errmsg text-danger"></span>
                                        </div>
                                        <div class="mt-2 d-flex flex-column">
                                            <div class='d-flex align-items-center'>
                                                <label class="form-label mt-2">Wistia Id:</label>
                                                <div class="form-check form-check-inline ml-3">
                                                    <input class="form-check-input" type="radio" name="visibility"
                                                        id="inlineRadio1" value="0"
                                                        @if (isset($data)) {{ $data->visibility == '0' ? 'checked' : '' }} @endif>
                                                    <label class="form-check-label" for="inlineRadio1">Public</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="visibility"
                                                        id="inlineRadio2" value="1"
                                                        @if (isset($data)) {{ $data->visibility == '1' ? 'checked' : '' }} @endif>
                                                    <label class="form-check-label" for="inlineRadio2">Private</label>
                                                </div>
                                                <span id='visibilityerr' class="errmsg text-danger ml-2"
                                                    style="display: none">Please select visibility</span>

                                            </div>
                                            <div class='d-flex flex-column '>

                                                <input class="form-control" type="text" name="wistiaId"
                                                    value="{{ isset($data) ? $data->video_url : '' }}" id="wistiaId">

                                                <span class="errmsg text-danger ml-2"></span>
                                            </div>
                                        </div>

                                        @if (isset($data))
                                            @php
                                                $platform = $data->platform;
                                                $feature = $data->feature;
                                                $p = $platform[0];
                                                $f = $feature[0];
                                            @endphp
                                        @endif
                                        <div class="mt-2 d-flex flex-column">
                                            <div class='d-flex align-items-center'>
                                                <label class="form-label m-0 ">Platform:</label>
                                                <div class="form-check form-check-inline">
                                                    <label class="form-label m-2">Feature:</label>
                                                    <input type="hidden" name="feature[]" id="feature_0"
                                                        @if (isset($data)) {{ $f == '1' ? 'value=1' : 'value=0' }} @endif>
                                                    <input class="form-check-input feature" type="checkbox" id="feature"
                                                        value="yes"
                                                        @if (isset($data)) {{ $f == '1' ? 'checked' : '' }} @endif>
                                                    <span class="errmsg text-danger "></span>

                                                </div>
                                            </div>
                                            <div class='d-flex flex-column'>
                                                <select class="form-control " id="" name="platform[]">
                                                    <option value="0" selected>Select Platform</option>
                                                    @foreach ($platformName as $plat)
                                                        <option value="{{ $plat->id }}"
                                                            @if (isset($data)) {{ $p == $plat->id ? 'selected' : '' }} @endif>
                                                            {{ $plat->name }}
                                                        </option>
                                                    @endforeach

                                                </select>

                                                <span id="platformerr" class="errmsg text-danger"
                                                    style="display:none ">Please select platform</span>

                                            </div>
                                        </div>

                                        <div id="additional">
                                            @if (isset($data))
                                                @if (isset($platform))
                                                    @if (count($platform) == count($feature))
                                                        @foreach ($platform as $index => $value)
                                                            @if ($index > 0)
                                                                <div id='new_{{ $index }}'>
                                                                    <div class="mt-2 d-flex flex-column">
                                                                        <div class='d-flex align-items-center'>
                                                                            <label
                                                                                class="form-label m-0 ">Platform:</label>
                                                                            <div class="form-check form-check-inline">
                                                                                <label
                                                                                    class="form-label m-2">Feature:</label>
                                                                                <input type="hidden" name="feature[]"
                                                                                    id='feature_{{ $index }}'
                                                                                    {{ $feature[$index] == '1' ? 'value=1' : 'value=0' }}>
                                                                                <input class="form-check-input feature"
                                                                                    type="checkbox" id="feature"
                                                                                    value="yes"
                                                                                    {{ $feature[$index] == '1' ? 'checked' : '' }}
                                                                                    data-index="{{$index}}">
                                                                            </div>
                                                                        </div>
                                                                        <div class='d-flex align-items-center'>
                                                                            <select class="form-control" id=""
                                                                                name="platform[]" placeholder="platform">
                                                                                <option value="0" selected>Select
                                                                                    Platform
                                                                                </option>
                                                                                @foreach ($platformName as $plat)
                                                                                    <option value="{{ $plat->id }}"
                                                                                        @if (isset($data)) {{ $value == $plat->id ? 'selected' : '' }} @endif>
                                                                                        {{ $plat->name }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                        <div class="d-flex justify-content-end px-2 m-2">
                                                                            <div id="Remove"
                                                                                data-remove="{{ $index }}"
                                                                                class="d-flex justify-content-center align-items-center">
                                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                                    style="min-width:24px;"
                                                                                    preserveAspectRatio="xMidYMid meet"
                                                                                    viewBox="0 0 24 24">
                                                                                    <g fill="none"
                                                                                        stroke="currentColor"
                                                                                        stroke-linecap="round"
                                                                                        stroke-linejoin="round"
                                                                                        stroke-width="2">
                                                                                        <circle cx="12"
                                                                                            cy="12" r="10" />
                                                                                        <path d="M8 12h8" />
                                                                                    </g>
                                                                                </svg>
                                                                                <p class="m-0 ml-2">Remove</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                @endif
                                            @endif
                                        </div>
                                        <div class="d-flex justify-content-end px-2 m-2">
                                            <div id="Add">
                                                <div class="d-flex justify-content-center align-items-center">
                                                    <svg xmlns="http://www.w3.org/2000/svg" style="min-width:24px;"
                                                        preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                                        <g fill="none" stroke="currentColor" stroke-linecap="round"
                                                            stroke-linejoin="round" stroke-width="2">
                                                            <circle cx="12" cy="12" r="10" />
                                                            <path d="M12 8v8m-4-4h8" />
                                                        </g>
                                                    </svg>
                                                    <p class="m-0 ml-2">Add</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="btn btn-success" type="submit">
                                        @if (isset($data))
                                            Update
                                        @else
                                            Save
                                        @endif
                                    </button>
                                    <a href="{{ route('education.list') }}" class="btn btn-danger">Cancel</a>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="lastID"
        @if (isset($platform)) @if (count($platform) > 0)
          value="{{ count($platform) }}"
         @else value="1" @endif
    @else value="1" @endif
    >
@endsection
@section('js')
    <script nonce="{{ $cspNonce }}" type="text/javascript" src="{{ asset(JS) }}/customjs.js"></script>
    <script nonce="{{ $cspNonce }}">
        ApplyCKEditor('description');
        let pform = @json($platformName);
        $(document).on("click", "#Remove", function() {
            let id = $(this).attr("data-remove");
            $(`#new_${id}`).remove();
        });
        $(document).on("change", ".feature", function(e) {
            let index = $(this).attr('data-index')?? 0;
           return (this.checked)?$(`#feature_${index}`).val('1'):$(`#feature_${index}`).val('0')
        });
    </script>


    <script nonce="{{ $cspNonce }}" type="text/javascript">
        let output = "";
        let catCollection = "";
        let currentId = "";
        let is_start = false;
        let showSub = document.getElementById('showSub');

        $(document).on("change", ".category", function(e) {
            show(this.value, e)
        });

        function show(id, event) {
            if (event.target.getAttribute('id') == 'category') {
                showSub.innerHTML = "";
            }

            $.ajax({
                type: "post",
                url: "{{ route('education.subcat') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    catId: id,
                },
                success: function(response) {

                    response.forEach(e => {
                        catCollection += `<option value="${e.id}">${e.category_name}</option>`;
                    });

                    output = `
                                <label class="form-label" data-id="main_${id}">Sub Category</label>
                                <select class="form-control category"
                                name="category[]" data-id="main_${id}">

                                <option value="">Select SubCategory</option>
                                ${catCollection}
                                </select>`;

                    //  remove below divs
                    currentId = event.target.getAttribute('data-id');

                    document.querySelectorAll(`[data-id]`).forEach((e, index) => {

                        if (is_start == true) {
                            e.remove();
                        }

                        if (e.getAttribute('data-id') == currentId) {
                            if (e.getAttribute('class') == "form-control") {
                                is_start = true;
                            }
                        }
                    });

                    if (response == "") {
                        output = "";
                    }
                    //append
                    $(showSub).append(output);

                    // reset
                    output = "";
                    catCollection = "";
                    is_start = false;
                    currentId = "";
                }
            });
        }
    </script>
    <script nonce="{{ $cspNonce }}" src="{{ asset(JS) }}/education.js"></script>
@endsection