@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content warehousesPageContainer">
        <div class="page-content">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="page-title mb-0 font-size-18">@lang('dashboard_warehouses.initial_products')</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active"> @lang('dashboard_clients.welcome_platform')</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <a class="popup-form  btn btn-primary" href="#initialproduct" disabled>
                                @lang('dashboard_warehouses.add_initial_product')</a>
                        </div>
                    </div>
                </div>
            </div>
            {{-- start add initial product --}}
            <div class="card mfp-hide mfp-popup-form mx-auto" id="initialproduct">
                <div class="card-body">
                    <h4 class="mt-0 mb-4">@lang('dashboard_warehouses.add_initial_product')</h4>
                    <form action="{{ route('dashboard.products.store.initial.product') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-3 form-group">
                                <label for="">@lang('dashboard_warehouses.name')</label>
                                <input type="text" class="form-control" placeholder="Product Name" required name="name">
                            </div>
                            <div class="col-lg-3 form-group">
                                <label for="">@lang('dashboard_warehouses.quantity_unit')</label>
                                <select name="unit" id="" class="form-control select2" style="width: 100%">
                                    <option value="piece">Piece</option>
                                    <option value="box">Box</option>
                                    <option value="kg">KG</option>
                                    <option value="g">G</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            <div class="col-lg-3 form-group" hidden>
                                <label for="">@lang('dashboard_warehouses.quantity_unit')</label>
                                <input type="text" class="form-control" id="custom_unit">
                            </div>
                            <div class="col-lg-3 form-group">
                                <label for="">@lang('dashboard_warehouses.sku')</label>
                                <input type="text" class="form-control" placeholder="Product Name" required name="sku">
                            </div>
                            <div class="col-lg-3 form-group">
                                <label for="">@lang('dashboard_warehouses.starting_price')</label>
                                <input type="number" min="0" class="form-control"
                                    placeholder="@lang('dashboard_warehouses.starting_price')" required
                                    name="starting_price">
                            </div>
                            <div class="col-lg-12 form-group">
                                <label for="">@lang('dashboard_warehouses.description')</label>
                                <textarea name="description" class="form-control" id="" cols="30"
                                    placeholder="@lang('dashboard_warehouses.description')" rows="10"></textarea>
                                {{-- <input type="text" class="form-control"
                                    placeholder="Product Name" required name="name"> --}}
                            </div>
                            <div class="col-lg-3 form-group">
                                <div class="">
                                    <button type="submit" class="btn btn-primary">@lang('buttons.execute')</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            {{-- end add initial product --}}
            <div class="row">
                
                <div class="col-12">
                    <div class="card">
                        <div>
                            @if(session('message'))
                                <div class="alert alert-success" style="text-align: center"> {{ session()->get('message') }}</div>
                                @elseif(session('error'))
                                <div class="alert alert-danger" style="text-align: center"> {{ session()->get('error') }}</div>
                            
                                @endif
                        </div>
                        <div class="card-body">
                            <h4 class="card-title">@lang('dashboard_warehouses.initial_products')</h4>
                            <p class="card-title-desc">@lang('dashboard_warehouses.show_all_initial_products')</p>
                            <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap"
                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th data-priority="1">@lang('dashboard_warehouses.name')</th>
                                        <th data-priority="1">@lang('dashboard_warehouses.quantity_unit')</th>
                                        <th data-priority="1">@lang('dashboard_invoices.sku')</th>
                                        <th data-priority="1">@lang('dashboard_warehouses.starting_price')</th>
                                        <th style="width: 180px; white-space: normal" data-priority="1">
                                            @lang('dashboard_warehouses.description')</th>
                                        <th style="width: 150px; white-space: normal">@lang('buttons.process')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($initialproducts as $product )
                                   {{--  {{ dd($product) }} --}}
                                    <tr>
                                        <th>{{ $product->name }}</th>
                                        <th>{{ $product->unit }}</th>
                                        <th>{{ $product->sku }}</th>
                                        <th>{{ $product->starting_price }}</th>
                                        <th style="width: 180px; white-space: normal">
                                            {{ $product->description }}</th>
                                        <td>
                                            <div class="btn-group dropdown" role="group">
                                                <button id="btnGroupVerticalDrop1" type="button"
                                                    class="text-primary border-0 bg-transparent dropdown-toggle "
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                                    title="Options">
                                                    <i class="mdi  mdi-dots-vertical mdi-16px"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                                    <a class="dropdown-item popup-form"
                                                        href="#editInitialproduct{{ $product->id }}">@lang('dashboard_warehouses.edit')</a>
                                                    <form method="POST" id="deleteForm{{ $product->id }}" action="{{ route('dashboard.products.delete.initial.product',$product) }}">
                                                        @csrf
                                                        @method('DELETE')
                                                        <a class="dropdown-item" onclick="document.getElementById('deleteForm{{ $product->id }}').submit();" href="#">
                                                            @lang('dashboard_warehouses.delete')</a>
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                    {{-- start edit initial
                                    product--}}
                                    <div class="card mfp-hide mfp-popup-form mx-auto" id="editInitialproduct{{ $product->id }}">
                                        <div class="card-body">
                                            <h4 class="mt-0 mb-4">@lang('dashboard_warehouses.edit')
                                                @lang('dashboard_warehouses.initial_product')</h4>
                                            <form action="{{ route('dashboard.products.update.initial.product',$product) }}"
                                                method="POST" enctype="multipart/form-data">
                                                @csrf
                                                @method('PUT')
                                                <input type="hidden" name="initial_product_id" value="{{ $product->id  }}">
                                                <div class="row">
                                                    <div class="col-lg-3 form-group">
                                                        <label for="">@lang('dashboard_warehouses.name')</label>
                                                        <input type="text" class="form-control" placeholder="Product Name"
                                                            required name="name" value="{{ $product->name }}">
                                                    </div>
                                                    <div class="col-lg-3 form-group">
                                                        <label for="">@lang('dashboard_warehouses.quantity_unit')</label>
                                                        <select name="unit" id="" class="form-control select2" onchange="unitChanged(this)" style="width: 100%">
                                                            <option value="" disabled>Select</option>
                                                            <option value="piece" @if ($product->unit == 'Piece') selected @endif >Piece</option>
                                                            <option  value="box" @if ($product->unit == 'Box') selected @endif>Box</option>
                                                            <option  value="kg" @if ($product->unit == 'Kg') selected @endif>KG</option>
                                                            <option value="g" @if ($product->unit == 'G') selected @endif >G</option>
                                                            <option value="other"
                                                            @if ($product->unit != 'Piece' && $product->unit != 'Box' && $product->unit != 'Kg' && $product->unit != 'G')
                                                                selected
                                                                @endif
                                                                >Other</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-lg-3 form-group" id="fixedUnit{{ $product->id }}"  @if ($product->unit == 'Piece' || $product->unit == 'Box' || $product->unit == 'Kg' || $product->unit == 'G') hidden @endif>
                                                        <label for="">@lang('dashboard_warehouses.quantity_unit')</label>
                                                        <input type="text" class="form-control" id="custom_unit" value="{{ $product->unit }}">
                                                    </div>
                                                    <div class="col-lg-3 form-group">
                                                        <label for="">@lang('dashboard_warehouses.sku')</label>
                                                        <input type="text" class="form-control" placeholder="Product Name"
                                                            required name="sku" value="{{ $product->sku }}">
                                                    </div>
                                                    <div class="col-lg-3 form-group">
                                                        <label for="">@lang('dashboard_warehouses.starting_price')</label>
                                                        <input type="number" min="0" class="form-control"
                                                            placeholder="@lang('dashboard_warehouses.starting_price')"
                                                            required name="starting_price" value="{{ $product->starting_price }}">
                                                    </div>
                                                    <div class="col-lg-12 form-group">
                                                        <label for="">@lang('dashboard_warehouses.description')</label>
                                                        <textarea name="description" class="form-control" id="" cols="30"
                                                            placeholder="@lang('dashboard_warehouses.description')"
                                                            rows="10">{{ $product->description }}</textarea>
                                                        {{-- <input type="text"
                                                            class="form-control" placeholder="Product Name" required
                                                            name="name"> --}}
                                                    </div>
                                                    <div class="col-lg-3 form-group">
                                                        <div class="">
                                                            <button type="submit"
                                                                class="btn btn-primary">@lang('buttons.execute')</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    {{-- end edit initial
                                    product--}}    
                                    @endforeach
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
        </div>
        <!-- End Page-content -->
    @endsection
    
    @section('custom_script')
    <script>
        $(document).ready(function(){
            setTimeout(() => {
                $('.select2').select2()
            }, 500);
        });

        function unitChanged(unitSelect)
        {
            if(unitSelect.value == 'other')
            {
                document.getElementById('fixedUnit{{ $product->id }}').removeAttribute('hidden');
            }else{
                $('#fixedUnit{{ $product->id }}').attr('hidden',true);

            }
        }
    </script>
    @endsection