@extends('layouts.master')

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

@section('main_content')
    <div class="container-fluid">
        <div class="row page-title">
            <div class="col-sm-6">
                <h3>Rates {{ isset($plan) ? 'for Plan: '.$plan->name : '' }}</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">Rates</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="container-fluid basic_table">
        <div class="row mb-3 align-items-end">
            <div class="col-xxl-2 col-sm-3">
                <label class="form-label">Provider</label>
                <select class="form-select" id="filter_provider">
                    <option value="">All</option>
                    @foreach($providers as $prov)
                        <option value="{{ $prov->id }}" {{ isset($plan) && $plan->provider_id == $prov->id ? 'selected' : '' }}>{{ $prov->display_name ?? $prov->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-xxl-3 col-sm-4">
                <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 }}" {{ isset($plan) && $plan->id == $p->id ? 'selected' : '' }}>{{ $p->name }} ({{ optional($p->provider)->display_name ?? optional($p->provider)->name }})</option>
                    @endforeach
                </select>
            </div>
            <div class="col-xxl-2 col-sm-3">
                <label class="form-label">Benefit Min</label>
                <input type="number" step="0.01" id="filter_benefit_min" class="form-control" placeholder="e.g. 10000">
            </div>
            <div class="col-xxl-2 col-sm-3">
                <label class="form-label">Benefit Max</label>
                <input type="number" step="0.01" id="filter_benefit_max" class="form-control" placeholder="e.g. 100000">
            </div>
            <div class="col-xxl-2 col-sm-3">
                <label class="form-label">Rate Min</label>
                <input type="number" step="0.0001" id="filter_rate_min" class="form-control" placeholder="e.g. 10">
            </div>
            <div class="col-xxl-2 col-sm-3">
                <label class="form-label">Rate Max</label>
                <input type="number" step="0.0001" id="filter_rate_max" class="form-control" placeholder="e.g. 100">
            </div>
            <div class="col-xxl-2 col-sm-3">
                <label class="form-label">Family Type</label>
                <select class="form-select" id="filter_family_type">
                    <option value="">All</option>
                    <option value="single">Single</option>
                    <option value="family">Family</option>
                </select>
            </div>
            <div class="col-xxl-2 col-sm-3">
                <label class="form-label">Status</label>
                <select class="form-select" id="filter_status">
                    <option value="">All</option>
                    <option value="1">Enabled</option>
                    <option value="0">Disabled</option>
                </select>
            </div>
            <div class="col-sm-12 mt-3">
                <a href="{{ isset($plan) ? route('admin.rate.createForPlan', $plan->id) : route('admin.rate.create') }}" class="btn btn-primary me-2">Add Rate</a>
                <a href="{{ route('admin.rate.importForm') }}" class="btn btn-outline-primary me-2">Import CSV</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>
<script src="{{ asset('assets/js/icons/feather-icon/feather.min.js') }}"></script>

{!! $dataTable->scripts() !!}
<script>
document.addEventListener('DOMContentLoaded', function(){
  function getTable(){
    return (window.LaravelDataTables && window.LaravelDataTables['rate-table']) ? window.LaravelDataTables['rate-table'] : null;
  }
  function reload(){
    const t = getTable();
    if (t && t.ajax) {
      t.ajax.reload();
    } else {
      // wait until Laravel DataTables initializes
      setTimeout(reload, 50);
    }
  }
  $('#filter_apply').on('click', function(e){ e.preventDefault(); reload(); });
  $('#filter_reset').on('click', function(e){ e.preventDefault();
    $('#filter_provider').val('');
    $('#filter_plan').val('');
    $('#filter_benefit_min').val('');
    $('#filter_benefit_max').val('');
    $('#filter_rate_min').val('');
    $('#filter_rate_max').val('');
    $('#filter_family_type').val('');
    $('#filter_status').val('');
    reload();
  });

  // Inline edit: plan_rate
  const tableContainer = document.querySelector('.table-responsive');
  tableContainer.addEventListener('change', async function(ev){
    const el = ev.target;
    if (!el.classList.contains('inline-edit-rate')) return;

    const url = el.dataset.url;
    const oldVal = el.dataset.old;
    const newVal = el.value;
    if (newVal === oldVal) return; // no change

    el.disabled = true;
    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    try {
      const res = await fetch(url, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': token
        },
        body: JSON.stringify({ plan_rate: newVal })
      });
      const data = await res.json();
      if (!res.ok || data.status !== 'ok') throw new Error(data.message || 'Update failed');
      el.dataset.old = String(data.plan_rate);
      el.classList.add('border-success');
      setTimeout(()=> el.classList.remove('border-success'), 1200);
    } catch (err) {
      alert('Could not update rate: ' + (err.message || 'Unknown error'));
      el.value = oldVal;
      el.classList.add('border-danger');
      setTimeout(()=> el.classList.remove('border-danger'), 1500);
    } finally {
      el.disabled = false;
    }
  });
});
</script>
@endsection