@extends('layouts.admin.app')

@section('page-title')
    {{ __('patterns') }}
@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>{{ __('patterns') }}</h1>
            <p>{{ __('edit-gallery-patterns') }}</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.patterns.index') }}">{{ __('patterns') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Gallery') }}</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-gallery-patterns') }}</h3>
                <div class="tile-body">
                    <form method="post" action="{{ route('admin.patterns.update', $pattern->id) }}" enctype="multipart/form-data">

                        @csrf
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="control-label">{{ __('gallery-patterns') }}</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>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="uploaded-images" id="uploaded-images-container">
                                    @if ($pattern->getFirstMediaFile('pattern_photos'))
                                        @foreach ($pattern->getMediaFiles('pattern_photos') 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>
                </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">
        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.pattern.index') }}",
                        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