@extends('layouts.admin.app')

@section('page-title')
    {{ __('Tire Sizes') }}
@endSection

@section('page-nav-title')
    <style>
        .img-container {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .delete-button {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #b1ca00;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
    <div class="app-title">
        <div>
            <h1>{{ __('Tire Sizes') }}</h1>
            <p>{{ __('Edit') }}</p>
        </div>

        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">{{ __('Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.Products.index', 1) }}">{{ __('Tire Sizes') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Edit') }}</a></li>
        </ul>
    </div>
@endsection

@section('content')

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{ __('Edit Tire Sizes') }}</h3>
                <div class="tile-body">
                    <form method="post" action="{{ route('admin.Products.update', ['id' => $product->id, 'page' => $page]) }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('English Product Description') }}</label>
                                    <input class="form-control @if ($errors->has('description_en')) is-invalid @endif" type="text" name="description_en" placeholder="{{ __('Enter Description') }}" value="{{ inputValue('description_en', $product) }}" required>
                                </div>
                                @error('description_en')
                                    <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>

                            <input class="form-control" type="hidden" name="vector_id" value="1"required>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Arabic Product Description') }}</label>
                                    <input class="form-control @if ($errors->has('description_ar')) is-invalid @endif" type="text" name="description_ar" placeholder="{{ __('Enter Description') }}" value="{{ inputValue('description_ar', $product) }}" required>
                                </div>
                                @error('description_ar')
                                    <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Pattern-Name') }}</label>
                                    <select class="form-control" style="padding: 7px;" name="pattern_id">
                                        <option value="" selected>{{ __('select-pattern') }}</option>
                                        @foreach ($patterns as $pattern)
                                            <option value="{{ $pattern->id }}" {{ $pattern->id == $product->pattern_id ? 'selected' : '' }}>{{ $pattern->attr_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('pattern_id')
                                    <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>


                        </div>
                        <hr>

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Pattern-Main-image') }}</label>
                                    <div class="upload-button-box">
                                        <button class="btn btn-primary form-control button-upload-file">
                                            <input class="input-file show-uploaded" data-upload-type="single" data-imgs-container-class="main-images" type="file" name="default_image" accept="image/x-png,image/gif,image/jpeg">
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{ __('upload Main image') }}</span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-5 col-sm-6">
                                <div class="main-images">
                                    <div class="img-container" style="">
                                        @if ($product->getFirstMediaFile('default'))
                                            <img src="{{ $product->getFirstMediaFile('default')->url }}" alt="">
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row dis-none ads-photo">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Sub-pattern image') }}</label>
                                    <div>
                                        <button class="btn btn-primary form-control button-upload-file">
                                            <input class="input-file show-uploaded" data-upload-type="multi" data-imgs-container-class="uploaded-images" multiple type="file" name="files_attach[]" accept="image/x-png,image/gif,image/jpeg">
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{ __('upload images') }}</span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="uploaded-images" id="uploaded-images-container">
                                    @if ($product->getFirstMediaFile('product_photo'))
                                        @foreach ($product->getMediaFiles('product_photo') as $file)
                                            <div class="img-container">
                                                {{-- <img src="{{ 'http://127.0.0.1:8000/' . $file->path . '/' . $file->filename }}" alt="{{ 'http://127.0.0.1:8000/storage/' . $file->path }}" width="150px" height="150px"> --}}
                                                <img src="{{ $file->url }}" alt="{{ $file->name }}" width="150px" height="150px">
                                                <button class="delete-button" type="button" onclick="deleteImage('{{ $file->id }}')"><i class="fas fa-times"></i></button>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="col-lg-6 p-0">
                            <div class="form-group">
                                <label class="control-label">{{ __('Upload attachment (.pdf)') }}</label>
                                <div class="upload-button-box">
                                    <button class="btn btn-primary form-control button-upload-file">
                                        <input class="input-file show-uploaded" data-upload-type="single" data-imgs-container-class="single-file" type="file" name="file_attachment" accept="application/pdf">
                                        <span class="upload-file-content">
                                            <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                            <span class="upload-file-content-text">{{ __('PDF File') }}</span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-5 col-sm-6">
                                <div class="single-file">
                                    <div class="img-container" style="width: 200px">
                                        @if ($product->getFirstMediaFile('attachment'))
                                            <iframe src="{{ $product->getFirstMediaFile('attachment')->url }}"> </iframe>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{ __('Edit') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            console.log($("#RowService").length == 1);
            if ($("#RowTemplate").length == 1) {
                $(".removeService").hide();
            } else {
                $(".removeService").show();
            }
            $(document).ready(function() {
                $(document).on("click", ".addService", function() {
                    console.log($("#RowTemplate").length);

                    let htmlElement = $("script#RowTemplate").html();

                    $("#RowService").append($(htmlElement));
                    $(".removeService").show();
                });
            });
        });

        $(document).ready(function() {
            $(document).on("click", ".removeService", function() {
                let htmlElement = $("script#RowTemplate").html();
                $("#RowService").children().last().remove();
                console.log($("#RowTemplate").children().length);
            });
        });

        function deleteImage(id) {
            Swal.fire({
                title: "{{ __('Are you sure?') }}",
                text: "{{ __('You wont be able to revert this!') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: "{{ __('Yes, delete it!') }}",
                cancelButtonText: "{{ __('No, cancel!') }}",
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "post",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('ajax.product.deleteImage') }}",
                        data: {
                            id: id
                        },
                        success: function(response) {
                            window.location.reload();
                        }
                    });
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    // User canceled, do nothing or show message
                    Swal.fire("{{ __('Cancelled') }}", "{{ __('Your image is safe 😊') }}", 'info');
                }
            });
        }
    </script>
    @include('admin.product.template')
@endsection