@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>Comparison Details</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 active">Comparison Details</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="container-fluid basic_table">
        <div class="row mb-3 align-items-end">
            <div class="col-sm-3">
                <label class="form-label">Plan</label>
                <select class="form-select" id="filter_plan">
                    <option value="">All</option>
                    @foreach($plans as $p)
                        <option value="{{ $p->id }}">{{ $p->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-3">
                <label class="form-label">Label</label>
                <select class="form-select" id="filter_label">
                    <option value="">All</option>
                    @foreach($labels as $l)
                        <option value="{{ $l->id }}">{{ $l->display_name ?? $l->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-2">
                <label class="form-label">Value Type</label>
                <select class="form-select" id="filter_value_type">
                    <option value="">All</option>
                    <option value="text">Text</option>
                    <option value="boolean">Boolean</option>
                    <option value="number">Number</option>
                    <option value="currency">Currency</option>
                    <option value="percentage">Percentage</option>
                </select>
            </div>
            <div class="col-sm-2">
                <label class="form-label">Highlighted</label>
                <select class="form-select" id="filter_highlight">
                    <option value="">All</option>
                    <option value="1">Yes</option>
                    <option value="0">No</option>
                </select>
            </div>
            <div class="col-sm-2 text-end">
                <a href="{{ route('admin.comparison_detail.create') }}" class="btn btn-primary me-2">Add Detail</a>
                <a href="{{ route('admin.comparison_detail.bulk') }}" class="btn btn-outline-primary me-2">Bulk Edit by Plan</a>
                <button class="btn btn-outline-primary me-2" id="filter_apply">Search</button>
                <button class="btn btn-outline-secondary" id="filter_reset">Reset</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-block row">
                        <div class="user-table">
                            <div class="table-responsive p-3">
                                {!! $dataTable->table() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="{{ asset('assets/js/datatables.min.js') }}"></script>
{!! $dataTable->scripts() !!}
<script>
document.addEventListener('DOMContentLoaded', function(){
  function getTable(){ return window.LaravelDataTables && window.LaravelDataTables['comparison-detail-table'] ? window.LaravelDataTables['comparison-detail-table'] : null; }
  function reload(){ const t=getTable(); if(t&&t.ajax){ t.ajax.reload(); } else { setTimeout(reload,50);} }
  document.getElementById('filter_apply').addEventListener('click', function(e){ e.preventDefault(); reload(); });
  document.getElementById('filter_reset').addEventListener('click', function(e){ e.preventDefault();
    document.getElementById('filter_plan').value='';
    document.getElementById('filter_label').value='';
    document.getElementById('filter_value_type').value='';
    document.getElementById('filter_highlight').value='';
    reload();
  });
});
</script>
@endsection