@extends('layouts.app')

@section('content')
    <div class=" mx-auto bg-white p-6 rounded shadow">
        @if (session('success'))
            <div class="max-w-md mx-auto mb-4 p-4 text-green-800 bg-green-100 border border-green-300 rounded-lg">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="max-w-md mx-auto mb-4 p-4 text-red-800 bg-red-100 border border-red-300 rounded-lg">
                {{ session('error') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="max-w-md mx-auto mb-4 p-4 text-red-800 bg-red-100 border border-red-300 rounded-lg">
                <ul class="list-disc pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <a href="{{ asset('sample/materials-sample.csv') }}"
            class="inline-block px-4 py-2 bg-gray-200 text-gray-800 rounded-lg 
              hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400">
            📥 Download Sample CSV
        </a>
        <form action="{{ route('materials.import') }}" method="POST" enctype="multipart/form-data"
            class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Select CSV File
                </label>
                <input type="file" name="csv_file" accept=".csv" required
                    class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer 
                      bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>

            <button type="submit"
                class="w-full px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">
                Import
            </button>
        </form>
        <div class="flex items-center justify-between">
            <h1 class="text-xl font-bold mb-4">Sign Materials</h1>
            <a href="{{ route('sign-materials.create') }}"
                class="bg-blue-500 text-white px-4 py-2 rounded mb-4 inline-block">+
                Add Material</a>
        </div>
        <table class="min-w-full table-auto border border-gray-300">
            <thead class="bg-gray-200">
                <tr>
                    <th class="px-4 py-2 border">#</th>
                    <th class="px-4 py-2 border">Name</th>
                    <th class="px-4 py-2 border">Price</th>
                    <th class="px-4 py-2 border">Product Code</th>
                    <th class="px-4 py-2 border">Unit (UOM)</th>
                    <th class="px-4 py-2 border">Dense Weight Per UOM</th>
                    <th class="px-4 py-2 border">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($materials as $index => $material)
                    <tr class="text-center">
                        <td class="px-4 py-2 border">{{ $index + 1 }}</td>
                        <td class="px-4 py-2 border">{{ $material->name }}</td>
                        <td class="px-4 py-2 border">
                            @if ($material->price !== null)
                                ${{ $material->price }}
                            @else
                                —
                            @endif
                        </td>
                        <td class="px-4 py-2 border">{{ $material->product_code ?? 'N/A' }}</td>
                        <td class="px-4 py-2 border">{{ $material->uom ?? '—' }}</td>
                        <td class="px-4 py-2 border">{{ $material->dense_weight_per_uom ?? '—' }}</td>
                        <td class="px-4 py-2 border space-x-2">
                            <a href="{{ route('sign-materials.edit', $material->id) }}"
                                class="text-blue-600 hover:underline">Edit</a>

                            <form action="{{ route('sign-materials.destroy', $material->id) }}" method="POST"
                                class="inline-block" onsubmit="return confirm('Delete this material?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:underline">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-4 py-2 border text-center text-gray-500">No materials found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection