@extends('layouts.app')
@section('title', 'Work Order #' . $workOrder->work_order_number)

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="page-title">
            <i class="bi bi-file-earmark-text me-2"></i>WO #{{ $workOrder->work_order_number }}
        </h1>
        <div class="d-flex gap-2">
            <a href="{{ route('contractors.work-orders.print', $workOrder) }}" class="btn btn-outline-dark" target="_blank">
                <i class="bi bi-printer me-1"></i> Print
            </a>
            @if(in_array($workOrder->status, ['draft', 'active']))
                <a href="{{ route('contractors.work-orders.edit', $workOrder) }}" class="btn btn-outline-primary">
                    <i class="bi bi-pencil me-1"></i> Edit
                </a>
            @endif
            <a href="{{ route('contractors.work-orders.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i> Back
            </a>
        </div>
    </div>

    <!-- Work Order Details + State Actions -->
    <div class="row g-4 mb-4">
        <div class="col-md-8">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Work Order Details</h6>
                    @php
                        $statusColors = ['draft' => 'secondary', 'active' => 'primary', 'completed' => 'success', 'cancelled' => 'danger'];
                    @endphp
                    <span class="badge bg-{{ $statusColors[$workOrder->status] ?? 'secondary' }} fs-6">
                        {{ ucfirst($workOrder->status) }}
                    </span>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="text-muted small">Contractor</div>
                            <div>
                                <a href="{{ route('contractors.show', $workOrder->contractor) }}">
                                    <strong>{{ $workOrder->contractor->name }}</strong>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="text-muted small">Project</div>
                            <div><strong>{{ $workOrder->project->project_name ?? '—' }}</strong></div>
                        </div>
                        <div class="col-12">
                            <div class="text-muted small">Title</div>
                            <div><strong>{{ $workOrder->title }}</strong></div>
                        </div>
                        @if($workOrder->description)
                            <div class="col-12">
                                <div class="text-muted small">Description</div>
                                <div>{{ $workOrder->description }}</div>
                            </div>
                        @endif
                        <div class="col-md-3">
                            <div class="text-muted small">Start Date</div>
                            <div>{{ $workOrder->start_date?->format('d M Y') ?? '—' }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-muted small">End Date</div>
                            <div>{{ $workOrder->end_date?->format('d M Y') ?? '—' }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-muted small">Created By</div>
                            <div>{{ $workOrder->createdBy->name ?? '—' }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-muted small">Created</div>
                            <div>{{ $workOrder->created_at->format('d M Y') }}</div>
                        </div>

                        @if($workOrder->status === 'cancelled' && $workOrder->cancellation_reason)
                            <div class="col-12">
                                <div class="alert alert-danger mb-0">
                                    <strong>Cancellation Reason:</strong> {{ $workOrder->cancellation_reason }}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-header"><h6 class="mb-0">Financial Summary</h6></div>
                <div class="card-body">
                    <div class="text-muted small">Agreed Amount</div>
                    <div class="fs-4 fw-bold mb-2">৳{{ number_format((float) $workOrder->agreed_amount, 2) }}</div>

                    <div class="text-muted small">Paid Amount</div>
                    <div class="fs-4 fw-bold text-success mb-2">৳{{ number_format((float) $workOrder->paid_amount, 2) }}</div>

                    <div class="text-muted small">Due Amount</div>
                    <div class="fs-4 fw-bold {{ $workOrder->due_amount > 0 ? 'text-danger' : 'text-success' }} mb-3">
                        ৳{{ number_format($workOrder->due_amount, 2) }}
                    </div>

                    <!-- Progress Bar -->
                    <div class="mb-3">
                        <div class="d-flex justify-content-between small mb-1">
                            <span>Progress</span>
                            <span>{{ $workOrder->progress_percent }}%</span>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="progress-bar bg-success" style="width: {{ $workOrder->progress_percent }}%"></div>
                        </div>
                    </div>

                    <!-- State Transition Buttons -->
                    @if($workOrder->status === 'draft')
                        <form method="POST" action="{{ route('contractors.work-orders.activate', $workOrder) }}">
                            @csrf
                            <button type="submit" class="btn btn-primary w-100 mb-2">
                                <i class="bi bi-play-fill me-1"></i> Activate Work Order
                            </button>
                        </form>
                    @endif

                    @if($workOrder->status === 'active')
                        <form method="POST" action="{{ route('contractors.work-orders.complete', $workOrder) }}">
                            @csrf
                            <button type="submit" class="btn btn-success w-100 mb-2"
                                onclick="return confirm('Mark this work order as completed?')">
                                <i class="bi bi-check-circle me-1"></i> Mark Completed
                            </button>
                        </form>
                    @endif

                    @if(in_array($workOrder->status, ['draft', 'active']))
                        <button class="btn btn-outline-danger w-100" data-bs-toggle="modal" data-bs-target="#cancelModal">
                            <i class="bi bi-x-circle me-1"></i> Cancel Work Order
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Milestones -->
    @if($workOrder->milestone_enabled && $workOrder->milestones->count() > 0)
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-flag me-2"></i>Milestones</h6>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Title</th>
                            <th class="text-end">Amount</th>
                            <th>Target Date</th>
                            <th>Completed</th>
                            <th>Status</th>
                            <th>Approved By</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($workOrder->milestones as $idx => $ms)
                            <tr>
                                <td>{{ $idx + 1 }}</td>
                                <td><strong>{{ $ms->title }}</strong></td>
                                <td class="text-end">
                                    @if($ms->amount)
                                        ৳{{ number_format((float) $ms->amount, 2) }}
                                    @elseif($ms->percentage)
                                        {{ $ms->percentage }}%
                                    @else
                                        —
                                    @endif
                                </td>
                                <td>{{ $ms->target_date?->format('d M Y') ?? '—' }}</td>
                                <td>{{ $ms->completion_date?->format('d M Y') ?? '—' }}</td>
                                <td>
                                    @php
                                        $msColors = ['pending' => 'secondary', 'in_progress' => 'info', 'completed' => 'warning', 'approved' => 'success'];
                                    @endphp
                                    <span class="badge bg-{{ $msColors[$ms->status] ?? 'secondary' }}">
                                        {{ str_replace('_', ' ', ucfirst($ms->status)) }}
                                    </span>
                                </td>
                                <td>{{ $ms->approver->name ?? '—' }}</td>
                                <td class="text-center">
                                    @php
                                        $transitions = \App\Models\WorkOrderMilestone::STATUS_TRANSITIONS[$ms->status] ?? [];
                                    @endphp
                                    @foreach($transitions as $nextStatus)
                                        <form method="POST" action="{{ route('contractors.milestones.transition', $ms) }}"
                                            class="d-inline">
                                            @csrf
                                            <input type="hidden" name="status" value="{{ $nextStatus }}">
                                            <button type="submit" class="btn btn-sm btn-outline-{{ $nextStatus === 'approved' ? 'success' : 'primary' }}"
                                                onclick="return confirm('Transition to {{ str_replace('_', ' ', $nextStatus) }}?')">
                                                @if($nextStatus === 'in_progress')
                                                    <i class="bi bi-play"></i> Start
                                                @elseif($nextStatus === 'completed')
                                                    <i class="bi bi-check"></i> Complete
                                                @elseif($nextStatus === 'approved')
                                                    <i class="bi bi-check-circle"></i> Approve
                                                @endif
                                            </button>
                                        </form>
                                    @endforeach
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    <!-- Payment Form + Payment History -->
    <div class="row g-4">
        <!-- Record Payment -->
        @if(in_array($workOrder->status, ['active', 'completed']))
            <div class="col-md-5">
                <div class="card h-100">
                    <div class="card-header"><h6 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Record Payment</h6></div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('contractors.work-orders.payment', $workOrder) }}"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Amount (৳) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" name="amount"
                                    class="form-control @error('amount') is-invalid @enderror"
                                    value="{{ old('amount') }}" required>
                                @error('amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Payment Date <span class="text-danger">*</span></label>
                                <input type="date" name="payment_date"
                                    class="form-control @error('payment_date') is-invalid @enderror"
                                    value="{{ old('payment_date', now()->format('Y-m-d')) }}" required>
                                @error('payment_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Payment Type <span class="text-danger">*</span></label>
                                <select name="payment_type" class="form-select @error('payment_type') is-invalid @enderror" required>
                                    <option value="advance" {{ old('payment_type') === 'advance' ? 'selected' : '' }}>Advance</option>
                                    <option value="milestone" {{ old('payment_type') === 'milestone' ? 'selected' : '' }}>Milestone</option>
                                    <option value="bill" {{ old('payment_type', 'bill') === 'bill' ? 'selected' : '' }}>Bill</option>
                                    <option value="final" {{ old('payment_type') === 'final' ? 'selected' : '' }}>Final</option>
                                    <option value="other" {{ old('payment_type') === 'other' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('payment_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Payment Method</label>
                                <select name="payment_method_id" class="form-select">
                                    <option value="">Select…</option>
                                    @foreach($paymentMethods as $pm)
                                        <option value="{{ $pm->id }}" {{ old('payment_method_id') == $pm->id ? 'selected' : '' }}>
                                            {{ $pm->method_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Reference #</label>
                                <input type="text" name="reference_number" class="form-control"
                                    value="{{ old('reference_number') }}" placeholder="Check/transaction number">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Narration</label>
                                <textarea name="narration" class="form-control" rows="2">{{ old('narration') }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Receipt Attachment</label>
                                <input type="file" name="receipt_attachment" class="form-control"
                                    accept=".pdf,.jpg,.jpeg,.png">
                            </div>

                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bi bi-check-lg me-1"></i> Record Payment
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @endif

        <!-- Payment History -->
        <div class="{{ in_array($workOrder->status, ['active', 'completed']) ? 'col-md-7' : 'col-md-12' }}">
            <div class="card h-100">
                <div class="card-header"><h6 class="mb-0"><i class="bi bi-cash-stack me-2"></i>Payment History</h6></div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Method</th>
                                <th>Reference</th>
                                <th>Narration</th>
                                <th class="text-end">Amount</th>
                                <th>By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($workOrder->payments as $p)
                                <tr class="{{ $p->is_reversal ? 'table-warning' : '' }}">
                                    <td>{{ $p->payment_date->format('d M Y') }}</td>
                                    <td>
                                        @if($p->is_reversal)
                                            <span class="badge bg-warning text-dark">Reversal</span>
                                        @else
                                            <span class="badge bg-info">{{ ucfirst($p->payment_type) }}</span>
                                        @endif
                                    </td>
                                    <td>{{ $p->paymentMethod->method_name ?? '—' }}</td>
                                    <td><small>{{ $p->reference_number ?? '—' }}</small></td>
                                    <td><small>{{ $p->narration ?? '—' }}</small></td>
                                    <td class="text-end fw-bold {{ $p->is_reversal ? 'text-danger' : 'text-success' }}">
                                        {{ $p->is_reversal ? '-' : '' }}৳{{ number_format((float) $p->amount, 2) }}
                                    </td>
                                    <td><small>{{ $p->createdBy->name ?? '—' }}</small></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-3">No payments recorded yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Cancel Modal -->
    @if(in_array($workOrder->status, ['draft', 'active']))
        <div class="modal fade" id="cancelModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form method="POST" action="{{ route('contractors.work-orders.cancel', $workOrder) }}">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title">Cancel Work Order</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>Are you sure you want to cancel this work order? This action cannot be undone.</p>
                            <div class="mb-3">
                                <label class="form-label">Cancellation Reason <span class="text-danger">*</span></label>
                                <textarea name="cancellation_reason" class="form-control" rows="3" required></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-danger">Cancel Work Order</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
@endsection