@extends('admin.layouts.master-soyuz')
@section('title', __('Edit Flash Deal | '))
@section('body')

@component('admin.component.breadcumb', ['secondaryactive' => 'active'])
    @slot('heading'){{ __('Flash Deals') }}@endslot
    @slot('menu1'){{ __('Flash Deals') }}@endslot
    @slot('menu2'){{ __('Edit') }}@endslot
    @slot('button')
        <div class="col-md-6">
            <div class="widgetbar">
                <a href="{{ route('flash-sales.index') }}" class="btn btn-primary-rgba">
                    <i class="feather icon-arrow-left mr-1"></i>{{ __('Back to all') }}
                </a>
            </div>
        </div>
    @endslot
@endcomponent

@php
    $startVal = $deal->start_date && strtotime($deal->start_date) > 0 ? date('Y-m-d\TH:i', strtotime($deal->start_date)) : date('Y-m-d\TH:i');
    $endVal   = $deal->end_date   && strtotime($deal->end_date)   > 0 ? date('Y-m-d\TH:i', strtotime($deal->end_date))   : date('Y-m-d\TH:i', strtotime('+30 days'));
    $coverPath = $deal->background_image && file_exists(public_path('images/flashdeals/' . $deal->background_image))
        ? url('images/flashdeals/' . $deal->background_image)
        : null;
@endphp

