@extends('layouts.admin-layout')
@section('title')
    Edit Product
@endsection
@section('content')
<style>
    .active { background-color: #007BFF !important; color: white !important; }
    .history-toggle-btn {
        width: 100%;
        background: none;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin-top: 24px;
        font-size: 14px;
        font-weight: 500;
        color: #495057;
        transition: background .15s;
    }
    .history-toggle-btn:hover { background: #f8f9fa; }
    .history-panel-wrap {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        margin-top: 8px;
        overflow: hidden;
        display: none;
    }
    .h-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
    }
    .h-item:last-child { border-bottom: none; }
    .h-dot {
        width: 9px; height: 9px;
        border-radius: 50%;
        background: #007bff;
        margin-top: 4px;
        flex-shrink: 0;
    }
    .h-dot.old { background: #adb5bd; }
    .h-meta { flex: 1; min-width: 0; }
    .h-name { font-size: 13px; font-weight: 600; color: #212529; }
    .h-time { font-size: 11px; color: #6c757d; margin-top: 2px; }
    .h-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
    .btn-hrestore {
        font-size: 11px; padding: 3px 10px;
        border: 1px solid #28a745;
        border-radius: 5px;
        background: none; color: #28a745;
        cursor: pointer; white-space: nowrap;
    }
    .btn-hrestore:hover { background: #d4edda; }
    .btn-hdel {
        font-size: 11px; padding: 3px 10px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        background: none; color: #6c757d;
        cursor: pointer;
    }
    .btn-hdel:hover { background: #f8f9fa; }
    .h-detail { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; display: none; }
    .chevron-icon { transition: transform .2s; }
    .chevron-open { transform: rotate(180deg); }
</style>

<div class="content-wrapper">
    <section class="content">
        <div class="container-fluid">

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show mt-3">
                    <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                </div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show mt-3">
                    <i class="fas fa-exclamation-circle mr-1"></i> {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                </div>
            @endif

            <div class="row">
                <div class="col-12">
                    <div class="card card-box-shadow mt-3">

                        <div class="card-header">
                            <h3 class="card-title">Edit Product</h3>
                            <a href="{{ route('admin.product.list') }}">
                                <button class="btn btn-primary custom_btn_sm_back custom_btn btn-sm float-right">
                                    <i class="fas fa-arrow-circle-left"></i> Back
                                </button>
                            </a>
                        </div>

                        <div class="card-body">
                            <form action="{{ route('admin.product.update', $find_product->id) }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="row">

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Product Name:</label>
                                            <input type="text" class="form-control form__field" name="product_name"
                                                value="{{ $find_product->product_name ?: '' }}">
                                        </div>
                                        <small class="text-danger">@error('product_name'){{ $message }}@enderror</small>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Approximately Text:</label>
                                            <input type="text" class="form-control form__field" name="approximately"
                                                value="{{ $find_product->approximately ?: '' }}">
                                        </div>
                                        <small class="text-danger">@error('approximately'){{ $message }}@enderror</small>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="mainProductImageInput">Main Product Image:</label>
                                            <input type="file" class="form-control form__field visually-hidden"
                                                name="product_image" id="mainProductImageInput" accept="image/*">
                                            <label for="mainProductImageInput"
                                                class="file-input-label form__field form-control">
                                                <i class="fas fa-camera"></i> Choose file
                                            </label>
                                            <small class='text-danger'>@error('product_image'){{ $message }}@enderror</small>
                                        </div>
                                        <img id="mainProductImagePreview"
                                            src="{{ $find_product->productImage('product_image') ?: '' }}"
                                            alt="Preview" style="width:300px;height:200px;margin-top:10px;" class="card shadow">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="mainProductVideoInput">Main Product Video (Optional):</label>
                                            <input type="file" class="form-control form__field visually-hidden"
                                                name="product_video" id="mainProductVideoInput" accept="video/*">
                                            <label for="mainProductVideoInput"
                                                class="file-input-label form__field form-control">
                                                <i class="fas fa-video"></i> Choose file
                                            </label>
                                            <small class='text-danger'>@error('product_video'){{ $message }}@enderror</small>
                                        </div>

                                        @php $videoUrl = $find_product->productVideo('product_video'); @endphp
                                        <input type="hidden" name="remove_video" id="removeVideoInput" value="0">

                                        <video id="mainProductVideoPreview" controls
                                            style="width: 250px; height: 200px; margin-top: 10px; {{ $videoUrl ? '' : 'display:none;' }}"
                                            class="card shadow">
                                            <source src="{{ $videoUrl ?? '' }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>

                                        <div id="noVideoPlaceholder" class="card shadow d-flex align-items-center justify-content-center"
                                            style="width: 250px; height: 200px; margin-top: 10px; background: #f8f9fa; {{ $videoUrl ? 'display:none;' : '' }}">
                                            <i class="fas fa-video-slash fa-3x text-muted"></i>
                                            <p class="text-muted mt-2">No video uploaded</p>
                                        </div>

                                        @if($videoUrl)
                                            <button type="button" id="deleteVideoBtn" class="btn btn-danger btn-sm mt-2"
                                                onclick="if(confirm('Are you sure you want to delete this video?')) {
                                                    document.getElementById('removeVideoInput').value = '1';
                                                    document.getElementById('mainProductVideoPreview').style.display = 'none';
                                                    document.getElementById('noVideoPlaceholder').style.display = 'flex';
                                                    this.style.display = 'none';
                                                }">
                                                <i class="fas fa-trash mr-1"></i> Delete Video
                                            </button>
                                        @endif

                                        <div class="form-check mt-2">
                                            <input class="form-check-input" type="checkbox" name="show_video" id="showVideoCheck" value="1"
                                                {{ $find_product->show_video ? 'checked' : '' }}>
                                            <label class="form-check-label" for="showVideoCheck">
                                                Show video preview on frontend
                                            </label>
                                        </div>
                                    </div>

                                    {{-- Image Alt --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Image Alt Tag</label>
                                            <input type="text" class="form-control form__field" name="image_alt"
                                                placeholder="Enter Image Alt Tag"
                                                value="{{ old('image_alt', $find_product->image_alt) }}">
                                        </div>
                                        <small class="text-danger">@error('image_alt'){{ $message }}@enderror</small>
                                    </div>

                                    {{-- ── Maze Buy ── --}}
                                    <div class="col-md-12 mt-4">
                                        <div class="card card-box-shadow">
                                            <h5 class="card-header bg-dark text-white">Maze Buy</h5>
                                            <div class="card-body">
                                                <div class="row mazeBuy ml-2">
                                                    @forelse ($find_product->prices as $item)
                                                        @if ($item->type == 'BUY')
                                                            <input type="hidden" name="type[]" value="BUY">
                                                            <input type="hidden" name="days[]" value="null">
                                                            <div class="col-6">
                                                                <div class="form-group">
                                                                    <label>Maze Buy Price:</label>
                                                                    <input type="number" class="form-control form__field"
                                                                        name="price[]" value="{{ $item->price }}"
                                                                        oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                                                                </div>
                                                            </div>
                                                            <div class="col-6">
                                                                <div class="form-group">
                                                                    <label>Short Description</label>
                                                                    <textarea name="price_description[]" rows="4"
                                                                        class="form-control form__field"
                                                                        id="summernote1">{!! $item->description !!}</textarea>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @empty
                                                        <input type="hidden" name="type[]" value="BUY">
                                                        <input type="hidden" name="days[]" value="null">
                                                        <div class="col-6">
                                                            <div class="form-group">
                                                                <label>Maze Buy Price:</label>
                                                                <input type="number" class="form-control form__field"
                                                                    name="price[]" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="form-group">
                                                                <label>Short Description</label>
                                                                <textarea name="price_description[]" rows="4"
                                                                    class="form-control form__field" id="summernote1"></textarea>
                                                            </div>
                                                        </div>
                                                    @endforelse
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12 mt-4">
                                        <div class="card card-box-shadow">
                                            <h5 class="card-header bg-dark text-white">
                                                Maze Rent
                                                <button type="button"
                                                    class="btn btn-sm btn-outline-light float-right addMazeRent">
                                                    <i class="la la-fw la-plus"></i> Add More Maze Rent
                                                </button>
                                            </h5>
                                            <div class="card-body">
                                                <div class="row mazeRent ml-2">
                                                    @forelse ($find_product->prices as $buy)
                                                        @if ($buy->type == 'RENT')
                                                            <div class="row mazeRentRow" style="width:100%">
                                                                <input type="hidden" name="type[]" value="RENT">
                                                                <div class="col-3">
                                                                    <div class="form-group">
                                                                        <label>Maze Rent Days:</label>
                                                                        <input type="text" class="form-control form__field"
                                                                            name="days[]" value="{{ $buy->days }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-3">
                                                                    <div class="form-group">
                                                                        <label>Maze Rent Price:</label>
                                                                        <input type="number" class="form-control form__field"
                                                                            name="price[]" value="{{ $buy->price }}"
                                                                            oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                                                                    </div>
                                                                </div>
                                                                <div class="col-5">
                                                                    <div class="form-group">
                                                                        <label>Maze Rent Description:</label>
                                                                        <textarea name="price_description[]" rows="4"
                                                                            class="form-control form__field summernote2">{!! $buy->description !!}</textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="col-1 mt-4">
                                                                    <button type="button" class="btn btn-danger btn-sm removeRow">
                                                                        <i class="fas fa-trash"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @empty
                                                        <p class="text-muted ml-2">No rent data found</p>
                                                    @endforelse
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 mt-4 text-center">
                                        <div class="form-group d-flex align-items-center justify-content-center">
                                            <input type="checkbox" data-toggle="toggle"
                                                data-on="Approve" data-off="Not Approve"
                                                data-onstyle="success" data-offstyle="danger"
                                                name="status"
                                                {{ $find_product->status === 1 ? 'checked' : '' }}>
                                            <button id="submit_btn" class="btn btn-primary custom_btn ml-3">
                                                <i class="fa-solid fa-cloud-arrow-up"></i> Submit
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </form>

                            <div class="row mt-2">
                                <div class="col-12">

                                    <button class="history-toggle-btn" id="historyToggleBtn" type="button">
                                        <span class="d-flex align-items-center" style="gap:8px;">
                                            <i class="fas fa-history text-secondary"></i>
                                            Version History
                                            <span class="badge badge-secondary" style="font-size:11px;">
                                                {{ $histories->count() }} versions
                                            </span>
                                        </span>
                                        <i class="fas fa-chevron-down chevron-icon" id="historyChevron"></i>
                                    </button>

                                    <div class="history-panel-wrap" id="historyPanelWrap">
                                        @forelse($histories as $index => $history)
                                            <div class="h-item">
                                                <div class="h-dot {{ $index > 0 ? 'old' : '' }}"></div>
                                                <div class="h-meta">
                                                    <div class="h-name">{{ $history->product_name }}</div>
                                                    <div class="h-time">
                                                        <i class="fas fa-clock mr-1"></i>
                                                        {{ $history->created_at->format('d M Y, h:i A') }}
                                                        &nbsp;·&nbsp;
                                                        <i class="fas fa-user mr-1"></i>
                                                        {{ $history->savedBy->name ?? 'System' }}
                                                    </div>
                                                    <div class="d-flex flex-wrap mt-1" style="gap:4px;">
                                                        @if($history->is_for_buy)
                                                            <span class="badge badge-success" style="font-size:10px;">BUY</span>
                                                        @endif
                                                        @if($history->is_for_rent)
                                                            <span class="badge badge-warning text-dark" style="font-size:10px;">RENT</span>
                                                        @endif
                                                        <span class="badge {{ $history->status ? 'badge-success' : 'badge-danger' }}" style="font-size:10px;">
                                                            {{ $history->status ? 'Active' : 'Inactive' }}
                                                        </span>
                                                        @if($history->approximately)
                                                            <span class="badge badge-light text-dark" style="font-size:10px;border:1px solid #dee2e6;">
                                                                {{ $history->approximately }}
                                                            </span>
                                                        @endif
                                                    </div>

                                                    <button type="button" class="btn btn-link p-0 mt-1 togglePriceDetail"
                                                        style="font-size:11px;color:#007bff;">
                                                        <i class="fas fa-caret-right mr-1 detail-caret"></i>View details
                                                    </button>
                                                    <div class="h-detail">

                                                        {{-- Image Alt Tag --}}
                                                        @if($history->image_alt)
                                                            <div style="font-size:11px;margin-bottom:6px;">
                                                                <span class="text-muted">Image Alt Tag:</span>
                                                                <strong>{{ $history->image_alt }}</strong>
                                                            </div>
                                                        @endif

                                                        {{-- Prices table with description --}}
                                                        @if(!empty($history->prices))
                                                            <table class="table table-sm table-bordered mb-0" style="font-size:11px;">
                                                                <thead class="thead-light">
                                                                    <tr>
                                                                        <th>Type</th>
                                                                        <th>Price</th>
                                                                        <th>Days</th>
                                                                        <th>Description</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach($history->prices as $hp)
                                                                        <tr>
                                                                            <td>
                                                                                <span class="badge {{ $hp['type'] == 'BUY' ? 'badge-success' : 'badge-warning text-dark' }}" style="font-size:10px;">
                                                                                    {{ $hp['type'] }}
                                                                                </span>
                                                                            </td>
                                                                            <td>{{ $hp['price'] }}</td>
                                                                            <td>{{ $hp['days'] ?: '—' }}</td>
                                                                            <td style="max-width:160px;">
                                                                                @if(!empty($hp['description']))
                                                                                    <div style="max-height:50px;overflow:hidden;color:#495057;">
                                                                                        {!! strip_tags($hp['description']) !!}
                                                                                    </div>
                                                                                @else
                                                                                    <span class="text-muted">—</span>
                                                                                @endif
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        @endif

                                                    </div>
                                                </div>

                                                <div class="h-actions">
                                                    <a href="{{ route('admin.product.restore', $history->id) }}"
                                                        class="btn-hrestore restoreBtn">
                                                        <i class="fas fa-undo mr-1"></i>Restore
                                                    </a>
                                                    <button type="button" class="btn-hdel deleteHistoryBtn"
                                                        data-id="{{ $history->id }}">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @empty
                                            <div class="text-center py-4 text-muted">
                                                <i class="fas fa-history fa-2x d-block mb-2"></i>
                                                <span style="font-size:13px;">No history yet. History saves on every update.</span>
                                            </div>
                                        @endforelse
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
</div>
@endsection

@section('script')
<script>
    $('#summernote1').summernote({ placeholder: 'Enter Description', tabsize: 2, height: 100 });
    $('.summernote2').summernote({ placeholder: 'Enter Description', tabsize: 2, height: 100 });

    function showImagePreview(input, previewId) {
        const preview = document.getElementById(previewId);
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = e => { preview.src = e.target.result; };
            reader.readAsDataURL(input.files[0]);
        }
    }
    document.getElementById('mainProductImageInput').addEventListener('change', function () {
        showImagePreview(this, 'mainProductImagePreview');
    });

    $('#historyToggleBtn').on('click', function () {
        var panel = $('#historyPanelWrap');
        var chevron = $('#historyChevron');
        panel.slideToggle(200);
        chevron.toggleClass('chevron-open');
    });

    $(document).on('click', '.togglePriceDetail', function () {
        var detail = $(this).next('.h-detail');
        var caret  = $(this).find('.detail-caret');
        var isOpen = detail.is(':visible');
        detail.slideToggle(150);
        caret.css('transform', isOpen ? 'rotate(0deg)' : 'rotate(90deg)');
        $(this).html(
            '<i class="fas fa-caret-' + (isOpen ? 'right' : 'down') + ' mr-1 detail-caret" style="transition:transform .15s"></i>' +
            (isOpen ? 'View prices' : 'Hide prices')
        );
    });

    $('.addMazeRent').on('click', function () {
        var randomId = Math.floor(Math.random() * 10000);
        var html = `
            <div class="row mazeRentRow" style="width:100%;">
                <input type="hidden" name="type[]" value="RENT">
                <div class="col-3">
                    <div class="form-group">
                        <label>Maze Rent Days:</label>
                        <input type="text" class="form-control form__field" name="days[]">
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        <label>Maze Rent Price:</label>
                        <input type="number" oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                            class="form-control form__field" name="price[]">
                    </div>
                </div>
                <div class="col-5">
                    <div class="form-group">
                        <label>Maze Rent Description:</label>
                        <textarea name="price_description[]" rows="4"
                            class="form-control form__field newSN_${randomId}"></textarea>
                    </div>
                </div>
                <div class="col-1 mt-4">
                    <button type="button" class="btn btn-danger btn-sm removeRow">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>`;
        $('.mazeRent').append(html);
        $('.newSN_' + randomId).summernote({ placeholder: 'Enter Description', tabsize: 2, height: 100 });
    });

    $(document).on('click', '.removeRow', function () {
        $(this).closest('.mazeRentRow').remove();
    });

    $(document).on('click', '.restoreBtn', function (e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if (confirm('Confirm restore? Current data will be saved as a new history entry before restoring.')) {
            window.location.href = url;
        }
    });

    $(document).on('click', '.deleteHistoryBtn', function () {
        var id   = $(this).data('id');
        var item = $(this).closest('.h-item');
        if (confirm('Delete this history entry permanently?')) {
            $.ajax({
                url: '{{ route("admin.product.history.delete") }}',
                type: 'DELETE',
                data: { id: id, _token: '{{ csrf_token() }}' },
                success: function () {
                    item.fadeOut(250, function () { $(this).remove(); });
                },
                error: function () {
                    alert('Something went wrong. Please try again.');
                }
            });
        }
    });
</script>
@endsection