@extends('layouts.app')

@section('content')

<div class="page-breadcrumb">
    <div class="row">
        <div class="col-12 d-flex no-block align-items-center">
            <h4 class="page-title">Finished Goods</h4>
            <div class="ms-auto text-end">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Production
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container py-5">


    <div class="bg-white rounded shadow mb-5">
        <!-- Rounded tabs -->
        <ul id="myTab" role="tablist"
            class="nav nav-tabs nav-pills flex-column flex-sm-row text-center bg-light border-0 rounded-nav">
            <li class="nav-item flex-sm-fill">
                <a id="recordproduction-tab" data-toggle="tab" href="#recordproduction" role="tab" aria-controls="recordproduction" aria-selected="true"
                    class="nav-link border-0 text-uppercase font-weight-bold active">Record Production</a>
            </li>
            <li class="nav-item flex-sm-fill">
                <a id="production-tab" data-toggle="tab" href="#production" role="tab" aria-controls="production" aria-selected="true"
                    class="nav-link border-0 text-uppercase font-weight-bold">Production History</a>
            </li>
            <li class="nav-item flex-sm-fill">
                <a id="waste-tab" data-toggle="tab" href="#waste" role="tab" aria-controls="waste" aria-selected="true"
                    class="nav-link border-0 text-uppercase font-weight-bold">Waste</a>
            </li>
            
            
        </ul>
        <div id="myTabContent" class="tab-content">
            <div id="recordproduction" role="tabpanel" aria-labelledby="recordproduction-tab" class="tab-pane fade px-4 py-5 show active">
                @include('production.record')
            </div>
            <div id="production" role="tabpanel" aria-labelledby="production-tab" class="tab-pane fade px-4 py-5 show">
                <div class="mt-3 mb-3">
                    <div class="row">
                        <div class="col-md-5">
                            <label for="fromDate">From Date:</label>
                            <input type="date" class="form-control" id="fromDate" name="fromDate">
                        </div>
                        <div class="col-md-5">
                            <label for="toDate">To Date:</label>
                            <input type="date" class="form-control" id="toDate" name="toDate">
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary mt-4" id="applyFilters">Apply Filters</button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Production List</h5>
                        <div class="table-responsive">
                            <table id="zero_config" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Product Name</th>
                                        <th>UOM</th>
                                        <th>Quantity</th>
                                        <th>Created at</th>
                                        <th>Created by</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($productions as $production)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $production->bom->product->name }}</td>
                                        <td>{{ $production->bom->uom }}</td>
                                        <td>{{ $production->quantity }}</td>
                                        <td>{{ $production->created_at }}</td>
                                        <td>{{ optional($production->user)->name }}</td>                            
                                        <td>
                                            <div class="dropdown">
                                                <div class="cursor-pointer font-24 dropdown-toggle"
                                                    data-toggle="dropdown"><i class='fas fa-ellipsis-h'></i>
                                                </div>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item" href="#" class="view"
                                                        data-toggle="modal" data-target="#show">View Items</a>
                                                    <a class="dropdown-item" href="#" class="edit"
                                                        data-toggle="modal" data-target="#edit">Edit</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>   
                                    @endforeach                          
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
                          

        </div>
        <!-- End rounded tabs -->
    </div>

</div>

<!-- Add Finished Goods Modal -->
<div class="modal fade" id="addFinishedGoodModal" tabindex="-1" role="dialog" aria-labelledby="addFinishedGoodModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addFinishedGoodModalLabel">Record Finished Goods</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Finished Goods Form -->
                <form class="row g-3" action="{{ route('production.store') }}" method="post">
                    @csrf
                    <div class="users-container">
                        <label>Production Team:</label>
                        @foreach($users as $user)
                            <div class="form-check">
                                <input type="checkbox" name="users[]" value="{{ $user->id }}" class="form-check-input">
                                <label class="form-check-label">{{ $user->name }}</label>
                            </div>
                        @endforeach
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label for="bom_id">Finished Goods</label>
                                <select class="form-select" id="bom_id" name="bom_id" required>
                                    <option value="">Select Product</option>
                                    @foreach ($boms as $bom)
                                        <option value="{{ $bom->id }}">{{ $bom->product->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <!-- Quantity -->
                            <div class="form-group">
                                <label for="produced_quantity">Produced Quantity</label>
                                <input type="number" class="form-control" id="produced_quantity" name="produced_quantity" min="1" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label for="wastage_quantity">Wastages</label>
                                <input type="number" class="form-control" id="wastage_quantity" name="wastage_quantity" min="1" required>
                            </div>                            
                        </div>
                        <div class="col-6">
                            <textarea name="remarks" id="remarks" cols="50" rows="5">Remarks</textarea>
                        </div>
                    </div>                

                    <div class="form-group col-12">
                        <!-- Submit Button -->
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

  
  <!-- Modal for Adding UOM -->
  <div class="modal fade" id="addUomModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    @include('uom.create')
  </div>


<script>

    $("#zero_config").DataTable();
</script>
<script src="{{asset('vendor/jquery/dist/jquery.min.js')}}"></script>
<script src="{{asset('vendor/popper.js/dist/popper.min.js')}}"></script>
<script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{asset('vendor/sweetalerts/sweetalert2.min.js')}}"></script>

@if(session('success'))
<script>
    swal("Success", "{{ session('success') }}", "success");
</script>
@endif
@if ($errors->any())
<script>
    Swal.fire({
        icon: 'error',
        title: 'Oops... There was an error!',
        html: "<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>",
    });
</script>
@endif


@endsection