@extends('layouts.app')
@section('title', 'Configure Taxonomy Export - HBL Product Scraper')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h1 class="h3 mb-1">Configure Product CSV Export</h1>
        <div class="text-muted">Select the columns to export, then download CSV or save the selection as a preset.</div>
    </div>
    <div class="d-flex gap-2">
        <a class="btn btn-outline-secondary" href="{{ route('taxonomy.index', ['mapping' => $mappingFilter]) }}">Back to Taxonomy</a>
        <a class="btn btn-outline-primary" href="{{ route('products.index') }}">Products</a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

<div class="card mb-4">
    <div class="card-body">
        <div class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label fw-semibold">Export scope</label>
                <div class="form-control bg-light">{{ $scopeLabel }}</div>
            </div>
            <div class="col-md-4">
                <label for="preset-select" class="form-label fw-semibold">Saved preset</label>
                <select class="form-select" id="preset-select">
                    <option value="">Custom selection</option>
                    @foreach($presets as $preset)
                        <option value="{{ $preset->id }}" data-columns='@json($preset->columns)' @selected((int) request('preset_id') === $preset->id)>
                            {{ $preset->name }}
                        </option>
                    @endforeach
                </select>
                <div class="form-text">Selecting a preset updates the checked columns below.</div>
            </div>
            <div class="col-md-4">
                <label class="form-label fw-semibold">Column tools</label>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-primary" id="select-all-columns">Select all</button>
                    <button type="button" class="btn btn-outline-secondary" id="select-no-columns">Select none</button>
                </div>
            </div>
        </div>
    </div>
</div>

<form method="get" action="{{ route('taxonomy.products.export') }}" id="export-form">
    <input type="hidden" name="mapping" value="{{ $mappingFilter }}">
    @if($catalogCategory)
        <input type="hidden" name="catalog_category_id" value="{{ $catalogCategory->id }}">
    @endif
    @if($catalogSubcategory)
        <input type="hidden" name="catalog_subcategory_id" value="{{ $catalogSubcategory->id }}">
    @endif

    <div class="card mb-4">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <strong>Columns</strong>
            <span class="badge text-bg-secondary"><span id="selected-column-count">{{ count($selectedColumns) }}</span> selected</span>
        </div>
        <div class="card-body">
            <div class="row g-2">
                @foreach($columns as $key => $label)
                    <div class="col-md-6 col-xl-4">
                        <label class="border rounded p-2 d-flex gap-2 align-items-start h-100 bg-white">
                            <input class="form-check-input mt-1 export-column-checkbox" type="checkbox" name="columns[]" value="{{ $key }}" @checked(in_array($key, $selectedColumns, true))>
                            <span>
                                <span class="fw-semibold">{{ $label }}</span>
                                <span class="text-muted small d-block">{{ $key }}</span>
                            </span>
                        </label>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="card-footer bg-white d-flex flex-wrap gap-2 justify-content-between align-items-center">
            <div class="text-muted small">CSV will include only the selected columns, in the order shown above.</div>
            <button type="submit" class="btn btn-success">Download CSV</button>
        </div>
    </div>
</form>

<div class="card">
    <div class="card-header bg-white"><strong>Save current selection as preset</strong></div>
    <div class="card-body">
        <form method="post" action="{{ route('taxonomy.products.export.presets.store') }}" id="preset-form" class="row g-3 align-items-end">
            @csrf
            <input type="hidden" name="mapping" value="{{ $mappingFilter }}">
            @if($catalogCategory)
                <input type="hidden" name="catalog_category_id" value="{{ $catalogCategory->id }}">
            @endif
            @if($catalogSubcategory)
                <input type="hidden" name="catalog_subcategory_id" value="{{ $catalogSubcategory->id }}">
            @endif
            <div class="col-md-6">
                <label class="form-label fw-semibold" for="preset-name">Preset name</label>
                <input class="form-control" id="preset-name" name="name" value="{{ old('name') }}" placeholder="Example: Client full export">
                <div class="form-text">Saving with an existing name updates that preset.</div>
            </div>
            <div class="col-md-auto">
                <button type="submit" class="btn btn-primary">Save preset</button>
            </div>
            <div class="col-12 small text-danger d-none" id="preset-error"></div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
const columnCheckboxes = Array.from(document.querySelectorAll('.export-column-checkbox'));
const selectedColumnCount = document.getElementById('selected-column-count');
const presetSelect = document.getElementById('preset-select');
const presetForm = document.getElementById('preset-form');
const presetError = document.getElementById('preset-error');

function selectedColumns() {
    return columnCheckboxes.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
}

function updateSelectedCount() {
    selectedColumnCount.textContent = selectedColumns().length;
}

function applyColumns(columns) {
    const selected = new Set(columns || []);
    columnCheckboxes.forEach(checkbox => {
        checkbox.checked = selected.has(checkbox.value);
    });
    updateSelectedCount();
}

document.getElementById('select-all-columns')?.addEventListener('click', () => {
    columnCheckboxes.forEach(checkbox => checkbox.checked = true);
    presetSelect.value = '';
    updateSelectedCount();
});

document.getElementById('select-no-columns')?.addEventListener('click', () => {
    columnCheckboxes.forEach(checkbox => checkbox.checked = false);
    presetSelect.value = '';
    updateSelectedCount();
});

columnCheckboxes.forEach(checkbox => checkbox.addEventListener('change', () => {
    presetSelect.value = '';
    updateSelectedCount();
}));

presetSelect?.addEventListener('change', () => {
    const selectedOption = presetSelect.selectedOptions[0];
    const columns = selectedOption?.dataset.columns ? JSON.parse(selectedOption.dataset.columns) : null;

    if (columns) {
        applyColumns(columns);
    }
});

presetForm?.addEventListener('submit', event => {
    presetForm.querySelectorAll('[data-preset-column-input]').forEach(input => input.remove());
    presetError.classList.add('d-none');
    presetError.textContent = '';

    const columns = selectedColumns();
    const name = document.getElementById('preset-name')?.value.trim();

    if (! name) {
        event.preventDefault();
        presetError.textContent = 'Enter a preset name first.';
        presetError.classList.remove('d-none');
        return;
    }

    if (! columns.length) {
        event.preventDefault();
        presetError.textContent = 'Select at least one column before saving a preset.';
        presetError.classList.remove('d-none');
        return;
    }

    columns.forEach(column => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'columns[]';
        input.value = column;
        input.dataset.presetColumnInput = '1';
        presetForm.appendChild(input);
    });
});

updateSelectedCount();
</script>
@endpush