@extends('layouts.app')
@push('css')
    <style>
        .label {
            font-size: 18px !important;
        }
    </style>
@endpush
@section('content')
    <form data-get_avilable_items="{{ route('dashboard.operations.productions.get-inventories') }}"
        data-index="{{ route('dashboard.operations.productions.index') }}"
        data-get_avilable_units="{{ route('dashboard.operations.productions.get-units') }}"
        action="{{ route('dashboard.operations.productions.store') }}" class="mb-3 border" id="add-item-form">
        <div class="content-wrapper">
            <div class="page-header">
                <h3 class="page-title">
                    <span class="page-title-icon bg-gradient-primary text-white me-2">
                        <i class="mdi mdi-cards-variant menu-icon"></i>
                    </span>
                    {{ __('Create Production Process') }}
                </h3>
            </div>
            <div class="row basic_item bg-white shadow rounded p-3 m-0">
                <div class="col-md-4 mb-2">
                    <div class="form-group">
                        <label class="label">{{ __('Basic Item') }}</label>
                        <select id="basic-item" name="basic_item" class="form-control select2">
                            <option value="">{{ __('Select') }}</option>
                            @foreach (\App\Models\Item::pluck('name', 'id') as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4 mb-2 d-none" id="inventories-area">
                    <div class="form-group">
                        <label class="label">{{ __('Inventory') }}</label>
                        <select name="inventory_id" class="form-control select2" id="inventory_id">
                            <option value="">{{ __('Select') }}</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 mb-2 d-none" id="value-area">
                    <div class="form-group">
                        <label class="label">{{ __('Quantity/Weight') }}</label>
                        <input type="number" id="value" step="any" name="value" class="form-control"
                            placeholder="{{ __('Quantity/Weight') }}">
                    </div>
                </div>
                <div class="col-12"></div>
                <div class="col-md-6 mb-2">
                    <div class="form-group">
                        <label class="label">{{ __('Production Unit') }}</label>
                        <select name="number_of_production_item_per_item" class="form-control select2"
                            id="number_of_production_item_per_item">
                            <option value="">{{ __('Select') }}</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6 mb-2">
                    <div class="form-group">
                        <label class="label">{{ __('Production Line') }}</label>
                        <select name="production_line_id" class="select2">
                            <option value="">{{ __('Select') }}</option>
                            @foreach (\App\Models\Operations\ProductionLine::pluck('name', 'id') as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-12 mb-2">
                    <div class="form-group">
                        <label class="label">{{ __('Expected Quantity') }}</label>
                        <input id="expected_quantity" readonly type="number" step="any" class="form-control"
                            placeholder="{{ __('Expected Quantity') }}">
                    </div>
                </div>
                <div class="col-md-12 mb-2">
                    <button type="button" class="btn btn-primary w-100 use">{{ __('Use') }}</button>
                    <button type="button" class="btn btn-danger w-100 d-none cancel-process">{{ __('Cancel') }}</button>
                </div>
            </div>
            <!-- Start of second form -->
            <div id="add-row-matrial-item" class="mb-3 bg-white shadow rounded p-2"
                data-action="{{ route('dashboard.operations.productions.add-row') }}">
                @csrf
                <div class="row m-0 mt-4">
                    <div class="col-md-12">
                        <h6 class="text-center mb-3">{{ __('Raw Material Items') }}</h6>
                    </div>
                    <div class="col-md-4 mb-2">
                        <div class="form-group">
                            <label class="label">{{ __('Basic Item') }}</label>
                            <select id="raw-matrial-item" name="raw-matrial-item" class="form-control select2">
                                <option value="">{{ __('Select') }}</option>
                                @foreach (\App\Models\Item::rowMatiral()->pluck('name', 'id') as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4 mb-2 d-none" id="raw-matrial-inventories-area">
                        <div class="form-group">
                            <label class="label">{{ __('Inventory') }}</label>
                            <select name="raw-matrial-inventory-id" class="form-control select2"
                                id="raw-matrial-inventory-id">
                                <option value="">{{ __('Select') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4 mb-2 d-none" id="raw-matrial-value-area">
                        <div class="form-group">
                            <label class="label">{{ __('Quantity/Weight') }}</label>
                            <input type="number" id="raw-matrial-value" step="any" name="raw-matrial-value"
                                class="form-control" placeholder="{{ __('Quantity/Weight') }}">
                        </div>
                    </div>
                    <div class="col-md-12 mb-2">
                        <div class="form-group">
                            <label
                                class="label">{{ __('Number Of Elements Used In The Production Of Each Item') }}</label>
                            <select name="number_of_elements_used_in_the_production_of_each_item"
                                class="form-control select2" id="number_of_elements_used_in_the_production_of_each_item">
                                <option value="">{{ __('Select') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 mb-2">
                        <button type="button" id="raw-matrial-button"
                            class="btn btn-primary w-100">{{ __('Add') }}</button>
                    </div>
                </div>
                <div class="col-md-12">
                    <table class="table table-striped table-bordered" id="raw-matrial-items">
                        <thead>
                            <tr>
                                <th>{{ __('Basic Item') }}</th>
                                <th>{{ __('Inventory') }}</th>
                                <th>{{ __('Quantity/Weight') }}</th>
                                <th>{{ __('Number Of Elements For Each item') }}</th>
                                <th>{{ __('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <!-- Cost Information -->
            {{-- <div class="col-md-12 border p-3 bg-white shadow rounded p-3 mt-3">
                <h6 class="text-center">{{ __('Cost Information') }}</h6>
                <div>
                    <div class="row">
                        <div class="col-md-5">
                            <label>{{ __('Cost Name') }}</label>
                            <input name="cost_name[]" type="text" class="form-control" />
                        </div>
                        <div class="col-md-5">
                            <label>{{ __('Cost') }}</label>
                            <input name="cost[]" type="text" class="form-control" />
                        </div>
                        <div class="col-md-2 pt-2">
                            <button type="button" class="btn btn-danger mt-4 remove-cost">{{ __('Remove') }}</button>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary mt-4 w-100 add-cost">{{ __('Add') }}</button>
                    </div>
                </div>
            </div> --}}
            <!-- Final Item Information -->
            <div class="col-12 border p-3 bg-white shadow rounded p-3 mt-3">
                <h6 class="text-center mb-3">{{ __('Final Item Information') }}</h6>
                <div class="row">
                    <div class="col-md-12">
                        <label>{{ __('Final Item') }}</label>
                        <select name="final_item" class="form-control select2">
                            <option value="">{{ __('Select') }}</option>
                            @foreach (\App\Models\Item::pluck('name', 'id') as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                    {{-- <div class="col-md-4">
                        <label>{{ __('Final Item Inventory') }}</label>
                        <select name="final_item_inventory" class="form-control select2">
                            <option value="">{{ __('Select') }}</option>
                            @foreach (\App\Models\Inventories\Inventory::pluck('name', 'id') as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label>{{ __('Quantity/Weight') }}</label>
                        <input type="number" name="final_item_value" class="form-control" />
                    </div> --}}
                </div>
            </div>

            <div class="text-center mt-4">
                <button type="submit" class="btn btn-primary">{{ __('Process') }}</button>
            </div>
        </div>
    </form>
@endsection
@section('scripts')
    <script src="{{ asset('assets/js/pages/common/loader-for-post-request.js') }}"></script>
    <script src="{{ asset('assets/js/pages/operations/productions/create-production.js') }}"></script>
@endsection