@extends('layouts.master')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/scrollbar.css') }}">
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="row page-title">
            <div class="col-sm-6"><h3>Bulk Edit: Plan Comparison</h3></div>
            <div class="col-sm-6">
                <nav>
                    <ol class="breadcrumb justify-content-sm-end align-items-center">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><svg class="svg-color"><use href="{{ asset('assets/svg/iconly-sprite.svg#Home') }}"></use></svg></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.comparison_detail.index') }}">Comparison Details</a></li>
                        <li class="breadcrumb-item active">Bulk Edit</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ route('admin.comparison_detail.bulk.save') }}">
                    @csrf

                    <div class="row g-3 align-items-end mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="planSelect">Plan<span> *</span></label>
                            <select class="form-select" id="planSelect" name="plan_id" required>
                                <option value="" disabled {{ !$planId ? 'selected' : '' }}>Select Plan</option>
                                @foreach ($plans as $p)
                                    <option value="{{ $p->id }}" {{ ($planId == $p->id) ? 'selected' : '' }}>
                                        {{ $p->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('plan_id') <span class="text-danger"><strong>{{ $message }}</strong></span> @enderror
                        </div>
                        <div class="col-md-6 text-end">
                            <button type="submit" class="btn btn-primary">Save All</button>
                            <a href="{{ route('admin.comparison_detail.index') }}" class="btn btn-outline-secondary">Back</a>
                        </div>
                    </div>

                    @if(!$planId)
                        <div class="alert alert-warning">Please select a plan to load labels.</div>
                    @else
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th style="width:35%">Label</th>
                                                <th>Value</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($labels as $l)
                                                @php($detail = $existing->get($l->id))
                                                <tr>
                                                    <td>
                                                        <div class="fw-semibold">{{ $l->display_name ?? $l->name }}</div>
                                                        <div class="text-muted small">Type: {{ ucfirst($l->label_type) }}</div>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="values[{{ $l->id }}]" value="{{ old('values.'.$l->id, $detail->value ?? '') }}" placeholder="Enter value">
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function(){
  const sel = document.getElementById('planSelect');
  sel.addEventListener('change', function(){
    const pid = sel.value;
    if (!pid) return;
    const url = new URL(window.location.href);
    url.searchParams.set('plan_id', pid);
    window.location.href = url.toString();
  });
});
</script>
@endsection