@extends('layouts.app')
@section('title', 'Bulk AI Photo Update')

@section('content')
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">Bulk AI Photo Update
        <small class="tw-text-sm md:tw-text-base tw-text-gray-700 tw-font-semibold">Store/location aware product photo updater</small>
    </h1>
</section>

<section class="content">
    <div class="box box-solid">
        <div class="box-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>@lang('purchase.business_location')</label>
                        <select id="ai_location_id" class="form-control select2" style="width:100%;">
                            <option value="all" @if(empty($location_id) || $location_id == 'all') selected @endif>@lang('lang_v1.all')</option>
                            @foreach($locations as $id => $name)
                                <option value="{{ $id }}" @if((string)$location_id === (string)$id) selected @endif>{{ $name }}</option>
                            @endforeach
                        </select>
                        <p class="help-block">Only products assigned to this location will be shown and updated.</p>
                    </div>
                </div>
                <div class="col-md-8 text-right" style="padding-top:24px;">
                    <a href="{{ action([\App\Http\Controllers\ProductController::class, 'index']) }}" class="btn btn-default">
                        <i class="fa fa-arrow-left"></i> Back to Products
                    </a>
                    <button class="btn btn-primary" id="select_all_ai"><i class="fa fa-check-square"></i> Select All</button>
                    <button class="btn btn-secondary" id="unselect_all_ai"><i class="fa fa-square"></i> Unselect All</button>
                    <button class="btn bg-blue-btn" id="fetch_all_ai"><i class="fa fa-magic"></i> Fetch AI Photos</button>
                    <button class="btn btn-success" id="save_selected_ai"><i class="fa fa-save"></i> Save Selected</button>
                    <button class="btn btn-danger" id="reject_selected_ai"><i class="fa fa-times"></i> Reject Selected</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        @forelse($products as $item)
            <div class="col-md-3 col-sm-6 mb-4 ai-product-wrapper">
                <div class="ai-photo-card">
                    <div class="ai-photo-image">
                        <img id="preview_{{ $item->id }}" src="{{ $item->image_url }}" alt="{{ e($item->name) }}">
                    </div>
                    <div class="ai-photo-content">
                        <h5>{{ $item->name }}</h5>
                        <div class="ai-location-text">
                            {{ $item->product_locations->pluck('name')->implode(', ') }}
                        </div>
                        <label class="ai-select-row">
                            <input type="checkbox" class="ai-select" data-id="{{ $item->id }}"> Select
                        </label>
                        <div class="d-grid gap-2">
                            <button 
    class="btn btn-info btn-block fetch-single-ai" 
    data-id="{{ $item->id }}" 
    data-name="{{ e($item->name) }}"
    data-sku="{{ e($item->sku ?? '') }}"
    data-brand="{{ e(optional($item->brand)->name ?? '') }}"
    data-category="{{ e(optional($item->category)->name ?? '') }}">
                                <i class="fa fa-magic"></i> Fetch AI
                            </button>
                            <button class="btn btn-success btn-block save-single-ai" data-id="{{ $item->id }}" disabled>
                                <i class="fa fa-save"></i> Save Photo
                            </button>
                            <button class="btn btn-danger btn-block reject-single-ai" data-id="{{ $item->id }}">
                                <i class="fa fa-times"></i> Reject
                            </button>
                        </div>
                        <div class="ai-status mt-2" id="status_{{ $item->id }}">Waiting</div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-md-12">
                <div class="alert alert-info">No products found for this store/location.</div>
            </div>
        @endforelse
    </div>
</section>
@endsection

@section('javascript')
<script>
let aiImages = {};
let rejectedImages = {};

function selectedAiLocation(){
    return $('#ai_location_id').val() || 'all';
}

$('#ai_location_id').on('change', function(){
    window.location.href = '{{ route('products.bulk_photo_update') }}?location_id=' + encodeURIComponent($(this).val());
});

