@extends('adminlte::page')

@section('content')
    <!-- Case Info: primary summary visible at the top -->
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <strong>Case Info</strong>
                <small class="text-muted ml-2">#{{ $case->case_number }}</small>
            </div>
            <div class="card-tools">
                @can('update', $case)
                    <a href="{{ route('cases.edit', $case) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i> Edit Case</a>
                @endcan
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <dl class="row mb-0">
                        <dt class="col-sm-4">Title</dt>
                        <dd class="col-sm-8">{{ $case->title }}</dd>

                        <dt class="col-sm-4">Client</dt>
                        <dd class="col-sm-8">
                            @if($case->client)
                                <a href="{{ route('clients.show', $case->client) }}">{{ $case->client->display_name ?? ($case->client->company_name ?: trim($case->client->first_name.' '.$case->client->last_name)) }}</a>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </dd>

                        <dt class="col-sm-4">Primary Lawyer</dt>
                        <dd class="col-sm-8">{{ optional($case->primaryLawyer)->name ?? '—' }}</dd>

                        <dt class="col-sm-4">Type</dt>
                        <dd class="col-sm-8 text-capitalize">{{ $case->case_type }}</dd>
                    </dl>
                </div>
                <div class="col-md-6">
                    <dl class="row mb-0">
                        <dt class="col-sm-4">Status</dt>
                        <dd class="col-sm-8">
                            @php($statusClass = [
                                'intake' => 'badge-secondary',
                                'active' => 'badge-success',
                                'pending' => 'badge-warning',
                                'closed' => 'badge-dark',
                                'archived' => 'badge-light',
                            ][$case->status] ?? 'badge-secondary')
                            <span class="badge {{ $statusClass }} text-uppercase">{{ $case->status }}</span>
                        </dd>

                        <dt class="col-sm-4">Priority</dt>
                        <dd class="col-sm-8">
                            @php($prioClass = [
                                'low' => 'badge-light',
                                'medium' => 'badge-info',
                                'high' => 'badge-warning',
                                'urgent' => 'badge-danger',
                            ][$case->priority] ?? 'badge-light')
                            <span class="badge {{ $prioClass }} text-uppercase">{{ $case->priority }}</span>
                        </dd>

                        <dt class="col-sm-4">Opened</dt>
                        <dd class="col-sm-8">{{ optional($case->date_opened)->format('Y-m-d') ?? '—' }}</dd>

                        <dt class="col-sm-4">Closed</dt>
                        <dd class="col-sm-8">{{ optional($case->date_closed)->format('Y-m-d') ?? '—' }}</dd>
                    </dl>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-6">
                    <dl class="row mb-0">
                        <dt class="col-sm-4">Est. Value</dt>
                        <dd class="col-sm-8">{{ $case->estimated_value !== null ? 'Rp '.number_format($case->estimated_value,0,',','.') : '—' }}</dd>
                    </dl>
                </div>
                <div class="col-md-6">
                    <dl class="row mb-0">
                        <dt class="col-sm-4">Description</dt>
                        <dd class="col-sm-8">{{ $case->description ? Str::limit($case->description, 140) : '—' }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <!-- Communications -->
            <div class="card comm-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-comments mr-2 text-muted"></i>
                        <span>Communications</span>
                        <span class="badge badge-light border ml-2">{{ $case->communications->count() }}</span>
                        @php($unreadCount = $case->communications->where('is_read', false)->count())
                        @if($unreadCount > 0)
                            <span class="badge badge-warning ml-1" title="Unread">{{ $unreadCount }} unread</span>
                        @endif
                    </div>
                    <div class="card-tools d-flex align-items-center">
                        <div class="dropdown mr-2">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="commFilterBtn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-filter"></i> Filter
                            </button>
                            <div class="dropdown-menu dropdown-menu-right p-3" style="min-width: 260px;">
                                <div class="form-group mb-2">
                                    <label class="mb-1">Type</label>
                                    <select id="comm-filter-type" class="form-control form-control-sm">
                                        <option value="">All</option>
                                        <option value="email">Email</option>
                                        <option value="phone">Phone</option>
                                        <option value="meeting">Meeting</option>
                                        <option value="note">Note</option>
                                        <option value="letter">Letter</option>
                                        <option value="message">Message</option>
                                        <option value="whatsapp">WhatsApp</option>
                                    </select>
                                </div>
                                <div class="custom-control custom-checkbox mb-2">
                                    <input type="checkbox" class="custom-control-input" id="comm-filter-unread" value="1">
                                    <label class="custom-control-label" for="comm-filter-unread">Unread only</label>
                                </div>
                                <div class="d-flex">
                                    <button type="button" id="comm-apply-filter" class="btn btn-sm btn-primary mr-2 flex-fill">Apply</button>
                                    <button type="button" id="comm-clear-filter" class="btn btn-sm btn-light flex-fill">Clear</button>
                                </div>
                            </div>
                        </div>
                        @can('manage communications')
                            <button id="btnQuickCommunication" type="button" class="btn btn-sm btn-primary mr-1">
                                <i class="fas fa-pen"></i> Quick
                            </button>
                            <a href="{{ route('communications.create', ['case_id' => $case->id]) }}" class="btn btn-sm btn-outline-primary mr-1">
                                <i class="fas fa-plus"></i> New
                            </a>
                        @endcan
                        <a href="{{ route('communications.index', ['case_id' => $case->id]) }}" class="btn btn-sm btn-outline-secondary">
                            View All
                        </a>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-nowrap">Date</th>
                                    <th>Type</th>
                                    <th>Subject</th>
                                    <th>By</th>
                                    <th class="text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="communications-rows">
                                @include('cases.partials.rows.communications', ['case' => $case])
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @include('partials.datatables')

            <!-- Left Column: Activity, Tasks, Court Dates, Documents -->
            <div class="card">
                <div class="card-header">
                    <span>Activity</span>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        @forelse($activities as $act)
                            <li class="mb-2">
                                <small class="text-muted">{{ $act->created_at->format('Y-m-d H:i') }}</small>
                                — {{ ucfirst($act->description) }}
                                @if($act->causer)
                                    by <strong>{{ $act->causer->name }}</strong>
                                @endif
                            </li>
                        @empty
                            <li class="text-muted">No recent activity</li>
                        @endforelse
                    </ul>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Tasks</span>
                    <div class="card-tools">
                        @can('create', App\Models\Task::class)
                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalQuickTask"><i class="fas fa-plus"></i> Add Task</button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-striped table-hover table-bordered align-middle">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Assignee</th>
                                <th>Due</th>
                                <th>Status</th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="tasks-rows">
                            @include('cases.partials.rows.tasks', ['case' => $case])
                        </tbody>
                    </table>
                    @include('partials.datatables')
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Court Dates</span>
                    <div class="card-tools">
                        @can('manage cases')
                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalQuickCourtDate"><i class="fas fa-plus"></i> Add Court Date</button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-striped table-hover table-bordered align-middle">
                        <thead>
                            <tr>
                                <th>When</th>
                                <th>Court</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="court-dates-rows">
                            @include('cases.partials.rows.court_dates', ['case' => $case])
                        </tbody>
                    </table>
                    @include('partials.datatables')
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Documents</span>
                    <div class="card-tools">
                        @can('create', App\Models\Document::class)
                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalQuickDocument"><i class="fas fa-upload"></i> Upload</button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-striped table-hover table-bordered align-middle">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Size</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="documents-rows">
                            @include('cases.partials.rows.documents', ['case' => $case])
                        </tbody>
                    </table>
                    @include('partials.datatables')
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <!-- Right Column: Time Entry, Expenses, Invoices, Profitability -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Billing Snapshot</span>
                    <div class="card-tools">
                        @can('create', App\Models\TimeEntry::class)
                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalQuickTimeEntry"><i class="fas fa-plus"></i> Add Time Entry</button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-striped table-hover table-bordered align-middle">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>User</th>
                                <th>Hours</th>
                                <th>Billable</th>
                            </tr>
                        </thead>
                        <tbody id="time-entries-rows">
                            @include('cases.partials.rows.time_entries', ['case' => $case])
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="2" class="text-right">Total</th>
                                <th id="time-total-cell">0.00</th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                    @include('partials.datatables')
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Expenses</span>
                    <div class="card-tools">
                        @can('manage cases')
                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalQuickExpense"><i class="fas fa-plus"></i> Add Expense</button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-striped table-hover table-bordered align-middle">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Category</th>
                                <th>Description</th>
                                <th class="text-right">Amount</th>
                                <th>Billable</th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="expenses-rows">
                            @include('cases.partials.rows.expenses', ['case' => $case])
                        </tbody>
                        <tfoot>
                            @php($expTotal = $case->expenses->sum('amount'))
                            <tr>
                                <th colspan="3" class="text-right">Total</th>
                                <th class="text-right">Rp {{ number_format($expTotal, 0, ',', '.') }}</th>
                                <th colspan="2"></th>
                            </tr>
                        </tfoot>
                    </table>
                    @include('partials.datatables')
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Invoices</span>
                    <div class="card-tools">
                        @can('manage invoices')
                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalQuickInvoice"><i class="fas fa-plus"></i> New Invoice</button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-striped table-hover table-bordered align-middle">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Date</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="invoices-rows">
                            @include('cases.partials.rows.invoices', ['case' => $case])
                        </tbody>
                    </table>
                    @include('partials.datatables')
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <span>Profitability</span>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-5">Invoiced</dt>
                        <dd class="col-sm-7">Rp {{ number_format($case->invoices->sum('total_amount'), 0, ',', '.') }}</dd>
                        <dt class="col-sm-5">Expenses</dt>
                        <dd class="col-sm-7">Rp {{ number_format($case->expenses->sum('amount'), 0, ',', '.') }}</dd>
                        <dt class="col-sm-5">Net</dt>
                        <dd class="col-sm-7"><strong>Rp {{ number_format($case->invoices->sum('total_amount') - $case->expenses->sum('amount'), 0, ',', '.') }}</strong></dd>
                    </dl>
                    <small class="text-muted">Note: Net = Invoiced total minus direct expenses. Future enhancement: include collected payments and non-billable time.</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Add Modals --}}
    @can('manage communications')
    <div class="modal fade" id="modalQuickCommunication" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick Compose Communication</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <form method="POST" action="{{ route('communications.store') }}" class="js-ajax-form" data-refresh="communications">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="case_id" value="{{ $case->id }}">
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label>Type</label>
                                <select name="communication_type" class="form-control" required>
                                    <option value="note">Note</option>
                                    <option value="phone">Phone</option>
                                    <option value="message">Message</option>
                                    <option value="whatsapp">WhatsApp</option>
                                    <option value="email">Email</option>
                                    <option value="meeting">Meeting</option>
                                    <option value="letter">Letter</option>
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Direction</label>
                                <select name="direction" class="form-control" required>
                                    <option value="internal">Internal</option>
                                    <option value="outbound">Outbound</option>
                                    <option value="inbound">Inbound</option>
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Priority</label>
                                <select name="priority" class="form-control" required>
                                    <option value="low">Low</option>
                                    <option value="medium" selected>Medium</option>
                                    <option value="high">High</option>
                                    <option value="urgent">Urgent</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Subject</label>
                            <input type="text" name="subject" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Content</label>
                            <textarea name="content" class="form-control" rows="4" required></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>WhatsApp To (phone)</label>
                                <input type="text" name="to_phone" class="form-control" placeholder="Required for WhatsApp outbound">
                            </div>
                            <div class="form-group col-md-6">
                                <label>WA Media URL (optional)</label>
                                <input type="url" name="wa_media_url" class="form-control" placeholder="https://...">
                            </div>
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="wa_send_now" name="wa_send_now" value="1">
                            <label for="wa_send_now" class="form-check-label">Send WhatsApp now (if type is WhatsApp + Outbound)</label>
                        </div>
                        <small class="text-muted d-block">Tip: For internal notes, choose Type "Note" and Direction "Internal".</small>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan
    @can('create', App\Models\Task::class)
    <div class="modal fade" id="modalQuickTask" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick Add Task</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <form method="POST" action="{{ route('tasks.store') }}" class="js-ajax-form" data-refresh="tasks">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="case_id" value="{{ $case->id }}">
                        <div class="form-row">
                            <div class="form-group col-md-8">
                                <label>Title</label>
                                <input type="text" name="title" class="form-control" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Assignee</label>
                                <select name="assigned_to" class="form-control" required>
                                    @foreach($users as $u)
                                        <option value="{{ $u->id }}">{{ $u->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label>Status</label>
                                <select name="status" class="form-control" required>
                                    @foreach(['pending','in_progress','completed','cancelled'] as $opt)
                                        <option value="{{ $opt }}">{{ ucfirst(str_replace('_',' ',$opt)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Priority</label>
                                <select name="priority" class="form-control" required>
                                    @foreach(['low','medium','high','urgent'] as $opt)
                                        <option value="{{ $opt }}">{{ ucfirst($opt) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Due Date</label>
                                <input type="date" name="due_date" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea name="description" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Task</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan

    @can('create', App\Models\Document::class)
    <div class="modal fade" id="modalQuickDocument" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick Upload Document</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <form method="POST" action="{{ route('documents.store') }}" enctype="multipart/form-data" class="js-ajax-form" data-refresh="documents">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="case_id" value="{{ $case->id }}">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Type</label>
                                <select name="document_type" class="form-control" required>
                                    @foreach(['contract','evidence','correspondence','court_filing','invoice','other'] as $opt)
                                        <option value="{{ $opt }}">{{ ucfirst($opt) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label>Confidential</label>
                                <select name="is_confidential" class="form-control">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea name="description" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label>File</label>
                            <input type="file" name="file" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan

    @can('manage cases')
    <div class="modal fade" id="modalQuickCourtDate" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick Add Court Date</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <form method="POST" action="{{ route('court-dates.store') }}" class="js-ajax-form" data-refresh="court-dates">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="case_id" value="{{ $case->id }}">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Court Name</label>
                                <input type="text" name="court_name" class="form-control" required>
                            </div>
                            <div class="form-group col-md-6">
                                <label>Hearing Type</label>
                                <input type="text" name="hearing_type" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Scheduled Date</label>
                                <input type="datetime-local" name="scheduled_date" class="form-control" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label>Status</label>
                                <select name="status" class="form-control" required>
                                    @foreach(['scheduled','completed','postponed','cancelled'] as $opt)
                                        <option value="{{ $opt }}">{{ ucfirst($opt) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-3">
                                <label>Duration (min)</label>
                                <input type="number" name="duration_minutes" class="form-control" min="0">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Judge Name</label>
                                <input type="text" name="judge_name" class="form-control">
                            </div>
                            <div class="form-group col-md-6">
                                <label>Location</label>
                                <input type="text" name="location" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Notes</label>
                            <textarea name="notes" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan

    @can('create', App\Models\TimeEntry::class)
    <div class="modal fade" id="modalQuickTimeEntry" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick Add Time Entry</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            <form method="POST" action="{{ route('time-entries.store') }}" class="js-ajax-form" data-refresh="time-entries">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="case_id" value="{{ $case->id }}">
                        <div class="form-row">
                            <div class="form-group col-md-8">
                                <label>Description</label>
                                <input type="text" name="description" class="form-control" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Task (optional)</label>
                                <select name="task_id" class="form-control">
                                    <option value="">-- None --</option>
                                    @foreach($case->tasks as $t)
                                        <option value="{{ $t->id }}">{{ $t->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label>Hours</label>
                                <input type="number" step="0.01" min="0" name="hours" class="form-control" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label>Hourly Rate</label>
                                <input type="number" step="0.01" min="0" name="hourly_rate" class="form-control" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label>Billable</label>
                                <select name="billable" class="form-control">
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                            <div class="form-group col-md-3">
                                <label>Date Worked</label>
                                <input type="date" name="date_worked" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan

    @can('manage cases')
    <div class="modal fade" id="modalQuickExpense" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick Add Expense</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <form method="POST" action="{{ route('case-expenses.store') }}" class="js-ajax-form" data-refresh="expenses" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="case_id" value="{{ $case->id }}">
                        <div class="form-row">
                            <div class="form-group col-md-5">
                                <label>Date</label>
                                <input type="date" name="expense_date" class="form-control" required>
                            </div>
                            <div class="form-group col-md-7">
                                <label>Category</label>
                                <select name="category" class="form-control" required>
                                    @foreach(['filing_fees','travel','expert_witness','postage','courier','printing','meals','other'] as $opt)
                                        <option value="{{ $opt }}">{{ ucwords(str_replace('_',' ',$opt)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <input type="text" name="description" class="form-control" placeholder="Optional details">
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Vendor</label>
                                <input type="text" name="vendor" class="form-control" placeholder="Optional">
                            </div>
                            <div class="form-group col-md-4">
                                <label>Amount</label>
                                <input type="number" step="0.01" min="0" name="amount" class="form-control" required>
                            </div>
                            <div class="form-group col-md-2">
                                <label>Billable</label>
                                <select name="billable" class="form-control">
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Receipt (optional)</label>
                            <input type="file" name="receipt" class="form-control-file" accept="image/*,application/pdf">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan

    @can('manage cases')
    <div class="modal fade" id="modalExpenseQuickEdit" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick Edit Expense</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <form id="formExpenseQuickEdit" method="POST" action="#" class="js-ajax-form" data-refresh="expenses" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="form-row">
                            <div class="form-group col-md-5">
                                <label>Date</label>
                                <input type="date" name="expense_date" class="form-control" required>
                            </div>
                            <div class="form-group col-md-7">
                                <label>Category</label>
                                <select name="category" class="form-control" required>
                                    @foreach(['filing_fees','travel','expert_witness','postage','courier','printing','meals','other'] as $opt)
                                        <option value="{{ $opt }}">{{ ucwords(str_replace('_',' ',$opt)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <input type="text" name="description" class="form-control" placeholder="Optional details">
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Vendor</label>
                                <input type="text" name="vendor" class="form-control" placeholder="Optional">
                            </div>
                            <div class="form-group col-md-4">
                                <label>Amount</label>
                                <input type="number" step="0.01" min="0" name="amount" class="form-control" required>
                            </div>
                            <div class="form-group col-md-2">
                                <label>Billable</label>
                                <select name="billable" class="form-control">
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Replace Receipt</label>
                            <input type="file" name="receipt" class="form-control-file" accept="image/*,application/pdf">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan

    @include('cases.partials.task_quick_edit_modal')
    @include('cases.partials.invoice_quick_edit_modal')
    @include('cases.partials.court_date_quick_edit_modal')

    @can('manage invoices')
    <div class="modal fade" id="modalQuickInvoice" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick New Invoice</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <form method="POST" action="{{ route('invoices.store-memo') }}">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="client_id" value="{{ $case->client_id }}">
                        <input type="hidden" name="case_id" value="{{ $case->id }}">
                        <div class="form-group">
                            <label>Invoice Number <small class="text-muted">(optional)</small></label>
                            <input type="text" name="invoice_number" class="form-control" autocomplete="off" placeholder="Auto-generate if empty">
                            <small class="form-text text-muted">Leave blank to auto-generate.</small>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Invoice Date</label>
                                <input type="date" name="invoice_date" class="form-control" required>
                            </div>
                            <div class="form-group col-md-6">
                                <label>Due Date</label>
                                <input type="date" name="due_date" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Notes</label>
                            <textarea name="notes" class="form-control" rows="2"></textarea>
                        </div>
                        <small class="text-muted d-block">After creating the memo, you'll be taken to the item editor to add invoice items and taxes.</small>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create Invoice</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan
@endsection

@push('css')
<style>
    .comm-card .subject-cell { max-width: 420px; }
    .comm-card .subject-cell a { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
@endpush

@push('js')
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // CSRF setup for AJAX
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    function showInlineAlert(message, type='success') {
        var $alert = $('<div class="alert alert-'+type+' alert-dismissible fade show position-fixed" style="top: 1rem; right: 1rem; z-index: 1080;">')
            .text(message)
            .append('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>');
        $('body').append($alert);
        setTimeout(function(){ $alert.alert('close'); }, 2500);
    }

    function refreshSection(caseId, section, params) {
        var map = {
            'tasks': '#tasks-rows',
            'documents': '#documents-rows',
            'court-dates': '#court-dates-rows',
            'time-entries': '#time-entries-rows',
            'invoices': '#invoices-rows',
            'expenses': '#expenses-rows',
            'communications': '#communications-rows'
        };
        var target = map[section];
        if (!target) return;
        var url = "{{ url('cases') }}/"+caseId+"/section-rows/"+section;
        if (params && Object.keys(params).length) {
            url += '?' + $.param(params);
        }
        $.get(url)
            .done(function(html){ $(target).html(html); })
            .fail(function(){ showInlineAlert('Failed to refresh '+section, 'danger'); });
    }

    function highlightInvalid($form, errors) {
        $form.find('.is-invalid').removeClass('is-invalid');
        $form.find('.invalid-feedback').remove();
        if (!errors) return;
        Object.keys(errors).forEach(function(name){
            var $field = $form.find('[name="'+name+'"]');
            if ($field.length) {
                $field.addClass('is-invalid');
                var msg = Array.isArray(errors[name]) ? errors[name][0] : errors[name];
                $('<div class="invalid-feedback">'+msg+'</div>').insertAfter($field);
            }
        });
    }

    function withSpinner($btn, on) {
        if (on) {
            $btn.data('orig-html', $btn.html());
            $btn.prop('disabled', true).addClass('disabled');
            $btn.html('<i class="fas fa-circle-notch fa-spin mr-1"></i>' + ($btn.text()||'Saving'));
        } else {
            $btn.prop('disabled', false).removeClass('disabled');
            if ($btn.data('orig-html')) $btn.html($btn.data('orig-html'));
        }
    }

    // AJAX create/update forms (including file upload)
    $(document).on('submit', '.js-ajax-form', function(e){
        e.preventDefault();
        var $form = $(this);
        var $btn = $form.find('[type=submit]');
        withSpinner($btn, true);
        highlightInvalid($form);
        var section = $form.data('refresh');
        var caseId = {{ $case->id }};
        var formData = new FormData(this);
        $.ajax({
            url: $form.attr('action'),
            method: $form.attr('method') || 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(resp){
                $form.closest('.modal').modal('hide');
                if ($form[0]) { $form[0].reset(); }
                var extra = null;
                if (section === 'communications') {
                    extra = getCommFilters();
                }
                refreshSection(caseId, section, extra);
                var msg = (resp && resp.message) ? resp.message : 'Saved';
                showInlineAlert(msg, 'success');
                withSpinner($btn, false);
            },
            error: function(xhr){
                let msg = 'Failed to save';
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.errors) { highlightInvalid($form, xhr.responseJSON.errors); }
                    if (xhr.responseJSON.message) { msg = xhr.responseJSON.message; }
                }
                showInlineAlert(msg, 'danger');
                withSpinner($btn, false);
            }
        });
    });

    // AJAX delete for inline forms
    $(document).on('submit', '.js-ajax-delete', function(e){
        e.preventDefault();
        var $form = $(this);
        var confirmMsg = $form.data('confirm');
        if (!confirmMsg && $form.attr('onsubmit')) {
            try {
                var m = $form.attr('onsubmit').match(/confirm\(['\"]([^'\"]+)['\"]\)/);
                if (m && m[1]) confirmMsg = m[1];
            } catch (err) {}
        }
        if (confirmMsg && !window.confirm(confirmMsg)) { return; }
        var $btn = $form.find('button[type=submit],button').first();
        withSpinner($btn, true);
        var section = $form.data('refresh');
        var caseId = {{ $case->id }};
        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize(),
            success: function(){
                var extra = null;
                if (section === 'communications') {
                    extra = getCommFilters();
                }
                refreshSection(caseId, section, extra);
                showInlineAlert('Deleted', 'success');
                withSpinner($btn, false);
            },
            error: function(){ showInlineAlert('Failed to delete', 'danger'); withSpinner($btn, false); }
        });
    });

    // Open Task quick edit modal and populate
    $(document).on('click', '.js-open-task-edit', function(){
        var raw = $(this).attr('data-task');
        var data = {}; try { data = JSON.parse(raw); } catch(e) {}
        var $form = $('#formTaskQuickEdit');
        $form.attr('action', "{{ url('tasks') }}/"+data.id);
        $form.find('[name=status]').val(data.status);
        $form.find('[name=priority]').val(data.priority);
        $form.find('[name=due_date]').val(data.due_date || '');
        $('#modalTaskQuickEdit').modal('show');
    });

    // Submit Task quick edit via AJAX
    $(document).on('submit', '#formTaskQuickEdit', function(e){
        e.preventDefault();
        var $form = $(this);
        var $btn = $form.find('[type=submit]');
        withSpinner($btn, true);
        var caseId = {{ $case->id }};
        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize(),
            success: function(){
                $('#modalTaskQuickEdit').modal('hide');
                refreshSection(caseId, 'tasks');
                showInlineAlert('Task updated', 'success');
                withSpinner($btn, false);
            },
            error: function(xhr){
                if (xhr.responseJSON && xhr.responseJSON.errors) { highlightInvalid($form, xhr.responseJSON.errors); }
                showInlineAlert('Failed to update task', 'danger');
                withSpinner($btn, false);
            }
        });
    });

    // Open Invoice quick edit modal
    $(document).on('click', '.js-open-invoice-edit', function(){
        var raw = $(this).attr('data-invoice');
        var data = {}; try { data = JSON.parse(raw); } catch(e) {}
        var $form = $('#formInvoiceQuickEdit');
        $form.attr('action', "{{ url('invoices') }}/"+data.id);
        $form.find('[name=status]').val(data.status);
        $form.find('[name=paid_date]').val(data.paid_date || '');
        $('#modalInvoiceQuickEdit').modal('show');
    });

    // Submit Invoice quick edit via AJAX
    $(document).on('submit', '#formInvoiceQuickEdit', function(e){
        e.preventDefault();
        var $form = $(this);
        var $btn = $form.find('[type=submit]');
        withSpinner($btn, true);
        var caseId = {{ $case->id }};
        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize(),
            success: function(){
                $('#modalInvoiceQuickEdit').modal('hide');
                refreshSection(caseId, 'invoices');
                showInlineAlert('Invoice updated', 'success');
                withSpinner($btn, false);
            },
            error: function(xhr){
                if (xhr.responseJSON && xhr.responseJSON.errors) { highlightInvalid($form, xhr.responseJSON.errors); }
                showInlineAlert('Failed to update invoice', 'danger');
                withSpinner($btn, false);
            }
        });
    });

    // Open Court Date quick edit modal
    $(document).on('click', '.js-open-courtdate-edit', function(){
        var raw = $(this).attr('data-cd');
        var data = {}; try { data = JSON.parse(raw); } catch(e) {}
        var $form = $('#formCourtDateQuickEdit');
        $form.attr('action', "{{ url('court-dates') }}/"+data.id);
        $form.find('[name=status]').val(data.status);
        $form.find('[name=scheduled_date]').val(data.scheduled_date || '');
        $form.find('[name=duration_minutes]').val(data.duration_minutes || '');
        $('#modalCourtDateQuickEdit').modal('show');
    });

    // Submit Court Date quick edit via AJAX
    $(document).on('submit', '#formCourtDateQuickEdit', function(e){
        e.preventDefault();
        var $form = $(this);
        var $btn = $form.find('[type=submit]');
        withSpinner($btn, true);
        var caseId = {{ $case->id }};
        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize(),
            success: function(){
                $('#modalCourtDateQuickEdit').modal('hide');
                refreshSection(caseId, 'court-dates');
                showInlineAlert('Court date updated', 'success');
                withSpinner($btn, false);
            },
            error: function(xhr){
                if (xhr.responseJSON && xhr.responseJSON.errors) { highlightInvalid($form, xhr.responseJSON.errors); }
                showInlineAlert('Failed to update court date', 'danger');
                withSpinner($btn, false);
            }
        });
    });

    // Open Expense quick edit modal
    $(document).on('click', '.js-open-expense-edit', function(){
        var raw = $(this).attr('data-ex');
        var data = {}; try { data = JSON.parse(raw); } catch(e) {}
        var $form = $('#formExpenseQuickEdit');
        $form.attr('action', "{{ url('case-expenses') }}/"+data.id);
        $form.find('[name=expense_date]').val(data.expense_date || '');
        $form.find('[name=category]').val(data.category || 'other');
        $form.find('[name=description]').val(data.description || '');
        $form.find('[name=vendor]').val(data.vendor || '');
        $form.find('[name=amount]').val(data.amount || '');
        $form.find('[name=billable]').val(data.billable ? '1' : '0');
        $('#modalExpenseQuickEdit').modal('show');
    });

    // Communications filters helpers
    function getCommFilters(){
        return {
            type: $('#comm-filter-type').val() || '',
            unread: $('#comm-filter-unread').is(':checked') ? 1 : ''
        };
    }
    $('#comm-apply-filter').on('click', function(){
        var caseId = {{ $case->id }};
        refreshSection(caseId, 'communications', getCommFilters());
        $('#commFilterBtn').dropdown('toggle');
    });
    $('#comm-clear-filter').on('click', function(){
        $('#comm-filter-type').val('');
        $('#comm-filter-unread').prop('checked', false);
        var caseId = {{ $case->id }};
        refreshSection(caseId, 'communications');
        $('#commFilterBtn').dropdown('toggle');
    });
});

// Open quick communication modal
@can('manage communications')
$(document).on('click', '#btnQuickCommunication', function(){
    $('#modalQuickCommunication').modal('show');
});
@endcan
</script>
@endpush