@extends('layouts.app')
@inject('employeeRepository', 'Modules\Employee\Repositories\EmployeeRepository')
@use('Carbon\Carbon')

@section('content')
        <div class="container-fluid">
            <x-dashboard.breadcumb :title="$title" />


            <div class="row">
                <!-- Reminder Details Box -->
                <div class="col-md-7">
                    <div class="card card-body">
                        <!-- Reminder Details -->
                        <div class="col-md">
                            <h4 class="fw-bold">{{ $reminder->title }}</h4>
                            <div class="hstack flex-wrap gap-3">
                                <div><i class="ri-calendar-line me-1 align-bottom"></i> {{ Carbon::parse($reminder->reminder_date)->format('d M, Y') }}</div>
                                <div><i class="ri-clock-line me-1 align-bottom"></i> {{ Carbon::parse($reminder->reminder_time)->format('h:i A') }}</div>
                            </div>
                        </div>

                        <div class="border-top border-top-dashed mt-4 pt-3">
                            <div class="row gy-2">
                                <div class="col-lg-6 col-sm-6">
                                    <div>
                                        <p class="text-uppercase fw-medium mb-2">Reminder Date:</p>
                                        <h5 class="fs-15 mb-0">{{ Carbon::parse($reminder->reminder_date)->format('d M, Y') }}</h5>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-sm-6">
                                    <div>
                                        <p class="text-uppercase fw-medium mb-2">Reminder Time:</p>
                                        <h5 class="fs-15 mb-0">{{ Carbon::parse($reminder->reminder_time)->format('h:i A') }}</h5>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div>
                                        <p class="text-uppercase fw-medium mb-2">Description:</p>
                                        <h5 class="fs-13 mb-0" id="description">
                                            @php
                                                $fullDescription = strip_tags($reminder->description);
                                                $shortDescription = implode(' ', array_slice(explode(' ', $fullDescription), 0, 100)) . '...';
                                                $isLongDescription = str_word_count($fullDescription) > 100;
                                            @endphp

                                            <h5 class="fs-13 mb-0" id="description">
                                                {!! $shortDescription !!}
                                            </h5>

                                            @if($isLongDescription)
                                                <a href="javascript:void(0);" id="read-more" class="text-primary">
                                                    Read More
                                                </a>
                                            @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Actions: Edit and Back Buttons -->
                        <div class="mt-3 text-end">
                            <a href="{{ route('reminder.index') }}" class="btn btn-sm btn-danger">
                                <i class="ri-arrow-left-circle-fill text-white me-2"></i>Back
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Attached Documents Section -->
                <div class="col-md-5">
                    <div class="card card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="fw-semibold mb-0">
                                <i class="ri-attachment-line me-2 text-muted"></i>Attached Documents
                            </h5>
                            @if($reminder->files && count($reminder->files) > 0)
                                <span class="badge bg-info-subtle text-info">
                                    {{ count($reminder->files) }} File(s)
                                </span>
                            @endif
                        </div>

                        @if($reminder->files && count($reminder->files) > 0)
                            <div class="file-list">
                                @foreach($reminder->files as $file)
                                    @php
                                        $fileExtension = pathinfo($file, PATHINFO_EXTENSION);
                                        $fileSize = filesize(storage_path('app/public/' . $file)) / 1024; // Size in KB
                                    @endphp
                                    <div class="file-item d-flex align-items-center justify-content-between border-bottom py-2">
                                        <div class="d-flex align-items-center">
                                            <div class="file-icon me-3">
                                                @switch($fileExtension)
                                                    @case('pdf')
                                                        <i class="ri-file-pdf-line text-danger fs-3"></i>
                                                        @break
                                                    @case('jpg')
                                                    @case('jpeg')
                                                    @case('png')
                                                    @case('gif')
                                                        <i class="ri-image-line text-info fs-3"></i>
                                                        @break
                                                    @case('doc')
                                                    @case('docx')
                                                        <i class="ri-file-word-line text-primary fs-3"></i>
                                                        @break
                                                    @case('xls')
                                                    @case('xlsx')
                                                        <i class="ri-file-excel-line text-success fs-3"></i>
                                                        @break
                                                    @default
                                                        <i class="ri-file-line text-muted fs-3"></i>
                                                @endswitch
                                            </div>
                                            <div class="file-details">
                                                <h6 class="mb-1 text-truncate" style="max-width: 200px;">
                                                    {{ basename($file) }}
                                                </h6>
                                                <small class="text-muted">
                                                    {{ number_format($fileSize, 2) }} KB |
                                                    {{ strtoupper($fileExtension) }}
                                                </small>
                                            </div>
                                        </div>

                                        <div class="file-actions">
                                            <!-- Image: Lightbox View -->
                                            @if(in_array($fileExtension, ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg']))
                                                <button class="btn btn-sm btn-outline-primary"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#imageModal-{{ $loop->index }}"
                                                        title="View Image">
                                                    <i class="ri-eye-line"></i> View Image
                                                </button>

                                            @elseif(in_array($fileExtension, ['pdf']))
                                                <a href="{{ asset('storage/'.$file) }}"
                                                target="_blank"
                                                class="btn btn-sm btn-outline-danger me-1"
                                                title="View PDF">
                                                    <i class="ri-file-pdf-line"></i>
                                                </a>
                                            @endif

                                            <a href="{{ asset('storage/'.$file) }}"
                                            download
                                            class="btn btn-sm btn-outline-success"
                                            title="Download">
                                                <i class="ri-download-2-line"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Existing Image Modal (unchanged) -->
                                    @if(in_array($fileExtension, ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg']))
                                        <div class="modal fade" id="imageModal-{{ $loop->index }}" tabindex="-1" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-body text-center">
                                                        <img src="{{ asset('storage/'.$file) }}" class="img-fluid rounded" alt="Image">
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-4">
                                <i class="ri-attachment-2-line text-muted" style="font-size: 3rem;"></i>
                                <p class="text-muted mt-2">No files attached to this reminder</p>
                            </div>
                        @endif
                    </div>
                     <!-- Assigned Members Section Below the Attached Documents -->
                     @if($reminder->members && count($reminder->members) > 0)
                     <div class="card card-body mt-3">
                         <h5 class="fw-semibold mb-3">Assigned Members</h5>
                         <ul class="list-group list-group-flush">
                             @foreach($reminder->members['ids'] as $memberId)
                                 @php
                                     $employee = $employeeRepository->getEmployeeById($memberId);
                                 @endphp
                                 <li class="list-group-item d-flex align-items-center py-1">
                                     <div class="flex-shrink-0">
                                         <img src="{{ $employee->profile_pic }}" alt="profile" class="avatar-xs rounded-circle">
                                     </div>
                                     <div class="flex-grow-1 ms-2">
                                         <h6 class="mb-0 fs-14">{{ $employee->full_name }}</h6>
                                         <p class="text-muted mb-0 fs-12">{{ $employee->email }}</p>
                                     </div>
                                 </li>
                             @endforeach
                         </ul>
                     </div>
                 @else
                     <p class="text-muted text-center">No members assigned.</p>
                 @endif
                </div>
            </div>
        </div>
@endsection

@push('js')
    <script>
        $(document).ready(function(){
        const $description = $('#description');
        const $readMore = $('#read-more');

        const fullDescription = `{!! addslashes(strip_tags($reminder->description)) !!}`;
        const shortDescription = `{{ implode(' ', array_slice(explode(' ', strip_tags($reminder->description)), 0, 100)) }}...`;

        $readMore.click(function(){
            if ($description.hasClass('expanded')) {
                $description.removeClass('expanded');
                $description.text(shortDescription);
                $readMore.text('Read More');
            } else {
                $description.addClass('expanded');
                $description.text(fullDescription);
                $readMore.text('Show Less');
            }
        });
            });
    </script>
@endpush