@extends('admin.layout.app')
@section('title', 'Create New Course')
@push('styles')
    <style>
        .dropzone {
            border: 2px dashed #bbb;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            color: #666;
            max-width: 180px;
            margin: auto;
            position: relative;
        }

        .dropzone.hover {
            border-color: #333;
            background: #f8f8f8;
        }

        .dropzone img {
            max-width: 150px;
            max-height: 150px;
            object-fit: cover;
            display: none;
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .dropzone input[type="file"] {
            display: none;
        }
    </style>
@endpush
@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Add Unit</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="students.html">Units</a></li>
                            <li class="breadcrumb-item active">Add Unit</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-3 mb-4 row">
            <div class="mb-4 d-flex">
                <button type="button" class="me-2 btn btn-outline-primary" data-bs-toggle="modal"
                    data-bs-target="#con-close-modal"> <i class="fas fa-plus"></i> Add A Unit
                </button>
                @if (!$course->publish_status)
                    <form action="{{ route('courses.publish', $course->id) }}" method="POST">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-upload me-1"></i> Publish
                        </button>
                    </form>
                @endif
            </div>

            <!-- Course Image -->
            <div class="col-md-4">
                @if ($course->image)
                    <img src="{{ asset('storage/' . $course->image->path) }}" alt="Course Image" class="rounded img-fluid">
                @else
                    <img src="{{ asset('images/default-course.png') }}" alt="Default Image" class="rounded img-fluid">
                @endif
            </div>

            <div class="col-md-8 d-flex flex-column justify-content-center">
                <h3 class="mb-3 fw-bold text-primary">{{ $course->name }}</h3>


                <ul class="list-unstyled">
                    <li class="mb-2 d-flex align-items-center">
                        <span><strong>Level : </strong> {{ $course->level->name }}</span>
                    </li>
                    <li class="mb-2 d-flex align-items-start">
                        <span><strong>Description : </strong> {{ $course->description }}</span>
                    </li>

                    <li class="mb-2 d-flex align-items-center">
                        <i class="bi bi-person-fill me-2 text-secondary"></i>
                        <span><strong>Author:</strong> {{ $course->author }}</span>
                    </li>
                    <li class="mb-2 d-flex align-items-center">
                        <div class="mb-2">
                            @if ($course->publish_status)
                                <span class="badge badge-soft-success">Published</span>
                            @else
                                <span class="badge badge-soft-warning">Not Published</span>
                            @endif
                        </div>
                    </li>
                </ul>
                <x-modal.unit-form-modal :courseId="$courseId" :lessonTypes="$lessonTypes" />



            </div>

        </div>


        <!-- Search Form -->
        <form action="{{ route('courses.units.index', $courseId) }}" method="GET" class="mb-3">
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="form-group">
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control"
                            placeholder="Search by name, prefix, or number...">
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="d-flex">
                        <div class="search-student-btn">
                            <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        @if (request('search'))
                            <div class="search-student-btn ms-2">
                                <a href="{{ route('courses.units.index', $courseId) }}" class="btn btn-secondary">Reset</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </form>

        <div class="row">
            @if ($units->count())
                <h3 class="text-primary">Units</h3>
            @endif

            @forelse ($units as $unit)
                <div class="col-md-6 col-xl-4 col-sm-12 d-flex">
                    <div class="blog grid-blog flex-fill">
                        <div class="blog-image">
                            <a href="#">
                                @if ($unit->image)
                                    <img src="{{ asset('storage/' . $unit->image->path) }}" alt="Course Image"
                                        class="rounded img-fluid">
                                @else
                                    <img src="{{ asset('images/default-course.png') }}" alt="Default Image"
                                        class="rounded img-fluid">
                                @endif
                            </a>
                        </div>
                        <div class="blog-content">
                            <ul class="entry-meta meta-item">
                                <li>
                                    <div class="post-author">
                                        <a href="#">
                                            <span>
                                                <span class="post-title">{{ $unit->full_name }}</span>
                                                <span class="post-date"><i class="far fa-clock"></i>
                                                    {{ $unit->created_at->format('d-m-Y') }}</span>
                                            </span>
                                        </a>
                                    </div>
                                </li>

                            </ul>
                            <p>{{ Str::limit($unit->description, 120) }}</p>
                            @if (count($unit->lesson_types))
                                @php
                                    $badgeColors = [
                                        'primary',
                                        'secondary',
                                        'success',
                                        'danger',
                                        'warning',
                                        'info',
                                        'dark',
                                    ];
                                    $colorIndex = 0;
                                @endphp

                                @foreach ($unit->lesson_types as $lessonTypeId)
                                    @php
                                        $type = $lessonTypes->firstWhere('id', $lessonTypeId);
                                        $color = $badgeColors[$colorIndex % count($badgeColors)];
                                        $colorIndex++;
                                    @endphp

                                    @if ($type)
                                        <span class="badge badge-soft-{{ $color }}">{{ $type->name }}</span>
                                    @endif
                                @endforeach
                            @endif

                        </div>
                        <div class="row">
                            <div class="px-3 edit-options d-flex justify-content-between align-items-center">
                                <div class="edit-delete-btn">
                                    <a href="{{ route('courses.units.edit', [$courseId, $unit->id]) }}"
                                        class="text-success">
                                        <i class="feather-edit-2"></i> Edit
                                    </a>

                                    <a href="#" class="text-danger" data-bs-toggle="modal"
                                        data-bs-target="#deleteModal{{ $unit->id }}">
                                        <i class="feather-trash-2 me-1"></i> Delete
                                    </a>

                                    {{-- <a href="{{ route('courses.units.edit', [$courseId, $unit->id]) }}"
                                        class="btn btn-sm btn-warning">

                                    </a> --}}
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <!-- Delete Modal -->
                <div class="modal fade contentmodal" id="deleteModal{{ $unit->id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content doctor-profile">
                            <div class="pb-0 modal-header border-bottom-0 justify-content-end">
                                <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="text-center delete-wrap">
                                    <div class="mb-3 del-icon"><i class="fa-solid fa-circle-xmark fa-3x text-danger"></i>
                                    </div>
                                    <h2>Are you sure you want to delete this unit?</h2>
                                    <form action="{{ route('courses.units.destroy', [$courseId, $unit->id]) }}"
                                        method="POST" class="gap-2 mt-3 d-flex justify-content-center">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-success">Yes</button>
                                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="alert alert-warning">No units in this course</div>
            @endforelse
        </div>

        <div class="p-2 d-flex flex-column flex-md-row justify-content-between align-items-center">
            <div class="mb-2 mb-md-0 text-muted">
                Showing {{ $units->firstItem() }} to {{ $units->lastItem() }} of {{ $units->total() }}
                entries
            </div>

            <div class="p-2 d-flex flex-column flex-md-row justify-content-between align-items-center">
                <div class="mb-2 mb-md-0 text-muted">
                    Showing {{ $units->firstItem() }} to {{ $units->lastItem() }} of {{ $units->total() }} entries
                </div>

                <div>
                    {{ $units->links() }}
                </div>
            </div>
        </div>





    </div>
@endsection
@push('scripts')
    <script>
        $(function() {
            var dropzone = $('#photo-dropzone');
            var inputFile = $('#student-photo');
            var preview = $('#photo-preview');
            var uploadText = $('#upload-text');
            var uploadBtn = $('#upload-btn');

            // Only trigger inputFile click when clicking on text or button, NOT the entire dropzone
            uploadText.on('click', function(e) {
                e.stopPropagation();
                inputFile.trigger('click');
            });

            uploadBtn.on('click', function(e) {
                e.stopPropagation();
                inputFile.trigger('click');
            });

            // Optional: drag/drop highlighting
            dropzone.on('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.addClass('hover');
            });

            dropzone.on('dragleave drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.removeClass('hover');
            });

            // Handle dropped files
            dropzone.on('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();

                var files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    inputFile.prop('files', files); // update input's files for form submission
                    previewFile(files[0]);
                }
            });

            // Handle file selected from dialog
            inputFile.on('change', function() {
                if (this.files && this.files[0]) {
                    previewFile(this.files[0]);
                }
            });

            function previewFile(file) {
                if (!file.type.startsWith('image/')) {
                    alert('Please upload an image file.');
                    preview.hide();
                    inputFile.val('');
                    uploadText.show();
                    return;
                }

                var reader = new FileReader();
                reader.onload = function(e) {
                    preview.attr('src', e.target.result).show();
                    uploadText.hide();
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
@endpush