$(document).on('click','.fetch-single-ai',function(){
    let itemId = $(this).data('id');
    let itemName = $(this).data('name');
    let itemSku = $(this).data('sku') || '';
let itemBrand = $(this).data('brand') || '';
let itemCategory = $(this).data('category') || '';

    $('#status_'+itemId).html('Fetching...');

    $.ajax({
        url: '{{ route('products.fetch_photo_suggestion') }}',
        method:'POST',
        data:{
    _token: '{{ csrf_token() }}',
    item_name:itemName,
    item_sku:itemSku,
    item_brand:itemBrand,
    item_category:itemCategory,
    rejected_images: rejectedImages[itemId] || [],
    refresh: Date.now()
},
        success:function(data){
            if(typeof data === 'string'){
                data = JSON.parse(data);
            }
            if(data.status=='success'){
                aiImages[itemId] = data.image;
                $('#preview_'+itemId).attr('src',data.image);
                $('#status_'+itemId).html('AI Photo Ready');
                $('button.save-single-ai[data-id="'+itemId+'"]').removeAttr('disabled');
            }else{
                $('#status_'+itemId).html(data.message || 'No Image Found');
            }
        },
        error:function(){
            $('#status_'+itemId).html('Fetch Failed');
        }
    });
});

$(document).on('click','.save-single-ai',function(){
    let itemId = $(this).data('id');
    let imageUrl = aiImages[itemId];

    if(!imageUrl){
        $('#status_'+itemId).html('Fetch photo first');
        return;
    }

    $('#status_'+itemId).html('Saving...');

    $.ajax({
        url:'{{ route('products.save_suggested_photo') }}',
        method:'POST',
        data:{
            _token: '{{ csrf_token() }}',
            item_id:itemId,
            image_url:imageUrl,
            location_id:selectedAiLocation()
        },
        success:function(data){
            if(typeof data === 'string'){
                data = JSON.parse(data);
            }
            if(data.status=='success'){
                if(data.image){
                    $('#preview_'+itemId).attr('src', data.image);
                }
                $('#status_'+itemId).html('Saved Successfully');
            }else{
                $('#status_'+itemId).html(data.message || 'Save Failed');
            }
        },
        error:function(){
            $('#status_'+itemId).html('Save Failed');
        }
    });
});

$('#fetch_all_ai').on('click', function(){
    let buttons = $('.fetch-single-ai');
    let index = 0;

    function fetchNext(){
        if(index >= buttons.length){
            toastr.success('All AI photo suggestions loaded');
            return;
        }
        $(buttons[index]).trigger('click');
        index++;
        setTimeout(fetchNext, 1500);
    }
    fetchNext();
});

$(document).on('click','.reject-single-ai',function(){

    let itemId = $(this).data('id');

    if (!rejectedImages[itemId]) {
        rejectedImages[itemId] = [];
    }

    if (aiImages[itemId]) {
        rejectedImages[itemId].push(aiImages[itemId]);
    }

    delete aiImages[itemId];

    $('#status_'+itemId).html('Rejected - fetching a different image next time');

    $('button.save-single-ai[data-id="'+itemId+'"]')
        .attr('disabled',true);

    $('.ai-select[data-id="'+itemId+'"]')
        .prop('checked',false);

});

$('#save_selected_ai').on('click',function(){
    $('.ai-select:checked').each(function(){
        let itemId = $(this).data('id');
        if(aiImages[itemId]){
            $('button.save-single-ai[data-id="'+itemId+'"]').trigger('click');
        }
    });
});

$('#reject_selected_ai').on('click',function(){
    $('.ai-select:checked').each(function(){
        let itemId = $(this).data('id');
        $('.reject-single-ai[data-id="'+itemId+'"]').trigger('click');
    });
});

$('#select_all_ai').on('click', function(){
    $('.ai-select').prop('checked', true);
});

$('#unselect_all_ai').on('click', function(){
    $('.ai-select').prop('checked', false);
});
</script>

<style>
.ai-photo-card{background:#0f172a;border-radius:18px;overflow:hidden;border:1px solid rgba(41,211,255,.15);box-shadow:0 8px 20px rgba(0,0,0,.25);margin-bottom:25px;}
.ai-select-row{color:#fff;font-weight:700;display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.ai-photo-image{height:220px;background:#111827;}
.ai-photo-image img{width:100%;height:100%;object-fit:cover;}
.ai-photo-content{padding:15px;}
.ai-photo-content h5{color:#fff;font-size:16px;min-height:45px;margin-bottom:5px;}
.ai-location-text{color:#94a3b8;font-size:12px;min-height:18px;margin-bottom:10px;}
.ai-status{color:#29d3ff;font-weight:700;text-align:center;margin-top:10px;}
.mb-4{margin-bottom:20px;}
.gap-2 .btn{margin-bottom:7px;}
</style>
@endsection