@extends("admin.layout.layout")

@section("styles")
    @php
        $titulo = "Editar Bitácora";
        $modulo = "Bitácora";
        $vista = "Editar Bitácora";
    @endphp
    <title>{{ getenv("APP_NAME") }} | {{ $titulo }}</title>
@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        @if ($errors->any())
            <div class="alert alert-danger">
                <h5 class="mb-2 fw-bold">Se encontraron los siguientes errores:</h5>
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form action="{{ route('admin::bitacora.guardar', $bitacora) }}" method="POST" enctype="multipart/form-data" class="p-4 rounded shadow-sm bg-white">
            @csrf

            <div class="row">

                <div class="col-md-4">
                    <label for="fecha" class="form-label fw-semibold">Fecha</label>
                    <input type="date" name="fecha" id="fecha" class="form-control form-control-sm" value="{{ $bitacora->fecha }}" required>
                </div>
            </div>
            <div class="row">

                <div class="mb-3">
                    <label for="bitacora" class="form-label fw-semibold">Contenido</label>
                    <textarea name="bitacora" id="bitacora" rows="5" class="form-control" maxlength="2000" required>{{ $bitacora->bitacora }}</textarea>
                    <div class="form-text text-end"><span id="charCount">{{ strlen($bitacora->bitacora) }}</span>/2000 caracteres</div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <label for="recordatorio" class="form-label fw-semibold">Fecha de recordatorio (opcional)</label>
                    <input type="date" name="recordatorio" id="recordatorio" class="form-control form-control-sm" value="{{ $bitacora->recordatorio }}">
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">Archivo adjunto</label>
                    @if ($bitacora->hasMedia('bitacora'))
                        @php
                            $media = $bitacora->getFirstMedia('bitacora');
                            $mime = $media->mime_type;
                            $icon = match (true) {
                                str_contains($mime, 'pdf') => 'bi-file-earmark-pdf text-danger',
                                str_contains($mime, 'word') => 'bi-file-earmark-word text-primary',
                                str_contains($mime, 'excel') => 'bi-file-earmark-excel text-success',
                                str_contains($mime, 'image') => 'bi-file-earmark-image text-warning',
                                default => 'bi-file-earmark text-muted',
                            };
                        @endphp

                        <div class="mb-2">
                            <i class="bi {{ $icon }} me-1"></i>
                            <a href="{{ route('admin::bitacora.descargar', $media->id) }}" class="text-decoration-underline">
                                Descargar archivo ({{ strtoupper($media->extension) }})
                            </a>
                        </div>

                        <label for="archivo" class="form-label fw-semibold mt-2">Reemplazar archivo (opcional)</label>
                        <input type="file" name="archivo" id="archivo" class="form-control form-control-sm" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                    @else
                        <label for="archivo" class="form-label fw-semibold">Adjuntar archivo (opcional)</label>
                        <input type="file" name="archivo" id="archivo" class="form-control form-control-sm" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                    @endif
                </div>

            </div>


            <div class="text-end">
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-save me-1"></i> Guardar cambios
                </button>
            </div>
        </form>
    </div>
@endsection

@section("scripts")
    <script>
        document.getElementById('bitacora').addEventListener('input', function () {
            document.getElementById('charCount').textContent = this.value.length;
        });
    </script>
@endsection