@extends('layouts.app')
@section('title', 'Dropdown Configuration')
@section('page-title', 'Dropdown Configuration')

@section('content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h5 class="mb-1" style="font-weight:700; font-size:17px;">Dropdown Options</h5>
        <p class="mb-0" style="color:var(--lp-muted); font-size:13px;">Configure all CRM dropdown menus and values</p>
    </div>
</div>

{{-- Type Tabs --}}
<div class="d-flex gap-2 mb-4">
    @foreach($types as $t)
    <a href="{{ route('settings.dropdowns.index', $t) }}"
       class="btn {{ $t === $type ? 'btn-primary' : 'btn-outline-secondary' }}"
       style="border-radius:9px; font-size:13px; font-weight:500;">
        {{ $typeLabels[$t] }}
    </a>
    @endforeach
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="lp-card">
            <div class="lp-card-header">
                <span><i class="bi bi-list-ul me-2 text-primary"></i>{{ $typeLabels[$type] }}</span>
                <span class="lp-badge bg-primary bg-opacity-10 text-primary">{{ $options->count() }}</span>
            </div>
            @if($options->isNotEmpty())
            <div class="table-responsive">
                <table class="lp-table">
                    <thead>
                        <tr>
                            <th>Label</th>
                            <th>Value (slug)</th>
                            <th>Badge Color</th>
                            <th>Status</th>
                            <th>System</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($options as $opt)
                        <tr>
                            <td>
                                <span class="lp-badge bg-{{ $opt->color ?? 'secondary' }} bg-opacity-15 text-{{ $opt->color ?? 'secondary' }}">
                                    {{ $opt->label }}
                                </span>
                            </td>
                            <td><span class="font-mono" style="font-size:12px; color:var(--lp-muted);">{{ $opt->value }}</span></td>
                            <td>
                                <select class="form-select form-select-sm update-option-color" data-opt="{{ $opt->id }}" style="width:130px; border-radius:7px; font-size:12px;">
                                    @foreach(['primary','success','danger','warning','info','secondary'] as $c)
                                    <option value="{{ $c }}" {{ $opt->color === $c ? 'selected':'' }}>{{ ucfirst($c) }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                @if($opt->is_active)
                                <span class="lp-badge bg-success bg-opacity-10 text-success" style="font-size:11px;">Active</span>
                                @else
                                <span class="lp-badge bg-secondary bg-opacity-10 text-secondary" style="font-size:11px;">Hidden</span>
                                @endif
                            </td>
                            <td>
                                @if($opt->is_system)
                                <span class="lp-badge bg-warning bg-opacity-10 text-warning" style="font-size:11px;"><i class="bi bi-lock"></i></span>
                                @else
                                <span style="color:var(--lp-muted); font-size:12px;">—</span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-primary edit-option-btn" style="border-radius:7px;"
                                            data-opt="{{ json_encode($opt) }}">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    @if(!$opt->is_system)
                                    <form method="POST" action="{{ route('settings.dropdowns.destroy', $opt) }}">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger" style="border-radius:7px;"
                                                data-confirm="Delete option '{{ $opt->label }}'?">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="empty-state"><i class="bi bi-list-ul"></i><p>No options defined yet.</p></div>
            @endif
        </div>
    </div>

    <div class="col-lg-4">
        {{-- Add new option --}}
        <div class="lp-card">
            <div class="lp-card-header"><span><i class="bi bi-plus-circle me-2 text-primary"></i>Add New Option</span></div>
            <div class="lp-card-body">
                <form method="POST" action="{{ route('settings.dropdowns.store') }}">
                    @csrf
                    <input type="hidden" name="type" value="{{ $type }}">
                    <div class="mb-3">
                        <label class="form-label">Label <span class="text-danger">*</span></label>
                        <input type="text" name="label" class="form-control" placeholder="e.g. LinkedIn" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Badge Color</label>
                        <select name="color" class="form-select">
                            @foreach(['primary','success','danger','warning','info','secondary'] as $c)
                            <option value="{{ $c }}">{{ ucfirst($c) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn-primary-lp w-100 justify-content-center">
                        <i class="bi bi-plus"></i> Add Option
                    </button>
                </form>
            </div>
        </div>

        {{-- Color guide --}}
        <div class="lp-card mt-4">
            <div class="lp-card-header"><span>Badge Color Preview</span></div>
            <div class="lp-card-body">
                <div class="d-flex flex-wrap gap-2">
                    @foreach(['primary'=>'Blue','success'=>'Green','danger'=>'Red','warning'=>'Yellow','info'=>'Cyan','secondary'=>'Grey'] as $c => $name)
                    <span class="lp-badge bg-{{ $c }} bg-opacity-15 text-{{ $c }}">{{ $name }}</span>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Edit Modal --}}
<div class="modal fade" id="editOptModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="editOptForm" method="POST" class="modal-content" style="border-radius:16px;">
            @csrf @method('PUT')
            <div class="modal-header" style="border-bottom:1px solid var(--lp-border);">
                <h6 class="modal-title" style="font-weight:700;">Edit Option</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Label</label>
                    <input type="text" name="label" id="editOptLabel" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Color</label>
                    <select name="color" id="editOptColor" class="form-select">
                        @foreach(['primary','success','danger','warning','info','secondary'] as $c)
                        <option value="{{ $c }}">{{ ucfirst($c) }}</option>
                        @endforeach
                    </select>
                </div>
                <label class="d-flex align-items-center gap-2" style="cursor:pointer;">
                    <input type="checkbox" name="is_active" value="1" id="editOptActive" style="accent-color:#3B6EFF;">
                    <span style="font-size:13.5px;">Option is active</span>
                </label>
            </div>
            <div class="modal-footer" style="border-top:1px solid var(--lp-border);">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="border-radius:9px;">Cancel</button>
                <button type="submit" class="btn-primary-lp"><i class="bi bi-check-lg me-1"></i>Save</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).on('click', '.edit-option-btn', function() {
    const o = $(this).data('opt');
    $('#editOptForm').attr('action', `/settings/dropdowns/${o.id}`);
    $('#editOptLabel').val(o.label);
    $('#editOptColor').val(o.color);
    $('#editOptActive').prop('checked', !!o.is_active);
    new bootstrap.Modal(document.getElementById('editOptModal')).show();
});

// Live color update
$(document).on('change', '.update-option-color', function() {
    const id = $(this).data('opt'), color = $(this).val();
    $.ajax({
        url: `/settings/dropdowns/${id}`,
        method: 'PUT',
        data: { _token: '{{ csrf_token() }}', label: '', color: color },
        success: () => showToast('Color updated')
    });
});
</script>
@endpush