@extends('admin.layout.master')
@section('title','PRODUCT CHILD')
@section ('content')
    <style>
        .custom-td{
            white-space:pre-wrap;
            word-wrap:break-word;
        }
        .table th,
        .table td {
            vertical-align: middle;
        }
    </style>
    <div class="card sina-card">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
            <h5>{{__('obs.product_child')}}</h5>
            <div>
            </div>
        </div>
        <div class="card-body">
            <div class="cl-table-container" id="div_tbl" style="max-height: calc(100vh - 250px);">
                <table class="table cl-table table-bordered table-hover" id="tbl_pro">
                    @php $default_settings = getDefaultSettings(null, 2) @endphp
                    <thead>
                        <tr>
                            <th>{{__('obs.name')}}</th>
                            <th>{{__('obs.local')}}</th>
                            <th>{{__('obs.short_name')}}</th>
                            <th>{{__('obs.barcode')}}</th>
                            <th>{{__('obs.buy_price')}}</th>
                            <th>{{__('obs.sell')}} {{__('obs.price')}}</th>
                            <th>{{__('obs.color')}}</th>
                            <th>{{__('obs.size')}}</th>
                            <th>{{__('obs.image')}}</th>
                            <th>{{__('obs.status')}}</th>
                            <th>{{__('obs.action')}}</th>
                        </tr>
                    </thead>
                    <tbody id="tbl_body">
                        @foreach ($products as $i => $item)
                            <tr>
                                <td>{{ $item->name_eng }}</td>
                                <td>{{ $item->name_local }}</td>
                                <td>{{ $item->short_name }}</td>
                                <td>{{ $item->barcode }}</td>
                                <td>{{ round($item->buy_price, 2) }}</td>
                                <td>{{ round($item->sell_price, 2) }}</td>
                                <td>
                                    {{-- <select name="color" id="color" style="width: 100%;" onchange="changeColorSize({{ $item->id }})">
                                        @foreach ($colors as $color)
                                            <option value="{{ $color->id }}" @if($item->color_id == $color->id) selected @endif>{{ $color->name }}</option>
                                        @endforeach
                                    </select> --}}
                                    {{ $item->color->name }}
                                </td>
                                <td>
                                    {{-- <select name="size" id="size" style="width: 100%;" onchange="changeColorSize({{ $item->id }})">
                                        @foreach ($sizes as $size)
                                            <option value="{{ $size->id }}" @if($item->size_id == $size->id) selected @endif>{{ $size->name }}</option>
                                        @endforeach
                                    </select> --}}
                                    {{ $item->size->name }}
                                <td>
                                    <a class="btn btn-hover text-info" href="/storage/{{ $item->image ?? ''}}" target="_blank"><i class="fas fa-image"></i></a>
                                </td>
                                <td class="text-center">
                                    @if(checkAuthPermission('product.change-status'))
                                        <div class="form-switch mx-1">
                                            <input class="form-check-input toggle_btn" onchange="changeStatus({{ $item->id }})" type="checkbox" role="switch" id="status{{ $item->id }}" @if($item->status == 1) checked @endif />
                                        </div>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if(checkAuthPermission('product.edit'))
                                        <a onclick="editProduct({{ $item->id }})" class="mx-1"><i class="fas fa-edit fs-5" title="Edit"></i></a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @include('v2.inventory.product.product_create_update', ['ret_type' => 1])
        {{-- @include('v2.inventory.global.quick_posting.q_party_create', ['type'=> 1]) --}}
        @include('v2.inventory.global.quick_posting.q_item_group_create')
        @include('v2.inventory.global.quick_posting.q_cost_center_create')
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('.select_2').select2();
        });
        const statusUrl = '/inventory/product/change-status';
        
        const callbackAfterPostingProduct = () => {
            $('#productModal').modal('hide');
            getProducts();
        }

        const changeColorSize = (id) => {
            ajaxCallV2('/inventory/product/change-color-size', 'POST', {
                id: id,
                color_id: $('#color').val(),
                size_id: $('#size').val()
            }, (res) => {
                callSweetAlert('success', `<p class="text-info">${res.message}</p>`, '');
                $('#loader').hide('slow');
                // reload page
                location.reload();
            });
        }

        const changeProductionStatus = (id, callback) => {
            ajaxCallV2('/agro/cow/change-production-status', 'POST', {
                id: id
            }, (res) => {
                callSweetAlert('success', `<p class="text-info">${res}</p>`, '');
                $('#loader').hide('slow');
                if (typeof callback != 'undefined') callback();
            });
        }
    </script>
@append