@extends('layouts.app')
@section('title', 'Material Catalogue')
@section('breadcrumb')<span class="text-white">Material Catalogue</span>@endsection

@section('content')
<div x-data="{ activeTab: '{{ $types->first()?->id ?? 'new' }}', showNewType: false }">

    {{-- Page header --}}
    <div class="flex items-center justify-between mb-5">
        <div>
            <h1>Material Catalogue</h1>
            <p>Manage material types and their items. W/Sale = internal cost, Retail = client price.</p>
        </div>
        <button @click="showNewType = !showNewType" class="btn btn-primary">
            <i class="fas fa-plus mr-1"></i> Add Type
        </button>
    </div>

    {{-- Add new type form --}}
    <div x-show="showNewType" x-collapse class="card p-5 mb-5">
        <h3 class="mb-4">New Material Type</h3>
        <form method="POST" action="{{ route('materials.types.store') }}" class="flex gap-3">
            @csrf
            <input type="text" name="name" placeholder="e.g. Cabinet, Admin, Accessories..." class="input flex-1" required>
            <button type="submit" class="btn btn-primary">Create Type</button>
            <button type="button" @click="showNewType=false" class="btn btn-secondary">Cancel</button>
        </form>
    </div>

    @if(session('success'))
    <div class="card p-3 mb-4 border-green-600 bg-green-900/20 text-green-300 flex items-center gap-2">
        <i class="fas fa-check-circle"></i> {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="card p-3 mb-4 border-red-600 bg-red-900/20 text-red-300 flex items-center gap-2">
        <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
    </div>
    @endif

    @if($types->isEmpty())
    <div class="card p-10 text-center text-slate-500">
        <i class="fas fa-box-open text-4xl mb-3 block"></i>
        <p class="mb-3">No material types yet. Create your first type (e.g. "Cabinet", "Admin", "Accessories").</p>
        <button @click="showNewType=true" class="btn btn-primary">Add First Type</button>
    </div>
    @else

    {{-- Tab navigation --}}
    <div class="card overflow-hidden">
        <div class="border-b border-slate-700 flex overflow-x-auto">
            @foreach($types as $type)
            <button @click="activeTab='{{ $type->id }}'"
                :class="activeTab==='{{ $type->id }}' ? 'border-b-2 border-blue-500 text-blue-400 bg-slate-800' : 'text-slate-400 hover:text-white'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2">
                {{ $type->name }}
                <span class="text-xs bg-slate-700 rounded-full px-2 py-0.5">{{ $type->materials->count() }}</span>
            </button>
            @endforeach
        </div>

        @foreach($types as $type)
        <div x-show="activeTab==='{{ $type->id }}'">
            {{-- Type header --}}
            <div class="px-5 py-3 border-b border-slate-700 flex items-center justify-between" style="background:#0f172a;">
                <h3 class="text-slate-300">{{ $type->name }} Materials</h3>
                <div class="flex gap-2">
                    {{-- Rename type --}}
                    <form method="POST" action="{{ route('materials.types.update', $type) }}" class="flex gap-2" x-data="{editing:false}">
                        @csrf @method('PUT')
                        <span x-show="!editing" @click="editing=true" class="text-xs text-slate-500 hover:text-blue-400 cursor-pointer">
                            <i class="fas fa-pen mr-1"></i>Rename
                        </span>
                        <div x-show="editing" class="flex gap-1">
                            <input type="text" name="name" value="{{ $type->name }}" class="input text-xs py-1 px-2 w-32">
                            <button type="submit" class="btn btn-primary text-xs py-1 px-2">Save</button>
                            <button type="button" @click="editing=false" class="btn btn-secondary text-xs py-1 px-2">Cancel</button>
                        </div>
                    </form>
                    {{-- Delete type --}}
                    <form method="POST" action="{{ route('materials.types.destroy', $type) }}"
                        onsubmit="return confirm('Delete type {{ $type->name }}? This will fail if it has materials.')">
                        @csrf @method('DELETE')
                        <button class="text-xs text-red-400 hover:text-red-300"><i class="fas fa-trash mr-1"></i>Delete Type</button>
                    </form>
                </div>
            </div>

            {{-- Materials table --}}
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-xs text-slate-500 uppercase" style="background:#0f172a;">
                            <th class="px-4 py-2 text-left">Description</th>
                            <th class="px-4 py-2 text-left">Item Code</th>
                            <th class="px-4 py-2 text-left">Unit</th>
                            <th class="px-4 py-2 text-right">W/Sale</th>
                            <th class="px-4 py-2 text-right">Retail</th>
                            <th class="px-4 py-2 text-left">Comments</th>
                            <th class="px-4 py-2 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($type->materials as $mat)
                        <tr class="border-t border-slate-700 hover:bg-slate-700/30" x-data="{editing:false}">
                            {{-- View row --}}
                            <td class="px-4 py-2" x-show="!editing">{{ $mat->description }}</td>
                            <td class="px-4 py-2 text-slate-400 font-mono text-xs" x-show="!editing">{{ $mat->item_code }}</td>
                            <td class="px-4 py-2 text-slate-400" x-show="!editing">{{ $mat->unit }}</td>
                            <td class="px-4 py-2 text-right text-slate-300" x-show="!editing">${{ number_format($mat->wsale_price,2) }}</td>
                            <td class="px-4 py-2 text-right text-green-400" x-show="!editing">${{ number_format($mat->retail_price,2) }}</td>
                            <td class="px-4 py-2 text-slate-500 text-xs" x-show="!editing">{{ $mat->comments }}</td>
                            <td class="px-4 py-2 text-center" x-show="!editing">
                                <button @click="editing=true" class="text-blue-400 hover:text-blue-300 mr-2 text-xs"><i class="fas fa-pen"></i></button>
                                <form method="POST" action="{{ route('materials.materials.destroy', [$type, $mat]) }}" class="inline"
                                    onsubmit="return confirm('Delete this material?')">
                                    @csrf @method('DELETE')
                                    <button class="text-red-400 hover:text-red-300 text-xs"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>

                            {{-- Edit row --}}
                            <td colspan="7" class="px-4 py-2" x-show="editing">
                                <form method="POST" action="{{ route('materials.materials.update', [$type, $mat]) }}" class="grid grid-cols-6 gap-2 items-end">
                                    @csrf @method('PUT')
                                    <div class="col-span-2">
                                        <label class="text-xs text-slate-500 mb-1 block">Description</label>
                                        <input type="text" name="description" value="{{ $mat->description }}" class="input text-sm" required>
                                    </div>
                                    <div>
                                        <label class="text-xs text-slate-500 mb-1 block">Item Code</label>
                                        <input type="text" name="item_code" value="{{ $mat->item_code }}" class="input text-sm">
                                    </div>
                                    <div>
                                        <label class="text-xs text-slate-500 mb-1 block">Unit</label>
                                        <input type="text" name="unit" value="{{ $mat->unit }}" class="input text-sm" placeholder="Each, L/m, Job...">
                                    </div>
                                    <div>
                                        <label class="text-xs text-slate-500 mb-1 block">W/Sale $</label>
                                        <input type="number" name="wsale_price" value="{{ $mat->wsale_price }}" class="input text-sm" step="0.01" min="0">
                                    </div>
                                    <div>
                                        <label class="text-xs text-slate-500 mb-1 block">Retail $</label>
                                        <input type="number" name="retail_price" value="{{ $mat->retail_price }}" class="input text-sm" step="0.01" min="0">
                                    </div>
                                    <div class="col-span-4">
                                        <label class="text-xs text-slate-500 mb-1 block">Comments</label>
                                        <input type="text" name="comments" value="{{ $mat->comments }}" class="input text-sm">
                                    </div>
                                    <div class="col-span-2 flex gap-2">
                                        <button type="submit" class="btn btn-primary text-xs py-1.5 flex-1">Save</button>
                                        <button type="button" @click="editing=false" class="btn btn-secondary text-xs py-1.5">Cancel</button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                        @endforeach

                        {{-- Add new material row --}}
                        <tr class="border-t border-slate-700 bg-slate-800/50" x-data="{open:false}">
                            <td colspan="7" class="px-4 py-2">
                                <div x-show="!open">
                                    <button @click="open=true" class="text-blue-400 hover:text-blue-300 text-sm">
                                        <i class="fas fa-plus mr-1"></i> Add Material to {{ $type->name }}
                                    </button>
                                </div>
                                <div x-show="open">
                                    <form method="POST" action="{{ route('materials.materials.store', $type) }}" class="grid grid-cols-6 gap-2 items-end">
                                        @csrf
                                        <div class="col-span-2">
                                            <label class="text-xs text-slate-500 mb-1 block">Description *</label>
                                            <input type="text" name="description" class="input text-sm" placeholder="Material description..." required>
                                        </div>
                                        <div>
                                            <label class="text-xs text-slate-500 mb-1 block">Item Code</label>
                                            <input type="text" name="item_code" class="input text-sm" placeholder="e.g. CA-FL">
                                        </div>
                                        <div>
                                            <label class="text-xs text-slate-500 mb-1 block">Unit</label>
                                            <select name="unit" class="input text-sm">
                                                <option value="Each">Each</option>
                                                <option value="L/m">L/m</option>
                                                <option value="Job">Job</option>
                                                <option value="m2">m2</option>
                                                <option value="hr">hr</option>
                                                <option value="Set">Set</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label class="text-xs text-slate-500 mb-1 block">W/Sale $</label>
                                            <input type="number" name="wsale_price" class="input text-sm" step="0.01" min="0" value="0">
                                        </div>
                                        <div>
                                            <label class="text-xs text-slate-500 mb-1 block">Retail $</label>
                                            <input type="number" name="retail_price" class="input text-sm" step="0.01" min="0" value="0">
                                        </div>
                                        <div class="col-span-4">
                                            <label class="text-xs text-slate-500 mb-1 block">Comments</label>
                                            <input type="text" name="comments" class="input text-sm" placeholder="Optional notes...">
                                        </div>
                                        <div class="col-span-2 flex gap-2">
                                            <button type="submit" class="btn btn-primary text-xs py-1.5 flex-1">Add Material</button>
                                            <button type="button" @click="open=false" class="btn btn-secondary text-xs py-1.5">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        @endforeach
    </div>
    @endif
</div>
@endsection