@extends('admin.layouts.app')

@section('page-title')
Product @isset($product) Update @else Add @endisset
@endsection

@section('css')

@endsection

@section('content')

<div class="container-xxl">
    <form action="{{ isset($product) ? route('admin.product.update', $product) : route('admin.product.store') }}" method="post" enctype="multipart/form-data" id="addeditproduct">
        @csrf
        @if(isset($product))
            @method('PUT')
        @endif
        <div class="row">

            <div class="col-xl-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center gap-1">
                        <a href="{{ route('admin.product.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add Product image(s)</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="image" class="form-label">.jpg, .jpeg, .png</label>
                                    <input type="file" id="image" name="image[]" multiple class="form-control" placeholder=".jpg, .jpeg, .png">
                                </div>
                            </div>
                        </div>                        
                    </div>
                </div>

                @php
                if(isset($images) && count($images) > 0):
                @endphp
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Product image(s)</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                @foreach($images as $image)
                                    <div class="col-md-2 imgblock">
                                        <img src="{{ asset('storage/images/products/'.$product->id.'/thumb/'.$image->image) }}" alt="" class="object-fit-contain1 rounded img-fluid" />

                                        <div class="position-absolute bottom-0 start-10 d-block"><a href="{{ route('admin.product.deleteimage', $image->id) }}" class="deleteproductimage btn btn-danger btn-sm">
                                        Delete
                                        </a></div>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                        </div>                        
                    </div>
                </div>
                @php
                endif
                @endphp

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Product Information</h4>
                    </div>
                    <div class="card-body">
                        @foreach (config('translatable.locales') as $locale)
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="productname_{{ $locale }}" class="form-label"><strong class="text-primary"><strong class="text-primary">*</strong> {{ Str::upper($locale) }}</strong> - Product Name</label>
                                    <input type="text" id="productname_{{ $locale }}" name="{{ $locale }}[name]" value="{{ old($locale . '.name', isset($product) ? $product->translate($locale)->name : '') }}" class="form-control" placeholder="Items Name">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="description_{{ $locale }}" class="form-label"><strong class="text-primary"><strong class="text-primary">*</strong> {{ Str::upper($locale) }}</strong> - Description</label>
                                    <textarea name="{{$locale}}[description]" class="form-control bg-light-subtle" id="description_{{ $locale }}" rows="7" placeholder="Short description about the product">{{ old($locale . '.description', isset($product) ? $product->translate($locale)->description : '') }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="my-2">
                            @if ($loop->last)

                            @else
                            <hr style="border-top:1px solid lightgrey;" class="mb-4" />
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>


            </div>

            <div class="col-xl-4">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Product Attributes</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" {{ old('is_active', isset($product) ? $product->is_active : true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">Active</label>
                                    </div>
                                </div>

                                <!-- <div class="mb-3">
                                    <label for="category_id" class="form-label"><strong class="text-primary">*</strong> Category </label>
                                    <select class="form-control" id="category_id" name="category_id" data-choices data-choices-groups data-choices-search-false data-choices-sorting-false data-placeholder="Categories" multiple>
                                        @foreach($categories as $id => $fullPath)
                                            <option 
                                                value="{{ $id }}" 
                                                {{ (isset($product) && $product->category_id == $id) ? 'selected' : '' }}
                                            >
                                                {{ $fullPath }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div> -->
                                <div class="mb-3">
                                    <label for="category_id" class="form-label"><strong class="text-primary">*</strong> Category </label>
                                    <select class="form-control1" id="category_id" name="categories[]" data-choices data-choices-groups1 data-choices-removeItem data-choices-search-false data-choices-sorting-false multiple>
                                    @foreach($categories as $id => $fullPath)
                                        <option 
                                            value="{{ $id }}" 
                                            {{ (in_array($id, $selectedCategories)) ? 'selected' : '' }}
                                        >
                                            {{ $fullPath }}
                                        </option>
                                    @endforeach
                                    </select>
                                </div>                                

                                <div class="mb-3">
                                    <label for="product-stock" class="form-label"><strong class="text-primary">*</strong> Stock</label>
                                    <input type="number" id="product-stock" name="stock" value="{{ old('stock', isset($product) ? $product->stock : '') }}" class="form-control" placeholder="Quantity">
                                </div>


                                <div class="mb-3">
                                    <label for="product-brand" class="form-label">Brand</label>
                                    <input type="text" id="product-brand" name="brand" value="{{ old('brand', isset($product) ? $product->brand : '') }}" class="form-control" placeholder="Brand Name">
                                </div>


                                <div class="mb-3">
                                    <label for="product-reference" class="form-label">Reference</label>
                                    <input type="text" id="product-reference" name="reference" value="{{ old('reference', isset($product) ? $product->reference : '') }}" class="form-control" placeholder="PK12ES456">
                                </div>

                                <div class="mb-3">
                                    <label for="product-size" class="form-label">Size</label>
                                    <input type="text" id="product-size" name="size" value="{{ old('size', isset($product) ? $product->size : '') }}" class="form-control" placeholder="">
                                </div>

                                <div class="mb-3">
                                    <label for="product-diameter" class="form-label">Diameter</label>
                                    <input type="text" id="product-diameter" name="diameter" value="{{ old('diameter', isset($product) ? $product->diameter : '') }}" class="form-control" placeholder="">
                                </div>

                                <div class="mb-3">
                                    <label for="product-tension" class="form-label">Tension</label>
                                    <input type="text" id="product-tension" name="tension" value="{{ old('tension', isset($product) ? $product->tension : '') }}" class="form-control" placeholder="">
                                </div>

                                <div class="mb-3">
                                    <label for="product-materials" class="form-label">Materials</label>
                                    <input type="text" id="product-materials" name="materials" value="{{ old('materials', isset($product) ? $product->materials : '') }}" class="form-control" placeholder="">
                                </div>

                                <div class="mb-3">
                                    <label for="product-price" class="form-label"><strong class="text-primary">*</strong> Price</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text fs-20"><i class='bx bx-euro'></i></span>
                                        <input type="text" id="product-price" name="price" value="{{ old('price', isset($product) ? $product->price : '') }}" class="form-control" placeholder="000">
                                    </div>
                                </div>


                                <div class="mb-3">
                                    <label for="product-discount" class="form-label">Discount</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text fs-20"><i class='bx bxs-discount'></i></span>
                                        <input type="text" id="product-discount" name="discount" value="{{ old('discount', isset($product) ? $product->discount : '') }}" class="form-control" placeholder="000">
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="discount_type" class="form-label">Discount type </label>
                                    <select class="form-control" id="discount_type" name="discount_type" data-choices data-choices-groups data-choices-search-false data-choices-sorting-false data-placeholder="Categories">
                                        <option value="fixed" {{ old('discount_type', $product->discount_type ?? '') == 'fixed' ? 'selected' : '' }}>Fixed amount</option>
                                        <option value="percentage"  {{ old('discount_type', $product->discount_type ?? '') == 'percentage' ? 'selected' : '' }}>Percentage of amount</option>
                                    </select>
                                </div>  
                                
                                <div class="mb-3">
                                    <label for="package_size" class="form-label">Package size </label>
                                    <select class="form-control" id="package_size" name="package_size" data-choices data-choices-groups data-choices-search-false data-choices-sorting-false data-placeholder="Categories">
                                        <option value="small" {{ old('package_size', $product->package_size ?? '') == 'small' ? 'selected' : '' }}>Small</option>
                                        <option value="large"  {{ old('package_size', $product->package_size ?? '') == 'large' ? 'selected' : '' }}>Large</option>
                                    </select>
                                </div>                                  

                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-xl-12">

                <div class="p-3 bg-white mb-3 rounded">
                    <div class="row justify-content-end1 g-2">
                        <div class="col-lg-2">
                            <!-- <a href="product-add.html#!" class="btn btn-primary w-100">Create Product</a> -->
                            <!-- <input type="submit" name="submitProductForm" class="btn btn-primary w-100" value="@isset($product) Update @else Create @endisset Product" /> -->
                            <button type="submit" name="submitProductForm" class="btn btn-primary w-100">@isset($product) Update @else Create @endisset Product
                                <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                <span class="visually-hidden">...</span>
                            </button>
                        </div>
                        <div class="col-lg-2">
                            <a href="{{ route('admin.product.index') }}" class="btn btn-outline-secondary w-100">Cancel</a>
                        </div>
                        <small><strong class="text-primary">*</strong> Required fields</small>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@endsection

@section('scripts')
<script src="{{ asset('admin/assets/js/pages/product.js') }}"></script>
@endsection