@extends('admin.layout.index')

@section('title')
ویرایش تصویر محصول
@endsection

@section('script')
    <script>
        // Show File Name
        $('#primary_image').change(function() {
            //get the file name
            var fileName = $(this).val();
            //replace the "Choose a file" label
            $(this).next('.custom-file-label').html(fileName);
        });

        $('#images').change(function() {
            //get the file name
            var fileName = $(this).val();
            //replace the "Choose a file" label
            $(this).next('.custom-file-label').html(fileName);
        });

        function set_as_second_image(image_id) {
            let selector = '#set_as_second_image_' + image_id;
            $.ajax({
                url: "{{ route('admin.products.images.set_as_second_image') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    image_id: image_id,
                },
                dataType: "json",
                type: 'POST',
                beforeSend: function () {
                    $("#overlay").fadeIn();
                },
                success: function (msg) {
                    if (msg) {
                        if (msg[0] === 1) {
                            $(selector).parent().append(msg[1]);
                            $(selector).remove();
                        }
                        if (msg[0] === 0) {
                            swal({
                                title:'ERROR',
                                icon:'error',
                                text:msg[1],
                                buttons:'ok',
                            })
                        }
                    }
                    $("#overlay").fadeOut();

                },
                fail: function (error) {
                    console.log(error);
                    $("#overlay").fadeOut();
                }
            })
        }

// برای آپدیت آلت تصویر با Ajax
function updateAltText(image_id) {
    var altText = $('#alt_text_' + image_id).val();  // گرفتن مقدار آلت از فیلد ورودی
    $.ajax({
              url: "{{ route('admin.products.images.updateAltText', ['product' => $product->id, 'image' => '__image_id__']) }}".replace('__image_id__', image_id),
        data: {
            _token: "{{ csrf_token() }}",
            alt_text: altText
        },
        dataType: "json",
        type: 'POST',
        beforeSend: function () {
            $("#overlay").fadeIn();
        },
        success: function (response) {
            if (response.success) {
                // اگر موفق بود، آلت تصویر جدید را نمایش بدهیم
                $('#alt_text_label_' + image_id).text(response.alt_text);
            } else {
                alert('خطا در بروزرسانی آلت');
            }
            $("#overlay").fadeOut();
        },
        error: function (error) {
            console.log(error);
            $("#overlay").fadeOut();
        }
    });
}

    </script>
@endsection

@section('content')
    <div class="col-xl-12 col-md-12 mb-4 p-5 bg-white">
        <div class="mb-4 text-center text-md-right">
            <h5 class="font-weight-bold">ویرایش تصاویر محصول : {{ $product->name }}</h5>
        </div>
        <hr>

        @include('admin.sections.errors')

        {{-- Show Primary Image --}}
        <div class="row">
            <div class="col-12 col-md-12 mb-5">
                <h5>تصویر اصلی : </h5>
            </div>
            <div class="col-12 col-md-3 mb-5">
                <div class="card">
                    <img class="card-img-top"
                         src="{{ imageExist(env('PRODUCT_IMAGES_UPLOAD_PATH'),$product->primary_image) }}"
                         alt="{{ $product->name }}">
                </div>
            </div>
        </div>

        <hr>
        <div class="row">
            <div class="col-12 col-md-12 mb-5">
                <h5>تصاویر : </h5>
            </div>
            @foreach ($product->images as $image)
                <div class="col-md-3 mb-2">
                    <div class="card">
                        <img class="card-img-top" src="{{ imageExist(env('PRODUCT_IMAGES_UPLOAD_PATH'),$image->image) }}"
                             alt="{{ $product->name }}">
                        <div class="card-body text-center">
                            <form action="{{ route('admin.products.images.destroy', ['product' => $product->id]) }}" method="post">
                                @method('DELETE')
                                @csrf
                                <input type="hidden" name="image_id" value="{{ $image->id }}">
                                <button class="btn btn-danger btn-sm mb-3" type="submit">حذف</button>
                            </form>
                            <form action="{{ route('admin.products.images.set_primary', ['product' => $product->id]) }}"
                                  method="post">
                                @method('PUT')
                                @csrf
                                <input type="hidden" name="image_id" value="{{ $image->id }}">

                <!-- فیلد آلت برای هر تصویر -->
                <input type="text" id="alt_text_{{ $image->id }}" value="{{ old('alt_text', $image->alt_text) }}" class="form-control mb-2">
                <button type="button" class="btn btn-warning btn-sm" onclick="updateAltText({{ $image->id }})">به‌روزرسانی آلت</button>

                <!-- نمایش آلت تصویر -->
                <p id="alt_text_label_{{ $image->id }}" class="mt-2">{{ $image->alt_text }}</p>
                                <button class="btn btn-primary btn-sm mb-3" type="submit">انتخاب به عنوان تصویر
                                    اصلی</button>
                                <button onclick="set_as_second_image({{ $image->id }})"
                                        id="set_as_second_image_{{ $image->id }}"
                                        class="btn {{ $image->set_as_second_image==0?'btn-dark text-gray-500':'btn-success' }} btn-sm mb-3"
                                        type="button">
                                    انتخاب به عنوان تصویر دوم
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <hr>

        <form action="{{ route('admin.products.images.add', ['product' => $product->id]) }}" method="POST"
              enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="form-group col-md-4">
                    <label for="primary_image"> انتخاب تصویر اصلی </label>
                    <div class="custom-file">
                        <input type="file" name="primary_image" class="custom-file-input" id="primary_image">
                        <label class="custom-file-label" for="primary_image"> انتخاب فایل </label>
                    </div>
                </div>

                <div class="form-group col-md-4">
                    <label for="images"> انتخاب تصاویر </label>
                    <div class="custom-file">
                        <input type="file" name="images[]" multiple class="custom-file-input" id="images">
                        <label class="custom-file-label" for="images"> انتخاب فایل ها </label>
                    </div>
                </div>
                                <div class="form-group col-md-4">
                    <label for="video_gallery"> ویدئو گالری  </label>
                    <div class="custom-file">
                        <input type="text" value="{{$product->video_gallery}}" name="video_gallery"  class="form-control" id="video_gallery">
               
                    </div>
                </div>
                
            </div>

            <button class="btn btn-primary mt-5" type="submit">ویرایش</button>
            <a href="{{ $pre_url }}" class="btn btn-dark mt-5 mr-3">بازگشت</a>
        </form>
    </div>
@endsection