@extends('layouts.master')
@section('title')
    @lang('translation.create-product')
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/dropzone/dropzone.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet"
          type="text/css"/> {{-- Sweet alert popup--}}
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Ecommerce
        @endslot
        @slot('title')
            Create Product
        @endslot
    @endcomponent
    <form id="createproduct-form" action="{{ route('products.store') }}" autocomplete="off"
          novalidate method="POST" enctype="multipart/form-data">

        @csrf
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="mb-3">
                                <label class="form-label" for="product-title-input">Product Title</label>
                                <input type="hidden" class="form-control" id="formAction" name="formAction" value="add">
                                <input type="text" class="form-control d-none" id="product-id-input">
                                <input type="text" class="form-control" id="product-title-input"
                                       name="product_title" placeholder="Enter product title" required>
                                <div class="invalid-feedback">Please Enter a product title.</div>
                            </div>
                            @error('product_title')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label>Product Description </label>
                            <textarea class="form-control" id="ckeditor-classic" name="product_description" rows="5"
                                      placeholder="Enter product description" required></textarea>
                            <div class="invalid-feedback">Please enter a product description.</div>
                            @error('product_description')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                            @enderror
                            {{--                                <div id="ckeditor-classic">--}}
                            {{--                                    <p>Tommy Hilfiger men striped pink sweatshirt. Crafted with cotton. Material composition is 100% organic cotton. This is one of the world’s leading designer lifestyle brands and is internationally recognized for celebrating the essence of classic American cool style, featuring preppy with a twist designs.</p>--}}
                            {{--                                    <ul>--}}
                            {{--                                        <li>Full Sleeve</li>--}}
                            {{--                                        <li>Cotton</li>--}}
                            {{--                                        <li>All Sizes available</li>--}}
                            {{--                                        <li>4 Different Color</li>--}}
                            {{--                                    </ul>--}}
                            {{--                                </div>--}}
                        </div>
                    </div>
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Product Gallery</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <h5 class="fs-14 mb-1">Product Image</h5>
                            <p class="text-muted">Add Product main Image.</p>
                            <div class="text-center">
                                <div class="position-relative d-inline-block">
                                    <div class="position-absolute top-100 start-100 translate-middle">
                                        <label for="product-image-input" class="mb-0" data-bs-toggle="tooltip"
                                               data-bs-placement="right" title="Select Image">
                                            <div class="avatar-xs">
                                                <div
                                                    class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
                                                    <i class="ri-image-fill"></i>
                                                </div>
                                            </div>
                                        </label>
                                        <input class="form-control d-none" value="" id="product-image-input" type="file"
                                               accept="image/png, image/gif, image/jpeg" name="main_image">
                                    </div>
                                    <div class="avatar-lg">
                                        <div class="avatar-title bg-light rounded">
                                            <img src="" id="product-img" class="avatar-md h-auto"/>
                                        </div>
                                        @error('main_image')
                                        <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h5 class="fs-14 mb-1">Product Gallery</h5>
                            <p class="text-muted">Add Product Gallery Images.</p>
                            <div class="fallback">
                                <input name="gallery_images[]" type="file" multiple="multiple"
                                       id="images">
                            </div>
                            @error('gallery_images')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                            @enderror
                            <div class="dropzone">
                                <div class="fallback">
                                    <input name="images[]" type="file" multiple="multiple"
                                           id="images">
                                </div>
                                <div class="dz-message needsclick">
                                    <div class="mb-3">
                                        <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                                    </div>

                                    <h5>Drop files here or click to upload.</h5>
                                </div>
                            </div>

                            <ul class="list-unstyled mb-0" id="dropzone-preview">
                                <li class="mt-2" id="dropzone-preview-list">
                                    <!-- This is used as the file preview template -->
                                    <div class="border rounded">
                                        <div class="d-flex p-2">
                                            <div class="flex-shrink-0 me-3">
                                                <div class="avatar-sm bg-light rounded">
                                                    <img data-dz-thumbnail class="img-fluid rounded d-block" src="#"
                                                         alt="Product-Image"/>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="pt-1">
                                                    <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                    <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                    <strong class="error text-danger" data-dz-errormessage></strong>
                                                </div>
                                            </div>
                                            <div class="flex-shrink-0 ms-3">
                                                <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
                                            </div>
                                        </div>
                                    </div>
                                    @error('gallery_images')
                                    <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                    @enderror
                                </li>
                            </ul>
                            <!-- end dropzon-preview -->
                        </div>
                    </div>
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs-custom card-header-tabs border-bottom-0" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#addproduct-general-info"
                                   role="tab">
                                    General Info
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#addproduct-metadata"
                                   role="tab">
                                    Meta Data
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- end card header -->
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="addproduct-general-info" role="tabpanel">
                                <div class="row">
                                    <div class="col-lg-6 col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="brand-name-input">Brand Id</label>
                                            <input type="text" class="form-control" id="brand-name-input"
                                                   placeholder="Enter brand ID" name="brand_id" required>
                                            @error('brand_id')
                                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="sku-name-input">
                                                Stock Keeping Unit (SKU)</label>
                                            <input type="text" class="form-control" id="sku-name-input"
                                                   placeholder="Enter sku of the product" name="sku" required>
                                            @error('sku')
                                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="stocks-input">Stocks</label>
                                            <input type="text" class="form-control" name="stocks" id="stocks-input"
                                                   placeholder="Stocks" required>
                                            <div class="invalid-feedback">Please enter the stocks.</div>
                                            @error('stocks')
                                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-price-input">Price</label>
                                            <div class="input-group has-validation mb-3">
                                                <span class="input-group-text" id="product-price-addon">$</span>
                                                <input type="text" class="form-control" id="product-price-input"
                                                       placeholder="Enter price" aria-label="Price"
                                                       aria-describedby="product-price-addon" required name="price">
                                                <div class="invalid-feedback">Please Enter a product price.</div>
                                            </div>
                                            @error('price')
                                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-discount-input">Discount</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text" id="product-discount-addon">%</span>
                                                <input type="text" class="form-control" id="product-discount-input"
                                                       placeholder="Enter discount" aria-label="discount"
                                                       aria-describedby="product-discount-addon" name="discount"
                                                       required>
                                            </div>
                                            @error('discount')
                                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="orders-input">Orders</label>
                                            <input type="text" class="form-control" id="orders-input"
                                                   placeholder="Orders" required name="orders">
                                            <div class="invalid-feedback">Please Enter a product orders.</div>
                                            @error('orders')
                                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- end col -->
                                </div>
                                <!-- end row -->
                            </div>
                            <!-- end tab-pane -->

                            <div class="tab-pane" id="addproduct-metadata" role="tabpanel">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="meta-title-input">Meta title</label>
                                            <input type="text" class="form-control" placeholder="Enter meta title"
                                                   id="meta-title-input">
                                        </div>
                                    </div>
                                    <!-- end col -->

                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="meta-keywords-input">Meta Keywords</label>
                                            <input type="text" class="form-control" placeholder="Enter meta keywords"
                                                   id="meta-keywords-input">
                                        </div>
                                    </div>
                                    <!-- end col -->
                                </div>
                                <!-- end row -->

                                <div>
                                    <label class="form-label" for="meta-description-input">Meta Description</label>
                                    <textarea class="form-control" id="meta-description-input"
                                              placeholder="Enter meta description" rows="3"></textarea>
                                </div>
                            </div>
                            <!-- end tab pane -->
                        </div>
                        <!-- end tab content -->
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
                <div class="text-end mb-3">
                    <button type="submit" class="btn btn-success w-sm">Submit</button>
                </div>
            </div>
            <!-- end col -->

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Publish</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="choices-publish-status-input" class="form-label">Status</label>

                            <select class="form-select" id="choices-publish-status-input" data-choices
                                    data-choices-search-false>
                                <option value="Published" selected>Published</option>
                                <option value="Draft">Draft</option>
                            </select>
                        </div>

                        {{--                        <div>--}}
                        {{--                            <label for="choices-publish-visibility-input" class="form-label">Visibility</label>--}}
                        {{--                            <select class="form-select" id="choices-publish-visibility-input" data-choices--}}
                        {{--                                    data-choices-search-false>--}}
                        {{--                                <option value="Public" selected>Public</option>--}}
                        {{--                                <option value="Hidden">Hidden</option>--}}
                        {{--                            </select>--}}
                        {{--                        </div>--}}
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Publish Schedule</h5>
                    </div>
                    <!-- end card body -->
                    <div class="card-body">
                        <div>
                            <label for="datepicker-publish-input" class="form-label">Publish Date & Time</label>
                            <input type="text" id="datepicker-publish-input" class="form-control"
                                   placeholder="Enter publish date" data-provider="flatpickr" data-date-format="d.m.y"
                                   data-enable-time>
                        </div>
                    </div>
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Product Categories</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-2"><a href="{{ route("categories.create") }}"
                                                      class="float-end text-decoration-underline">Add
                                New</a>Select product category</p>
                        <select class="form-select" id="choices-category-input" name="category_id"
                                data-choices data-choices-search-false>
                            <option value=""> Select Parent Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">
                                    {{ getCategoryHierarchy($category) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Product Tags</h5>
                    </div>
                    <div class="card-body">
                        <div class="hstack gap-3 align-items-start">
                            <div class="flex-grow-1">
                                <input class="form-control" data-choices data-choices-multiple-remove="true"
                                       placeholder="Enter tags" type="text"
                                       value="Cotton" name="product_tags"/>
                                @error('product_tags')
                                <p class=" ml-3 mt-1 text-sm text-danger">{{ $message }}</p>
                                @enderror
                            </div>

                        </div>
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Product Short Description</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-2">Add short description for product</p>
                        <textarea class="form-control" placeholder="Must enter minimum of a 100 characters" rows="3"
                                  name="short_description"></textarea>
                        @error('short_description')
                        <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
            </div>
        </div>
        <!-- end row -->
        @if($errors->any())
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    document.getElementById('sa-error').click();
                });
            </script>
        @endif

    </form>


    <!--These buttons will be called when creating a new product and depending if product created or not will display a popup status  -->
    <button id="sa-error">Error while creating product popup</button>
    <button id="custom-sa-success" >Product created popup</button>

@endsection
@section('script')
    <script src="{{ URL::asset('build/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
    <script src="{{ URL::asset('build/libs/dropzone/dropzone-min.js') }}"></script>
    <script src="{{ URL::asset('build/js/pages/ecommerce-product-create.init.js') }}"></script>
    <script src="{{ URL::asset('build/js/admin/app.js') }}"></script>

    {{--     Sweet alert popup--}}
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('build/js/pages/sweetalerts.init.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            @if (session('product_created'))
            // Simulate a button click
            document.getElementById('custom-sa-success').click();
            @endif
        });

        document.getElementById('sa-error').addEventListener('click', function () {
            Swal.fire({
                title: 'Oops...',
                text: "We couldn't create the new product",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
        // Assuming you are using SweetAlert for the popup
        document.getElementById('custom-sa-success').addEventListener('click', function () {
            Swal.fire({
                title: 'Success',
                text: "{{ session('product_created') }}",
                icon: 'success',
                confirmButtonText: 'OK'
            });
        });
    </script>

@endsection