@extends('layouts.cmsapp')

@section('cms_content')

    <div class="main-content">

        <div class="row">
            <div class="col-lg-8">
                <h1 class="page-title">{{ $title }}</h1>

                <ol class="breadcrumb breadcrumb-2">
                    <li>
                        <a href="{{ route('home') }}">
                            <i class="fa fa-home"></i> Home
                        </a>
                    </li>
                    <li class="active"><strong>{{ $title }}</strong></li>
                </ol>
            </div>

            <div class="col-lg-4">
                <a href="{{ route('department-content.index', ['section' => $title, 'id' => $id]) }}"
                    class="btn btn-success pull-right">
                    Back
                </a>
            </div>
        </div>

        <div class="line-dashed"></div>

        <form method="POST" action="{{ route('department-content.save', ['section' => $title, 'id' => $id]) }}"
            enctype="multipart/form-data" class="form-horizontal">
            @csrf
            <div class="panel panel-default">
                <div class="panel-body">

                    {{-- Department --}}
                    @if (in_array(auth()->user()->role, ['SA', 'A']))
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Department Course</label>
                            <div class="col-sm-10">
                                <select name="subject" class="form-control" required>
                                    <option value="">Select Course</option>
                                    @foreach ($subjects as $subject)
                                        <option value="{{ $subject->id }}" {{ old('subject') == $subject->id ? 'selected' : '' }}>
                                            {{ $subject->subject }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @else
                        <input type="hidden" name="subject" value="{{ auth()->user()->subject }}">
                    @endif
                    {{-- Page --}}
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Page Type</label>
                        <div class="col-sm-10">
                            <select name="page_type" id="page_type" class="form-control" required>
                                <option value="">Select Page</option>
                                @foreach (getDepartmentPageType() as $key => $item)
                                    <option value="{{ $key }}" {{ old('page_type', 'content') == $key ? 'selected' : '' }}>
                                        {{ $item }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- Title --}}
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Title</label>
                        <div class="col-sm-10">
                            <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                        </div>
                    </div>

                    <div id="content_div" style="{{ old('page_type', 'content') == 'content' ? '' : 'display:none;' }}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Content</label>
                            <div class="col-sm-10">
                                <textarea class="span12" id="editor1" name="contents" rows="12"
                                    style="height:700px;">{{ old('contents') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div id="pdf_div" style="{{ old('page_type') == 'embed_pdf' ? '' : 'display:none;' }}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Embed PDF</label>
                            <div class="col-sm-10">
                                <input type="file" name="pdf_contents" id="pdf_contents" class="form-control" accept=".pdf,application/pdf">
                            </div>
                        </div>
                    </div>
                    {{-- Submit --}}
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            <button type="submit" class="btn btn-primary">
                                Submit
                            </button>
                        </div>
                    </div>

                </div>
            </div>

        </form>

    </div>

@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const pageTypeSelect = document.getElementById('page_type');
        const contentDiv = document.getElementById('content_div');
        const pdfDiv = document.getElementById('pdf_div');
        const pdfInput = document.getElementById('pdf_contents');

        function toggleFields() {
            const selectedType = pageTypeSelect.value;
            if (selectedType === 'content') {
                contentDiv.style.display = 'block';
                pdfDiv.style.display = 'none';
                pdfInput.required = false;
            } else if (selectedType === 'embed_pdf') {
                contentDiv.style.display = 'none';
                pdfDiv.style.display = 'block';
                pdfInput.required = true;
            } else {
                contentDiv.style.display = 'none';
                pdfDiv.style.display = 'none';
                pdfInput.required = false;
            }
        }

        pageTypeSelect.addEventListener('change', toggleFields);
        
        // Initial call to set correct visibility
        toggleFields();
    });
</script>