@extends('layouts.app')

@section('content')
<div x-data="{ show: false }" x-init="setTimeout(() => show = true, 100)" x-show="show" x-transition.opacity.duration.700ms class="container mx-auto py-10 px-6">

    @if(session('success'))
    <div x-data="{ alert: true }" x-show="alert" x-transition class="mb-6 p-4 rounded-lg bg-green-100 text-green-800 flex justify-between items-center">
        <span>✅ {{ session('success') }}</span>
        <button @click="alert = false" class="text-green-700 font-bold">✖</button>
    </div>
    @endif

    <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-10 text-center">✏️ Edit Dokumen</h1>

    <form action="{{ route('libraries.update', $library->id) }}" method="POST" enctype="multipart/form-data" class="bg-white dark:bg-gray-800 shadow-xl rounded-2xl p-8 space-y-6">
        @csrf
        @method('PUT')

        <div>
            <label for="name" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Dokumen <span class="text-red-500">*</span></label>
            <input type="text" name="name" id="name" class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" value="{{ old('name', $library->name) }}" required>
        </div>

        <div>
            <label for="file_path" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Unggah File Baru (Opsional)</label>
            <input type="file" name="file_path" id="file_path" class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            @if($library->file_path)
                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">📄 File saat ini: <a href="{{ asset('storage/'.$library->file_path) }}" target="_blank" class="text-blue-600 hover:underline">{{ $library->name }}</a></p>
            @endif
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="file_type" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Tipe File <span class="text-red-500">*</span></label>
                <select name="file_type" id="file_type" class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
                    <option value="">-- Pilih Tipe File --</option>
                    <option value="pdf" {{ old('file_type', $library->file_type) == 'pdf' ? 'selected' : '' }}>PDF</option>
                    <option value="doc" {{ old('file_type', $library->file_type) == 'doc' ? 'selected' : '' }}>Dokumen Word</option>
                    <option value="ppt" {{ old('file_type', $library->file_type) == 'ppt' ? 'selected' : '' }}>Presentasi PowerPoint</option>
                    <option value="xls" {{ old('file_type', $library->file_type) == 'xls' ? 'selected' : '' }}>Spreadsheet Excel</option>
                    <option value="txt" {{ old('file_type', $library->file_type) == 'txt' ? 'selected' : '' }}>File Teks</option>
                </select>
            </div>

            <div>
                <label for="url_dokumen" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">URL Dokumen (Opsional)</label>
                <input type="text" name="url_dokumen" id="url_dokumen" class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" value="{{ old('url_dokumen', $library->url_dokumen) }}">
            </div>
        </div>

        <div>
            <label for="description" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Deskripsi Dokumen</label>
            <textarea name="description" id="description" rows="4" class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Tuliskan deskripsi singkat...">{{ old('description', $library->description) }}</textarea>
        </div>

        <!-- Switch Toggle -->
        <div class="flex items-center space-x-4">
            <div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
                <input type="checkbox" name="is_active" id="is_active" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" {{ $library->is_active ? 'checked' : '' }}>
                <label for="is_active" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer dark:bg-gray-600"></label>
            </div>
            <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">Aktifkan Dokumen</span>
        </div>

        <div class="text-center">
            <button type="submit" class="inline-flex items-center px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 shadow-md transition-all">
                💾 Simpan Perubahan
            </button>
        </div>
    </form>
</div>

<!-- Toggle CSS -->
<style>
    .toggle-checkbox:checked {
        right: 0;
        border-color: #3B82F6;
    }
    .toggle-checkbox:checked + .toggle-label {
        background-color: #3B82F6;
    }
    .toggle-checkbox {
        transition: all 0.3s ease-in-out;
        top: 0;
        left: 0;
        transform: translateX(0);
    }
    .toggle-checkbox:checked {
        transform: translateX(100%);
    }
    .toggle-label {
        display: block;
        width: 2.5rem;
        height: 1.5rem;
        background: #ccc;
        border-radius: 9999px;
        position: relative;
        transition: background-color 0.3s ease-in-out;
    }
</style>
@endsection