@extends('layouts.app')

@section('title', 'Raw Materials')

@section('content')
<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <h4 class="mb-0 fw-bold">Raw Materials Registry</h4>
        <p class="text-muted small mb-0">Define and manage essential raw materials for production.</p>
    </div>
    <button class="btn btn-primary shadow-sm btn-sm px-3" data-bs-toggle="modal" data-bs-target="#newMaterialModal">
        <i class="bi bi-plus-lg me-1"></i> Add Raw Material
    </button>
</div>

<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4 border-0 py-3 text-uppercase small fw-bold text-muted">Name</th>
                        <th class="border-0 py-3 text-uppercase small fw-bold text-muted">SKU</th>
                        <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Stock</th>
                        <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Unit</th>
                        <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Cost</th>
                        <th class="border-0 py-3 text-uppercase small fw-bold text-muted text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($materials as $material)
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex align-items-center">
                                <div class="bg-warning-subtle p-2 rounded-3 me-3 text-warning">
                                    <i class="bi bi-moisture"></i>
                                </div>
                                <span class="fw-bold">{{ $material->name }}</span>
                            </div>
                        </td>
                        <td><span class="badge bg-light text-dark border">{{ $material->sku }}</span></td>
                        <td>
                            <span class="fw-bold {{ $material->totalStock() <= 0 ? 'text-danger' : 'text-success' }}">
                                {{ number_format($material->totalStock(), 2) }}
                            </span>
                        </td>
                        <td>{{ $material->unit_of_measure }}</td>
                        <td>{{ \App\Models\SystemSetting::get('currency_symbol', '$') }}{{ number_format($material->cost_price, 2) }}</td>
                        <td class="text-end pe-4">
                            <div class="d-flex gap-2 justify-content-end">
                                <button class="btn btn-light btn-sm rounded-3" data-bs-toggle="modal" data-bs-target="#editMaterialModal{{ $material->id }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <form action="{{ route('raw-materials.destroy', $material->id) }}" method="POST" onsubmit="return confirm('Archive this raw material?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-light btn-sm rounded-3 text-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>

                            <!-- Edit Modal -->
                            <div class="modal fade text-start" id="editMaterialModal{{ $material->id }}" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content border-0 shadow-lg rounded-4">
                                        <form action="{{ route('raw-materials.update', $material->id) }}" method="POST">
                                            @csrf
                                            @method('PUT')
                                            <div class="modal-header border-0 p-4">
                                                <h5 class="fw-bold mb-0">Edit Raw Material</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body p-4 pt-0">
                                                <div class="mb-3">
                                                    <label class="form-label small fw-bold">Material Name</label>
                                                    <input type="text" name="name" class="form-control rounded-3" value="{{ $material->name }}" required>
                                                </div>
                                                <div class="row g-3 mb-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label small fw-bold">SKU</label>
                                                        <input type="text" name="sku" class="form-control rounded-3" value="{{ $material->sku }}" required>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label small fw-bold">Unit of Measure</label>
                                                        <input type="text" name="unit_of_measure" class="form-control rounded-3" value="{{ $material->unit_of_measure }}" required>
                                                    </div>
                                                </div>
                                                <div class="mb-0">
                                                    <label class="form-label small fw-bold">Cost Price</label>
                                                    <input type="number" step="0.01" name="cost_price" class="form-control rounded-3" value="{{ $material->cost_price }}">
                                                </div>
                                            </div>
                                            <div class="modal-footer border-0 p-4 pt-0">
                                                <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-primary rounded-3 px-4">Update Material</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-5 text-center text-muted small">No raw materials defined.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($materials->hasPages())
    <div class="card-footer bg-white border-0 p-4">
        {{ $materials->links() }}
    </div>
    @endif
</div>

<!-- New Material Modal -->
<div class="modal fade" id="newMaterialModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <form action="{{ route('raw-materials.store') }}" method="POST">
                @csrf
                <div class="modal-header border-0 p-4">
                    <h5 class="fw-bold mb-0">Define New Raw Material</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4 pt-0">
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Material Name</label>
                        <input type="text" name="name" class="form-control rounded-3" placeholder="e.g. Iron Ore, Water, Plastic Pellets" required>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">SKU</label>
                            <input type="text" name="sku" class="form-control rounded-3" placeholder="Unique ID" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">Unit of Measure</label>
                            <input type="text" name="unit_of_measure" class="form-control rounded-3" placeholder="kg, meters, liters, etc." required>
                        </div>
                    </div>
                    <div class="mb-0">
                        <label class="form-label small fw-bold">Approximate Cost Price</label>
                        <input type="number" step="0.01" name="cost_price" class="form-control rounded-3" placeholder="0.00">
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-3 px-4">Register Material</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection