@extends('admin.layouts.app')

@section('title', 'Materials')
@section('page-title', 'Material Management')
@section('page-title-jp', '教材管理')

@section('content')
<form method="GET">
    <x-admin.data-table 
        :headers="[
            ['label' => 'Title', 'sortable' => true, 'width' => '25%'],
            ['label' => 'Source', 'sortable' => true, 'width' => '15%'],
            ['label' => 'File', 'sortable' => false, 'width' => '15%'],
            ['label' => 'Description', 'sortable' => false, 'width' => '30%'],
            ['label' => 'Actions', 'sortable' => false, 'align' => 'center', 'width' => '15%'],
        ]"
        :searchable="true"
        searchPlaceholder="Search materials..."
        :hoverable="true"
        :paginator="$materials">
        
        @foreach ($materials as $material)
        <tr>
            <td><strong>{{ $material->title }}</strong></td>
            <td>
                @if($material->source)
                    <span class="badge badge-primary">{{ ucfirst($material->source) }}</span>
                @else
                    <span class="text-muted">N/A</span>
                @endif
            </td>
            <td>
                @if($material->file_path)
                    <a href="{{ asset('storage/' . $material->file_path) }}" target="_blank" class="btn-action btn-view" title="Download">
                        <x-icon name="download" size="16" style="display: inline-block; vertical-align: middle; margin-right: 4px;" />
                        Download
                    </a>
                @else
                    <span class="text-muted">No file</span>
                @endif
            </td>
            <td class="text-truncate">{{ Str::limit($material->description, 60) }}</td>
            <td class="center">
                <div class="action-buttons">
                    <a href="{{ route('admin.materials.edit', $material) }}" class="btn-action btn-edit">Edit</a>
                    <form action="{{ route('admin.materials.destroy', $material) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this material?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn-action btn-delete">Delete</button>
                    </form>
                </div>
            </td>
        </tr>
        @endforeach
    </x-admin.data-table>
</form>
@endsection