@extends('layouts.app')
@section('title', 'Treatment Packages — Settings')

@section('content')
<section class="content-header">
    <h1><i class="fa fa-clipboard-list"></i> Treatment Packages
        <small>Multi-session course templates</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ route('clinic.settings.index') }}">Settings</a></li>
        <li class="active">Treatment Packages</li>
    </ol>
</section>

<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Packages</h3>
            <div class="box-tools">
                <button class="btn btn-primary btn-sm" id="pkg_add"><i class="fa fa-plus"></i> Add Package</button>
            </div>
        </div>
        <div class="box-body">
            <p class="text-muted" style="font-size:12px;">
                System templates (shared across all clinics) are read-only here; add your own to set custom sessions and pricing.
            </p>
            <table class="table table-striped" id="pkg_table" style="font-size:13px;">
                <thead><tr>
                    <th>Name</th><th style="width:90px;">Sessions</th><th style="width:110px;">Interval</th>
                    <th style="width:120px;">Price</th><th style="width:90px;">Status</th><th style="width:110px;">Actions</th>
                </tr></thead>
                <tbody><tr><td colspan="6" class="text-center text-muted">Loading…</td></tr></tbody>
            </table>
        </div>
    </div>
</section>

{{-- Add/edit modal --}}
<div class="modal fade" id="pkg_modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document"><div class="modal-content">
    <form id="pkg_form">
      <input type="hidden" name="id" id="pkg_id">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="pkg_modal_title">Add Package</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Name <span class="text-danger">*</span></label>
          <input type="text" name="name" id="pkg_name" class="form-control" maxlength="150" required>
        </div>
        <div class="row">
          <div class="col-xs-6 form-group">
            <label>Total sessions <span class="text-danger">*</span></label>
            <input type="number" name="total_sessions" id="pkg_sessions" class="form-control" min="1" max="60" value="6" required>
          </div>
          <div class="col-xs-6 form-group">
            <label>Interval (days)</label>
            <input type="number" name="interval_days" id="pkg_interval" class="form-control" min="0" max="365">
          </div>
        </div>
        <div class="row">
          <div class="col-xs-6 form-group">
            <label>Price</label>
            <input type="number" name="price" id="pkg_price" class="form-control" min="0" step="0.01">
          </div>
          <div class="col-xs-6 form-group" id="pkg_active_wrap" style="padding-top:25px;">
            <label><input type="checkbox" name="is_active" id="pkg_active" value="1" checked> Active</label>
          </div>
        </div>
        <div class="form-group">
          <label>Description</label>
          <input type="text" name="description" id="pkg_desc" class="form-control" maxlength="255">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
      </div>
    </form>
  </div></div>
</div>
@endsection

@section('javascript')
<script>
$(function () {
    var listUrl  = '{{ route('clinic.packages.list') }}';
    var storeUrl = '{{ route('clinic.packages.store') }}';
    var base     = '{{ url('clinic/treatment-packages') }}';
    var token    = '{{ csrf_token() }}';
    var rows     = [];

    function esc(s){ return $('<i>').text(s == null ? '' : s).html(); }
    function money(v){ return (v==null||v==='') ? '—' : Number(v).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}); }

    function load(){
        $.getJSON(listUrl).done(function(res){
            rows = res.data || [];
            var $b = $('#pkg_table tbody').empty();
            if (!rows.length){ $b.html('<tr><td colspan="6" class="text-center text-muted">No packages yet.</td></tr>'); return; }
            rows.forEach(function(p){
                var actions = p.is_system
                    ? '<span class="label label-default">System</span>'
                    : '<button class="btn btn-xs btn-warning pkg-edit" data-id="'+p.id+'"><i class="fa fa-edit"></i></button> '+
                      '<button class="btn btn-xs btn-danger pkg-del" data-id="'+p.id+'"><i class="fa fa-trash"></i></button>';
                $b.append('<tr>'+
                    '<td><strong>'+esc(p.name)+'</strong></td>'+
                    '<td>'+p.total_sessions+'×</td>'+
                    '<td>'+(p.interval_days ? p.interval_days+' days' : '—')+'</td>'+
                    '<td>'+money(p.price)+'</td>'+
                    '<td>'+(p.is_active ? '<span class="label label-success">Active</span>' : '<span class="label label-default">Inactive</span>')+'</td>'+
                    '<td>'+actions+'</td>'+
                '</tr>');
            });
        });
    }
    load();

    $('#pkg_add').on('click', function(){
        $('#pkg_form')[0].reset(); $('#pkg_id').val(''); $('#pkg_sessions').val(6); $('#pkg_active').prop('checked', true);
        $('#pkg_modal_title').text('Add Package'); $('#pkg_active_wrap').hide();
        $('#pkg_modal').modal('show');
    });
    $('#pkg_table').on('click', '.pkg-edit', function(){
        var id = $(this).data('id');
        var p = rows.find(function(x){ return x.id == id; });
        if(!p) return;
        $('#pkg_id').val(p.id); $('#pkg_name').val(p.name); $('#pkg_sessions').val(p.total_sessions);
        $('#pkg_interval').val(p.interval_days||''); $('#pkg_price').val(p.price||''); $('#pkg_active').prop('checked', !!p.is_active);
        $('#pkg_modal_title').text('Edit Package'); $('#pkg_active_wrap').show();
        $('#pkg_modal').modal('show');
    });
    $('#pkg_form').on('submit', function(e){
        e.preventDefault();
        var id = $('#pkg_id').val();
        var url = id ? base+'/'+id+'/update' : storeUrl;
        $.post(url, $(this).serialize()+'&_token='+token)
         .done(function(res){ $('#pkg_modal').modal('hide'); if(window.toastr) toastr.success(res.msg||'Saved'); load(); })
         .fail(function(x){ if(window.toastr) toastr.error((x.responseJSON&&x.responseJSON.message)||'Save failed'); });
    });
    $('#pkg_table').on('click', '.pkg-del', function(){
        if(!confirm('Delete this package?')) return;
        $.ajax({ url: base+'/'+$(this).data('id'), method:'DELETE', data:{ _token: token } })
         .done(function(){ if(window.toastr) toastr.success('Deleted'); load(); })
         .fail(function(){ if(window.toastr) toastr.error('Delete failed'); });
    });
});
</script>
@endsection
