@extends('dashboard.layouts.app')

@section('title', transWord('اضافة صور المنتج'))

@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a
                                            href="{{ route('admin.products.index') }}">{{ transWord('المنتجات') }}</a>
                                    </li>
                                    <li class="breadcrumb-item"><a href="#">{{ transWord('اضافة صور المنتج') }}</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">

                <section id="basic-vertical-layouts">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h2 class="card-title">{{ transWord('اضافة صور المنتج') }}</h2>
                                </div>
                                <div class="card-body">
                                    <form action="{{ route('admin.products_images.store') }}" method="POST"
                                        class="dropzone" id="dropzone" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                                        <div class="col-12">

                                        </div>
                                    </form>

                                    @if ($product->images->count() > 0)
                                        <table class="datatables-basic table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>{{ transWord('الصورة') }}</th>
                                                    <th>{{ __('models.actions') }}</th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                                @foreach ($product->images as $key => $image)
                                                    <tr>
                                                        <td>{{ $product?->key }}</td>
                                                        <td>
                                                            <img src="{{ asset('storage') . '/' . $image->image }}"
                                                                width="100px" height="100px">
                                                        </td>
                                                        <td class="text-center">
                                                            @if (count($product->images) > 1)
                                                                <form
                                                                    action="{{ route('admin.products.images.delete', $image->id) }} "
                                                                    method="post">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-sm btn-danger"><i
                                                                            class="fa-solid fa-trash-can"></i></button>
                                                                </form>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <a href="{{ route('admin.products.index') }}" class="btn btn-primary mr-1">{{ __('models.save') }}</a>
                <!-- Basic Vertical form layout section end -->
            </div>
        </div>
    </div>
    <!-- END: Content-->

    @push('js')
        <script src="{{ asset('dashboard/assets/js/custom/validation/scrapForm.js') }}"></script>
        <script src="{{ asset('dashboard/app-assets/js/custom/preview-image.js') }}"></script>
        <script src="{{ asset('dashboard/app-assets/js/custom/custom-delete.js') }}"></script>

        <script src="https://cdn.tiny.cloud/1/ncu4y607nayo1coo3vekski4tweqhf55lrvzpu0mnmnsstgw/tinymce/6/tinymce.min.js"
            referrerpolicy="origin"></script>

        <script>
            Dropzone.options.dropzone = {
                maxFilesize: 50,
                acceptedFiles: ".jpeg,.jpg,.png",
                addRemoveLinks: true,
                timeout: 900000,
            };
        </script>
    @endpush
@endsection