@csrf
<div class="form-body">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#General" data-toggle="tab"> {{ __('lang.general') }} </a>
                </li>
                <li>
                    <a href="#Images" data-toggle="tab"> {{ __('lang.images') }} </a>
                </li>
                <li>
                    <a href="#Departments" data-toggle="tab"> {{ __('lang.branches') }} </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade active in" id="General">
                    <div class="col-md-12">
                        <div class="form-group {{ $errors->has('service_id') ? 'has-error' : '' }}">
                            <label for="category_store_id">{{ __('lang.department') }} <span class="required">*</span></label>
                            <select id="category_store_id" data-title="{{ __('lang.choose') }} {{ __('lang.department') }}" name="category_store_id" class="form-control bs-select" required>
                                @foreach($departments as $get)
                                    <option {{ old('category_store_id', $data->category_store_id ?? null) == $get->id ? 'selected' : '' }} value="{{ $get->id }}">{{ $get->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
                            <label for="title">{{ __('lang.name_meals_products') }} <span class="required">*</span></label>
                            <input type="text" id="title" name="title" min="2" max="190" value="{{ old('title', $data->title ?? null) }}" class="form-control" placeholder="{{ __('lang.enter') }} {{ __('lang.name_meals_products') }}" required>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group {{ $errors->has('description') ? 'has-error' : '' }}">
                            <label for="description">{{ __('lang.description') }} <small><span class="remChars">{{ 600 - mb_strlen(old('description', $data->description ?? null)) }}</span> الأحرف المتبقية</small></label>
                            <textarea id="description" name="description" maxlength="600" class="form-control max_length" placeholder="{{ __('lang.enter') }} {{ __('lang.description') }}">{{ old('description', $data->description ?? null) }}</textarea>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group {{ $errors->has('price') ? 'has-error' : '' }}">
                            <label for="price">{{ __('lang.price') }} <span class="required">*</span></label>
                            <input required type="number"  max="1000000" step="0.001" name="price" id="price" value="{{ old('price', $data->price ?? '0.001') }}" class="form-control id_number" placeholder="{{ __('lang.enter') }} {{ __('lang.price') }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group {{ $errors->has('preparation_time') ? 'has-error' : '' }}">
                            <label for="preparation_time">{{ __('lang.preparation_time') }} <span class="required">*</span></label>
                            <input required type="number" min="1" max="1000" name="preparation_time" id="preparation_time" value="{{ old('preparation_time', $data->preparation_time ?? null) }}" class="form-control id_number" placeholder="{{ __('lang.enter') }} {{ __('lang.preparation_time') }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group {{ $errors->has('quantity') ? 'has-error' : '' }}">
                            <label for="quantity">{{ __('lang.quantity') }}</label>
                            <input type="number" min="1" max="1000000" id="quantity" name="quantity" value="{{ old('quantity', $data->quantity ?? null) }}" class="form-control id_number" placeholder="{{ __('lang.enter') }} {{ __('lang.quantity') }}">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group {{ $errors->has('thumbnail') ? 'has-error' : '' }}">
                            <label for="quantity">{{ __('lang.image') }} <span class="required">*</span></label>
                            <div class="file-loading">
                                <input id="input-21" type="file" name="thumbnail" accept="image/*">
                            </div>
                        </div>
                    </div>
                    @if(isset($data->thumbnail))
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body text-center">
                                    <div class="preview_images prev_prod_imgs">
                                        <a href="{{ asset($data->thumbnail) }}">
                                            <img src="{{ asset($data->thumbnail) }}" class="img-thumbnail img_pro_dis">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                </div>
                <div class="tab-pane fade" id="Images">
                    <div class="col-sm-12">
                        <div class="row ImageGallery">
                            @if (isset($data) && $data->images->isNotEmpty())
                                @foreach ($data->images as $item)
                                    <div class="col-sm-3">
                                        <div class="card">
                                            <div class="card-body text-center">
                                                <a href="javascript:;" title="{{ __('lang.delete') }}" data-id="{{ route('dashboard.stores.products.product-image-delete',['id' => $item->id , 'p_id' => $data->id]) }}" class="btn btn-danger deleteImgProd confirmDeleteItem"><i class="fa fa-trash"></i></a>
                                                <div class="preview_images prev_prod_imgs">
                                                    <a href="{{ asset($item->image) }}">
                                                        <img src="{{ asset($item->image) }}" class="img-thumbnail img_pro_dis">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="file-loading">
                                <input id="file-1" type="file" name="images[]" multiple class="file_image" data-show-upload="false" data-msg-placeholder="اسقط الصور هنا" data-browse-on-zone-click="true" data-min-file-count="1">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="Departments">
                    @if(isset($product_branch))
                        @foreach($product_branch as $item)
                            <span class="btn btn-success relative" style="margin: 10px">
                                {{ $item->store->name }}
                                <i class="fa fa-times confirmDeleteBranch" data-id="{{ route('dashboard.stores.products.delete-branch',['id' => $item->id,'p_id' => $item->product_id]) }}" aria-hidden="true" style="color: red;position: absolute;top: -8px;left: -12px;font-size: 29px;"></i>
                            </span>
                        @endforeach
                    @endif
                    <div class="table-responsive">
                        @if(count($branches->children))
                            <table style="margin-top: 10px;" class="table table-bordered table-striped table-condensed flip-content">
                                <thead class="flip-content">
                                <tr>
                                    <th style="width: 100px"> {{ __('lang.branches') }} </th>
                                    <th style="width: 250px;"> {{ __('lang.select') }} </th>
                                </tr>
                                </thead>
                                <tbody>
                                    @foreach($branches->children as $key => $get)
                                        <tr>
                                            <td>
                                                {{ $get->name }}
                                            </td>
                                            <td>
                                                <input style="width:20px;height: 20px;" type="checkbox" class="closedDay" name="branches[]" value="{{ $get->id }}">
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <h3 style="color: #d4d4d4;font-weight: bold;text-align: center;padding-top: 100px;padding-bottom: 100px;">{{ __('lang.product_is_available') }}</h3>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="form-actions">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-9">
                    <button type="submit" id="submit" class="btn green">{{ __('lang.submit') }}</button>
                    <a href="{{ route('dashboard.stores') }}" class="btn default">{{ __('lang.cancel') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>


@section('css')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput-rtl.css" media="all" rel="stylesheet" type="text/css" />
    <link href="{{ asset('admin/assets') }}/css/magnific-popup.css" rel="stylesheet" type="text/css" />
@stop
@section('js')
    <script src="{{ asset('admin/assets') }}/js/jquery.magnific-popup.min.js"></script>
    <!-- File Input -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
    <script>
        $(".file_image").fileinput({
            theme: 'fa',
            language: 'ar',
            uploadUrl: '/test',
            rtl: true,
            showUpload: false,
            fileActionSettings: {
                showUpload: false,
            },
            dropZoneTitle: 'افلت الصور هنا <br/>',
            dropZoneClickTitle: 'أو اضغط لتحديد الصور <br/>',
            showRemove: true,
            allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],
            overwriteInitial: false,
            maxFileSize: 4000,
            maxFileCount: "@isset($data) {{ 10 - $data->images_count }}) @else 10 @endisset",
            msgFilesTooMany: 'عدد الصور المحددة <b>({n})</b> تخطى الحد الأقصى <b>{m}</b>!',
            msgPlaceholder: 'اختر الصورة',
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            },
            browseLabel: 'تصفح',
            browseClass: 'btn blue',
            removeLabel: 'حذف',

        });

        $("#input-21").fileinput({
            previewFileType: "image",
            browseClass: "btn btn-success btn-line",
            browseLabel: " اختر صورة ",
            browseIcon: "<i class=\"fa fa-picture-o\"></i> ",
            removeClass: "btn btn-danger btn-line",
            removeLabel: "حذف الصورة",
            showUpload: false,

        });
    </script>
@stop