{{-- resources/views/transc/trbomj/partials/modals.blade.php --}}

{{-- Modal Resource Selection --}}
<div class="modal fade" id="resourceModal" tabindex="-1" role="dialog" aria-labelledby="resourceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resourceModalLabel">Pilih Resource</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table display" id="resourceTable">
                        <thead style="background-color: #b0e9eb;">
                            <tr>
                                <th width="80px">Action</th>
                                <th>Resource</th>
                                <th>Mat Type</th>
                                <th>Width</th>
                                <th>Length</th>
                                <th>Capacity</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($resources as $resource)
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-primary btn-sm"
                                            onclick="selectResource('{{ $resource->resource }}', '{{ $resource->mat_type }}', '{{ $resource->width }}', '{{ $resource->length }}', '{{ $resource->capacity }}')">
                                            <i class="fas fa-check"></i> Select
                                        </button>
                                    </td>
                                    <td>{{ $resource->resource }}</td>
                                    <td>{{ $resource->mat_type }}</td>
                                    <td>{{ $resource->width }}</td>
                                    <td>{{ $resource->length }}</td>
                                    <td>{{ $resource->capacity }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Component Selection --}}
<div class="modal fade" id="componentModal" tabindex="-1" role="dialog" aria-labelledby="componentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="componentModalLabel">Pilih Component Material</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table display" id="componentTable">
                        <thead style="background-color: #b0e9eb;">
                            <tr>
                                <th width="80px">Action</th>
                                <th>Material Code</th>
                                <th>Description</th>
                                <th>UOM</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($components as $component)
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-primary btn-sm"
                                            onclick="selectComponent('{{ $component->material_code }}', '{{ $component->description }}', '{{ $component->uom }}')">
                                            <i class="fas fa-check"></i> Select
                                        </button>
                                    </td>
                                    <td>{{ $component->material_code }}</td>
                                    <td>{{ $component->description }}</td>
                                    <td>{{ $component->uom }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <button type="button" class="btn btn-primary" id="create-new-material">
                        <i class="fas fa-plus"></i> Buat Comp Material Baru
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Create New Material --}}
<div class="modal fade" id="createMaterialModal" tabindex="-1" role="dialog" aria-labelledby="createMaterialModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createMaterialModalLabel">Buat Component Material Baru</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="createMaterialForm">
                    <div class="mb-3">
                        <label for="newMaterialCode" class="form-label">Material Code <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="newMaterialCode" placeholder="Masukkan kode material..." required>
                            <span class="input-group-text text-light" id="saveMaterialBtn" style="cursor: pointer; background-color: #028284;">
                                <i class="fas fa-check"></i>
                            </span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Comp Desc (40)</label>
                        <input type="text" class="form-control" value="-" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">UOM</label>
                        <input type="text" class="form-control" value="-" readonly>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>