@extends('layouts.app')
@section('title', ($workOrder->exists ? 'Edit' : 'New') . ' Work Order')

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-file-earmark-text me-2"></i>
                        {{ $workOrder->exists ? 'Edit Work Order #' . $workOrder->work_order_number : 'New Work Order' }}
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST"
                        action="{{ $workOrder->exists
                            ? route('contractors.work-orders.update', $workOrder)
                            : route('contractors.work-orders.store') }}">
                        @csrf
                        @if($workOrder->exists)
                            @method('PUT')
                        @endif

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Contractor <span class="text-danger">*</span></label>
                                <select name="contractor_id" class="form-select @error('contractor_id') is-invalid @enderror" required>
                                    <option value="">Select contractor…</option>
                                    @foreach($contractors as $c)
                                        <option value="{{ $c->id }}"
                                            {{ old('contractor_id', $workOrder->contractor_id ?? request('contractor_id')) == $c->id ? 'selected' : '' }}>
                                            {{ $c->name }} ({{ $c->specialization ?? 'General' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('contractor_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Project <span class="text-danger">*</span></label>
                                <select name="project_id" class="form-select @error('project_id') is-invalid @enderror" required>
                                    <option value="">Select project…</option>
                                    @foreach($projects as $p)
                                        <option value="{{ $p->id }}"
                                            {{ old('project_id', $workOrder->project_id) == $p->id ? 'selected' : '' }}>
                                            {{ $p->project_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('project_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-8">
                                <label class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" name="title"
                                    class="form-control @error('title') is-invalid @enderror"
                                    value="{{ old('title', $workOrder->title) }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Agreed Amount (৳) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" name="agreed_amount"
                                    class="form-control @error('agreed_amount') is-invalid @enderror"
                                    value="{{ old('agreed_amount', $workOrder->agreed_amount) }}" required>
                                @error('agreed_amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label">Description</label>
                                <textarea name="description" class="form-control @error('description') is-invalid @enderror"
                                    rows="3">{{ old('description', $workOrder->description) }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Start Date</label>
                                <input type="date" name="start_date"
                                    class="form-control @error('start_date') is-invalid @enderror"
                                    value="{{ old('start_date', $workOrder->start_date?->format('Y-m-d')) }}">
                                @error('start_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">End Date</label>
                                <input type="date" name="end_date"
                                    class="form-control @error('end_date') is-invalid @enderror"
                                    value="{{ old('end_date', $workOrder->end_date?->format('Y-m-d')) }}">
                                @error('end_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Milestones</label>
                                <div class="form-check form-switch mt-2">
                                    <input type="hidden" name="milestone_enabled" value="0">
                                    <input class="form-check-input" type="checkbox" name="milestone_enabled" value="1"
                                        id="milestoneToggle"
                                        {{ old('milestone_enabled', $workOrder->milestone_enabled) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="milestoneToggle">Enable milestones</label>
                                </div>
                            </div>
                        </div>

                        <!-- Dynamic Milestones Section -->
                        <div id="milestonesSection" class="mt-4" style="{{ old('milestone_enabled', $workOrder->milestone_enabled) ? '' : 'display:none' }}">
                            <h6><i class="bi bi-flag me-2"></i>Milestones</h6>
                            <div id="milestonesContainer">
                                @php
                                    $existingMilestones = old('milestones', $workOrder->milestones?->toArray() ?? []);
                                @endphp
                                @foreach($existingMilestones as $idx => $ms)
                                    <div class="card card-body mb-2 milestone-row">
                                        <div class="row g-2 align-items-end">
                                            <div class="col-md-4">
                                                <label class="form-label small">Title</label>
                                                <input type="text" name="milestones[{{ $idx }}][title]" class="form-control form-control-sm"
                                                    value="{{ $ms['title'] ?? '' }}" required>
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label small">Amount (৳)</label>
                                                <input type="number" step="0.01" name="milestones[{{ $idx }}][amount]"
                                                    class="form-control form-control-sm" value="{{ $ms['amount'] ?? '' }}">
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label small">Percentage (%)</label>
                                                <input type="number" step="0.01" name="milestones[{{ $idx }}][percentage]"
                                                    class="form-control form-control-sm" value="{{ $ms['percentage'] ?? '' }}">
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label small">Target Date</label>
                                                <input type="date" name="milestones[{{ $idx }}][target_date]"
                                                    class="form-control form-control-sm" value="{{ $ms['target_date'] ?? '' }}">
                                            </div>
                                            <div class="col-md-1">
                                                <button type="button" class="btn btn-sm btn-outline-danger remove-milestone">
                                                    <i class="bi bi-x"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" id="addMilestone" class="btn btn-sm btn-outline-primary mt-2">
                                <i class="bi bi-plus-lg me-1"></i> Add Milestone
                            </button>
                        </div>

                        <div class="d-flex justify-content-end gap-2 mt-4">
                            <a href="{{ route('contractors.work-orders.index') }}" class="btn btn-outline-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg me-1"></i>
                                {{ $workOrder->exists ? 'Update' : 'Create Work Order' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggle = document.getElementById('milestoneToggle');
    const section = document.getElementById('milestonesSection');
    const container = document.getElementById('milestonesContainer');
    let msIndex = {{ count($existingMilestones) }};

    toggle.addEventListener('change', function() {
        section.style.display = this.checked ? '' : 'none';
    });

    document.getElementById('addMilestone').addEventListener('click', function() {
        const row = document.createElement('div');
        row.className = 'card card-body mb-2 milestone-row';
        row.innerHTML = `
            <div class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small">Title</label>
                    <input type="text" name="milestones[${msIndex}][title]" class="form-control form-control-sm" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Amount (৳)</label>
                    <input type="number" step="0.01" name="milestones[${msIndex}][amount]" class="form-control form-control-sm">
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Percentage (%)</label>
                    <input type="number" step="0.01" name="milestones[${msIndex}][percentage]" class="form-control form-control-sm">
                </div>
                <div class="col-md-3">
                    <label class="form-label small">Target Date</label>
                    <input type="date" name="milestones[${msIndex}][target_date]" class="form-control form-control-sm">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-sm btn-outline-danger remove-milestone">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            </div>`;
        container.appendChild(row);
        msIndex++;
    });

    container.addEventListener('click', function(e) {
        if (e.target.closest('.remove-milestone')) {
            e.target.closest('.milestone-row').remove();
        }
    });
});
</script>
@endsection