@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description d-flex align-items-center">
                <div class="page-description-content flex-grow-1">
                    <h1>Item Register - OTH</h1>
                </div>
                <div class="page-description-actions">
                    <a href="{{ route('export.oth') }}" class="btn btn-success"><i class="material-icons">print</i>Export OTH item list</a>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: '{{ session('success') }}',
                showConfirmButton: false,
                timer: 1000
            });
        });
    </script>
    @endif

    @if(session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '{{ session('error') }}',
                    showConfirmButton: false,
                    timer: 1000
                });
            });
        </script>
    @endif

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Register New Item</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('itemregister-oth.store') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="item_code" class="form-label">Item Code</label>
                            <input type="text" class="form-control" id="item_code" name="item_code" placeholder="Generated by system" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="item_description" class="form-label">Item Description</label>
                            <input type="text" class="form-control" id="item_description" name="item_description" required>
                        </div>
                        <div class="mb-3">
                            <label for="uom" class="form-label">UOM</label>
                            <select class="form-control" id="uom" name="uom" required>
                                <option value="Bot">Bot</option>
                                <option value="Box">Box</option>
                                <option value="Can">Can</option>
                                <option value="L">L</option>
                                <option value="Pac">Pac</option>
                                <option value="Pcs">Pcs</option>
                                <option value="Set">Set</option>
                                <option value="Sht">Sht</option>
                                <option value="Tk">Tk</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Add OTH Item</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Item OTH</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="datatable1" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th style="width:15%">Item Code</th>
                                    <th style="width:20%">Item Description</th>
                                    <th style="width:5%">UOM</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($othItem as $item)
                                <tr>
                                    <td>{{ $item->item_code }}</td>
                                    <td>{{ $item->item_description }}</td>
                                    <td>{{ $item->uom }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@push('scripts')
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/datatables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/datatables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/perfectscroll/perfect-scrollbar.min.js') }}"></script>
<script src="{{ asset('assets/plugins/pace/pace.min.js') }}"></script>
<script src="{{ asset('assets/js/custom.js') }}"></script>
<script src="{{ asset('assets/js/pages/dashboard.js') }}"></script>
@endpush

@endsection