<div class="contentbar">
    @if ($errors->any())
        <div class="alert alert-danger" role="alert">
            @foreach($errors->all() as $error)<p class="mb-0">{{ $error }}</p>@endforeach
        </div>
    @endif

    @if(session('success') || session('updated'))
        <div class="alert alert-success" role="alert">{{ session('success') ?? session('updated') }}</div>
    @endif

    <form action="{{ route('flash-sales.update', $deal->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row">
            {{-- LEFT — campaign details --}}
            <div class="col-lg-8">

                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-zap mr-2 text-primary"></i>{{ __('Campaign Details') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label class="font-weight-600 mb-2">{{ __('Title') }} <span class="text-danger">*</span></label>
                            <input type="text" required name="title" value="{{ old('title', $deal->title) }}" class="form-control sh-select-bare" placeholder="{{ __('e.g. Halloween Mega Sale') }}">
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Start Date & Time') }} <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="datetime-local" required name="start_date" value="{{ $startVal }}" class="form-control sh-select-bare">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="feather icon-calendar"></i></span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('End Date & Time') }} <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="datetime-local" required name="end_date" value="{{ $endVal }}" class="form-control sh-select-bare">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="feather icon-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label class="font-weight-600 mb-2">{{ __('Description / Detail') }}</label>
                            <textarea name="detail" id="editor1" class="form-control sh-select-bare" rows="6" placeholder="{{ __('Optional rich-text description shown on the deal page') }}">{!! $deal->detail !!}</textarea>
                        </div>

                        <div class="form-group mb-0">
                            <label class="font-weight-600 mb-2">{{ __('Status') }}</label><br>
                            <label class="switch mb-0">
                                <input id="status" type="checkbox" name="status" value="1" {{ $deal->status == 1 ? 'checked' : '' }}>
                                <span class="knob"></span>
                            </label>
                            <small class="text-muted d-block mt-2">{{ __('Active campaigns are visible at /flashdeals/list') }}</small>
                        </div>
                    </div>
                </div>

                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-image mr-2 text-primary"></i>{{ __('Banner Image') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-7 mb-3">
                                <div class="custom-file">
                                    <input type="file" name="background_image" accept="image/*" class="custom-file-input" id="bg-image-input">
                                    <label class="custom-file-label" for="bg-image-input">{{ __('Choose new banner') }}</label>
                                </div>
                                <small class="text-muted mt-2 d-block">{{ __('Recommended size: 2000×2000 px (square) or 16:9. JPG / PNG / WebP. Leave empty to keep the current image.') }}</small>
                            </div>
                            <div class="col-md-5 mb-3">
                                <div style="aspect-ratio: 1/1; background: var(--adm-content-bg); border-radius: 12px; overflow: hidden; border: 1px solid var(--adm-border); display: grid; place-items: center;">
                                    @if($coverPath)
                                        <img id="bg-preview" src="{{ $coverPath }}" alt="" style="width: 100%; height: 100%; object-fit: cover;">
                                    @else
                                        <span id="bg-preview" class="text-muted small">{{ __('No banner uploaded yet') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card m-b-30">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title mb-0"><i class="feather icon-shopping-bag mr-2 text-primary"></i>{{ __('Products in this campaign') }}</h5>
                        <span class="text-muted small">{{ __('Use Add to insert a new row, Remove to drop one') }}</span>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="productlist table table-bordered mb-0" style="width:100%;">
                                <thead>
                                    <tr style="background: var(--adm-content-bg);">
                                        <th style="padding: 12px 14px; min-width: 280px;">{{ __('Product') }}</th>
                                        <th style="padding: 12px 14px; width: 140px;">{{ __('Discount') }}</th>
                                        <th style="padding: 12px 14px; width: 160px;">{{ __('Type') }}</th>
                                        <th style="padding: 12px 14px; width: 100px;">{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @php $items = $deal->saleitems ?? collect(); @endphp
                                @if($items->count())
                                    @foreach($items as $item)
                                        @php
                                            $isVariant = !empty($item->product_id);
                                            $label = $isVariant
                                                ? (optional(optional($item->variant)->products)->name ? optional($item->variant->products)->name . ' (' . variantname($item->variant) . ')' : 'N/A')
                                                : (optional($item->simple_product)->product_name ?? 'N/A');
                                            $idVal = $isVariant ? $item->product_id : $item->simple_product_id;
                                        @endphp
                                        <tr>
                                            <td style="padding: 10px 14px;">
                                                <input type="text" required name="product[]" class="product form-control sh-select-bare" placeholder="{{ __('Search product') }}" value="{{ $label }}">
                                                <input type="hidden" name="type[]" class="product_type" value="{{ $isVariant ? 'variant' : 'simple' }}">
                                                <input type="hidden" name="product_id[]" class="product_ids" value="{{ $idVal }}">
                                            </td>
                                            <td style="padding: 10px 14px;">
                                                <div class="input-group">
                                                    <input type="number" min="1" max="100" required name="discount[]" class="form-control sh-select-bare" value="{{ $item->discount }}" placeholder="50">
                                                    <div class="input-group-append"><span class="input-group-text">%</span></div>
                                                </div>
                                            </td>
                                            <td style="padding: 10px 14px;">
                                                <select name="discount_type[]" class="form-control sh-select-bare">
                                                    <option value="fixed" {{ $item->discount_type == 'fixed' ? 'selected' : '' }}>{{ __('Fixed') }}</option>
                                                    <option value="upto"  {{ $item->discount_type == 'upto'  ? 'selected' : '' }}>{{ __('Up to (random)') }}</option>
                                                </select>
                                            </td>
                                            <td style="padding: 10px 14px;">
                                                <div class="d-flex" style="gap: 4px;">
                                                    <button type="button" class="addnew btn btn-primary-rgba btn-sm" title="{{ __('Add new row') }}"><i class="feather icon-plus"></i></button>
                                                    <button type="button" class="removeBtn btn btn-danger-rgba btn-sm" title="{{ __('Remove') }}"><i class="feather icon-trash"></i></button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td style="padding: 10px 14px;">
                                            <input type="text" required name="product[]" class="product form-control sh-select-bare" placeholder="{{ __('Search product') }}">
                                            <input type="hidden" name="type[]" class="product_type">
                                            <input type="hidden" name="product_id[]" class="product_ids">
                                        </td>
                                        <td style="padding: 10px 14px;">
                                            <div class="input-group">
                                                <input type="number" min="1" max="100" required name="discount[]" class="form-control sh-select-bare" placeholder="50">
                                                <div class="input-group-append"><span class="input-group-text">%</span></div>
                                            </div>
                                        </td>
                                        <td style="padding: 10px 14px;">
                                            <select name="discount_type[]" class="form-control sh-select-bare">
                                                <option value="fixed">{{ __('Fixed') }}</option>
                                                <option value="upto">{{ __('Up to (random)') }}</option>
                                            </select>
                                        </td>
                                        <td style="padding: 10px 14px;">
                                            <div class="d-flex" style="gap: 4px;">
                                                <button type="button" class="addnew btn btn-primary-rgba btn-sm"><i class="feather icon-plus"></i></button>
                                                <button type="button" class="removeBtn btn btn-danger-rgba btn-sm"><i class="feather icon-trash"></i></button>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- RIGHT — sticky save card + tips --}}
            <div class="col-lg-4">
                <div class="card m-b-30" style="position: sticky; top: 80px;">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-save mr-2 text-primary"></i>{{ __('Save Changes') }}</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">{{ __('Review the campaign details, banner, and product list. Click Update to save.') }}</p>
                        <button type="submit" class="btn btn-primary-rgba btn-block" {{ env('DEMO_LOCK') == 0 ? '' : 'disabled' }}>
                            <i class="feather icon-check-circle mr-1"></i>{{ __('Update Campaign') }}
                        </button>
                        <a href="{{ route('flash-sales.index') }}" class="btn btn-danger-rgba btn-block mt-2">
                            <i class="feather icon-x mr-1"></i>{{ __('Cancel') }}
                        </a>
                        @if($deal->status == 1)
                            <a href="{{ url('flashdeals/view/' . $deal->id . '/' . \Illuminate\Support\Str::slug($deal->title, '-')) }}" target="_blank" class="btn btn-secondary-rgba btn-block mt-2">
                                <i class="feather icon-external-link mr-1"></i>{{ __('Preview on storefront') }}
                            </a>
                        @endif
                    </div>
                </div>

                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-info mr-2 text-primary"></i>{{ __('Tips') }}</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled small text-muted mb-0" style="line-height: 1.65;">
                            <li class="mb-2">• {{ __('"Fixed" applies the same discount to every buyer.') }}</li>
                            <li class="mb-2">• {{ __('"Up to" picks a random discount between 0 % and the value set, per session.') }}</li>
                            <li class="mb-2">• {{ __('Deals with a past End Date show as Ended on the storefront but stay accessible.') }}</li>
                            <li>• {{ __('Status off keeps the campaign hidden without deleting any data.') }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@endsection

@section('custom-script')
<script>
function enableAutoComplete($element){
    $element.autocomplete({
        source: function (request, response) {
            $.ajax({
                url: @json(url('/admin/search/products')),
                data: { term: request.term },
                dataType: 'json',
                success: function (data) {
                    var resp = $.map(data, function (obj) {
                        return { type: obj.product_type, label: obj.label, value: obj.value, id: obj.id };
                    });
                    response(resp);
                }
            });
        },
        select: function (event, ui) {
            if (ui.item.value !== 'No result found') {
                this.value = ui.item.value.replace(/\D/g, '');
                $(this).closest('td').find('input.product_type').val(ui.item.type);
                $(this).closest('td').find('input.product_ids').val(ui.item.id);
            } else {
                $(this).val('');
                $(this).closest('td').find('input.product_type').val('');
                $(this).closest('td').find('input.product_ids').val('');
                return false;
            }
        },
        minLength: 1
    });
}

$(document).ready(function(){
    $('.product').each(function(){ enableAutoComplete($(this)); });

    // Live banner preview when a new file is selected
    var fileInput = document.getElementById('bg-image-input');
    if (fileInput) {
        fileInput.addEventListener('change', function(){
            var label = fileInput.nextElementSibling;
            if (label && fileInput.files && fileInput.files[0]) label.textContent = fileInput.files[0].name;
            var prev = document.getElementById('bg-preview');
            if (prev && fileInput.files && fileInput.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e){
                    if (prev.tagName === 'IMG') {
                        prev.src = e.target.result;
                    } else {
                        var img = document.createElement('img');
                        img.id = 'bg-preview';
                        img.src = e.target.result;
                        img.style.width = '100%';
                        img.style.height = '100%';
                        img.style.objectFit = 'cover';
                        prev.replaceWith(img);
                    }
                };
                reader.readAsDataURL(fileInput.files[0]);
            }
        });
    }
});

$('.productlist').on('click', 'button.addnew', function(){
    var $tr = $(this).closest('tr');
    var $clone = $tr.clone();
    $clone.find('input[type="text"], input[type="number"], input[type="hidden"]').val('');
    $clone.find('select').prop('selectedIndex', 0);
    $tr.closest('table').find('tbody').append($clone);
    var $newProductInput = $clone.find('input.product');
    $newProductInput.focus();
    enableAutoComplete($newProductInput);
});

$('.productlist').on('click', '.removeBtn', function(){
    var rowCount = $('.productlist tbody tr').length;
    if (rowCount > 1) {
        $(this).closest('tr').remove();
    } else {
        // Clear instead of removing the last row
        var $tr = $(this).closest('tr');
        $tr.find('input[type="text"], input[type="number"], input[type="hidden"]').val('');
        $tr.find('select').prop('selectedIndex', 0);
    }
});
</script>
@endsection