@extends('layouts.app')
@section('title', 'New Works Order')
@section('breadcrumb')
<a href="{{ route('jobs.index') }}" class="hover:text-white">Jobs</a>
<i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i>
<a href="{{ route('jobs.show', $job) }}" class="hover:text-white">{{ $job->job_number }}</a>
<i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i>
<span class="text-white">New Works Order</span>
@endsection

@section('content')
<form method="POST" action="{{ route('jobs.works-orders.store', $job) }}" class="space-y-5">
@csrf

@if($errors->any())
<div class="card p-4 border-red-500 bg-red-900/20">
    <ul class="text-red-400 text-sm space-y-1">@foreach($errors->all() as $e)<li><i class="fas fa-exclamation-circle mr-1"></i>{{ $e }}</li>@endforeach</ul>
</div>
@endif

{{-- Header --}}
<div class="card p-4 flex items-center gap-3">
    <div class="w-10 h-10 rounded-lg bg-blue-900 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-clipboard-list text-blue-300"></i>
    </div>
    <div>
        <h2 class="text-lg font-semibold text-white">New Works Order</h2>
        <div class="text-xs text-slate-400">{{ $job->job_number }} — {{ $job->contact?->full_name ?? 'No client' }}</div>
    </div>
</div>

{{-- Work Order Details (two-column layout matching reference) --}}
<div class="card p-5">
    <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-file-alt text-blue-400"></i> Work Order Details</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3">
        {{-- Left Column --}}
        <div class="space-y-3">
            <div>
                <label class="block text-xs text-slate-400 mb-1">Date</label>
                <input type="date" name="issued_date" value="{{ old('issued_date', now()->format('Y-m-d')) }}" class="input w-full">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Factory Manager Approval</label>
                <input type="date" name="factory_manager_approval" value="{{ old('factory_manager_approval') }}" class="input w-full">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Given To Factory</label>
                <input type="date" name="given_to_factory" value="{{ old('given_to_factory') }}" class="input w-full">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Manufacture Date</label>
                <input type="date" name="manufacture_date" value="{{ old('manufacture_date') }}" class="input w-full">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Factory Completion Date</label>
                <input type="date" name="factory_completion_date" value="{{ old('factory_completion_date') }}" class="input w-full">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Target Completion</label>
                <input type="date" name="target_completion" value="{{ old('target_completion') }}" class="input w-full">
            </div>
        </div>
        {{-- Right Column --}}
        <div class="space-y-3">
            <div>
                <label class="block text-xs text-slate-400 mb-1">Delivery Date</label>
                <input type="date" name="delivery_date" value="{{ old('delivery_date') }}" class="input w-full">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Delivered Date</label>
                <input type="date" name="delivered_date" value="{{ old('delivered_date') }}" class="input w-full">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Client Booking Date</label>
                <input type="date" name="client_booking_date" value="{{ old('client_booking_date') }}" class="input w-full">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Client Completion Date</label>
                <input type="date" name="client_completion_date" value="{{ old('client_completion_date') }}" class="input w-full">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Works Order Type</label>
                <select name="works_order_type" class="input w-full">
                    <option value="">— Select type —</option>
                    @foreach(\App\Models\WorksOrder::worksOrderTypes() as $t)
                    <option value="{{ $t }}" {{ old('works_order_type') === $t ? 'selected' : '' }}>{{ $t }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Supervisor</label>
                <select name="supervisor_id" class="input w-full">
                    <option value="">— Select supervisor —</option>
                    @foreach($supervisors as $u)
                    <option value="{{ $u->id }}" {{ old('supervisor_id') == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-center gap-3 pt-2">
                <input type="checkbox" name="drawings_attached" id="drawings_attached" value="1" class="w-4 h-4 rounded accent-blue-500" {{ old('drawings_attached') ? 'checked' : '' }}>
                <label for="drawings_attached" class="text-sm text-slate-300 cursor-pointer">Drawings Attached</label>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <label class="block text-xs text-slate-400 mb-1">Comments</label>
        <textarea name="comments" rows="3" class="input w-full" placeholder="Comments about this work order…">{{ old('comments') }}</textarea>
    </div>
</div>

{{-- Scope of Works --}}
<div class="card p-5 space-y-3">
    <h3 class="flex items-center gap-2"><i class="fas fa-list-alt text-purple-400"></i> Scope of Works</h3>
    <div>
        <textarea name="scope_of_works" rows="6" class="input w-full font-mono text-sm" placeholder="Describe all work to be performed…">{{ old('scope_of_works') }}</textarea>
    </div>
    <div>
        <label class="block text-xs text-slate-400 mb-1">Special Instructions</label>
        <textarea name="special_instructions" rows="2" class="input w-full" placeholder="Access, site requirements, client preferences…">{{ old('special_instructions') }}</textarea>
    </div>
</div>

{{-- Faults Section --}}
<div class="card p-5">
    <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-exclamation-triangle text-amber-400"></i> Faults</h3>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-xs text-slate-400 border-b border-slate-700">
                    <th class="py-2 text-left w-16">#</th>
                    <th class="py-2 text-left">Fault Type</th>
                    <th class="py-2 text-right w-36">Cost ($)</th>
                </tr>
            </thead>
            <tbody>
                @for($i = 1; $i <= 5; $i++)
                <tr class="border-b border-slate-800">
                    <td class="py-2 text-slate-500 pr-3">Fault {{ $i }}</td>
                    <td class="py-2 pr-3">
                        <select name="faults[{{ $i }}][fault_type]" class="input w-full text-sm">
                            <option value="">— Select —</option>
                            @foreach(\App\Models\WorksOrderFault::faultTypes() as $ft)
                            <option value="{{ $ft }}" {{ old("faults.{$i}.fault_type") === $ft ? 'selected' : '' }}>{{ $ft }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td class="py-2">
                        <input type="number" name="faults[{{ $i }}][cost]" step="0.01" min="0"
                            value="{{ old("faults.{$i}.cost", '0.00') }}"
                            class="input w-full text-right text-sm" placeholder="0.00">
                    </td>
                </tr>
                @endfor
            </tbody>
            <tfoot>
                <tr class="border-t-2 border-slate-600">
                    <td colspan="2" class="py-2 text-right text-slate-400 text-xs pr-3">Total Fault Cost</td>
                    <td class="py-2 text-right text-amber-400 font-semibold" id="faultTotal">$0.00</td>
                </tr>
            </tfoot>
        </table>
    </div>
    @php $threshold = \App\Models\AppSetting::get('work_order_fault_threshold', 300); @endphp
    <p class="text-xs text-slate-500 mt-2"><i class="fas fa-info-circle mr-1"></i>If total fault cost exceeds ${{ number_format($threshold, 0) }}, the work order will require manager approval before processing.</p>
</div>

{{-- Notes --}}
<div class="card p-5">
    <label class="block text-sm font-medium text-slate-300 mb-1">Internal Notes</label>
    <textarea name="notes" rows="2" class="input w-full" placeholder="Internal notes…">{{ old('notes') }}</textarea>
</div>

<div class="flex items-center justify-between">
    <a href="{{ route('jobs.show', $job) }}" class="btn btn-secondary"><i class="fas fa-arrow-left mr-2"></i>Cancel</a>
    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Create Works Order</button>
</div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    function updateTotal() {
        let total = 0;
        document.querySelectorAll('input[name^="faults"][name$="[cost]"]').forEach(function(el) {
            total += parseFloat(el.value) || 0;
        });
        document.getElementById('faultTotal').textContent = '$' + total.toFixed(2);
    }
    document.querySelectorAll('input[name^="faults"][name$="[cost]"]').forEach(function(el) {
        el.addEventListener('input', updateTotal);
    });
    updateTotal();
});
</script>
@endsection