@extends('layouts.dashboard.superadminapp')

@section('title', 'Production In Progress')

@push('styles')
    <style>
        :root {
            /* Standard Blue Gradient matching Planning Page */
            --primary-gradient: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
            --card-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
            --hover-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
            --text-dark: #2d3748;
            --text-muted: #718096;
            --bg-light: #f8f9fa;
        }

        body {
            background-color: var(--bg-light);
            font-family: 'Inter', sans-serif;
        }

        /* Gradient Header */
        .page-header-gradient {
            background: var(--primary-gradient);
            color: white;
            padding: 2rem 2.5rem;
            border-radius: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 10;
            margin-bottom: 2rem;
        }

        .breadcrumb-item + .breadcrumb-item::before {
            color: rgba(255, 255, 255, 0.6);
        }
        .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.9);
        }

        /* Premium Card */
        .premium-card {
            background: white;
            border: none;
            border-radius: 16px;
            box-shadow: var(--card-shadow);
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.02);
        }

        .premium-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--hover-shadow);
        }

        .card-header-stripe {
            height: 6px;
            background: var(--primary-gradient);
            width: 100%;
        }

        .card-body-content {
            padding: 1.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .rc-number {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.2rem;
        }

        .company-name {
            font-size: 0.95rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.6rem;
            font-size: 0.9rem;
        }

        .detail-label {
            color: var(--text-muted);
        }

        .detail-value {
            font-weight: 600;
            color: var(--text-dark);
        }

        /* Progress Bar */
        .progress-container {
            margin: 1rem 0;
        }
        .progress {
            height: 8px;
            border-radius: 4px;
            background-color: #edf2f7;
            overflow: hidden;
        }
        .progress-bar-custom {
            background: var(--primary-gradient);
        }

        /* Buttons */
        .btn-action-primary {
            background: var(--primary-gradient);
            border: none;
            color: white;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-weight: 600;
            width: 100%;
            transition: opacity 0.2s;
            display: block;
            text-align: center;
        }
        .btn-action-primary:hover {
            opacity: 0.95;
            color: white;
            text-decoration: none;
        }
        
        .btn-sm-glass {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            font-size: 0.85rem;
            border-radius: 6px;
        }
        .btn-sm-glass:hover {
            background: rgba(255,255,255,0.3);
            color: white;
        }
        
        .status-badge {
            background: #e3f2fd;
            color: #1565c0;
            padding: 0.25rem 0.6rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .empty-state {
            padding: 3rem;
            text-align: center;
            background: white;
            border-radius: 16px;
            box-shadow: var(--card-shadow);
        }

        .card-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .card-actions .btn-action-primary {
            flex: 1 1 160px;
        }

        .btn-action-secondary {
            background: #fff;
            border: 1px solid #4e73df;
            color: #224abe;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-weight: 600;
            flex: 1 1 120px;
            text-align: center;
        }

        .btn-action-secondary:hover {
            background: #eef3ff;
            color: #224abe;
            text-decoration: none;
        }
    </style>
@endpush

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Gradient Header -->
    <div class="page-header-gradient">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 font-weight-bold mb-1">Production In Progress</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-transparent p-0 m-0">
                            <li class="breadcrumb-item"><a href="{{ url('superadmin/dashboard') }}" class="text-white-50">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ url('superadmin/manufacturing/planning') }}" class="text-white-50">Planning</a></li>
                            <li class="breadcrumb-item active" aria-current="page">In Progress</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{{ url('superadmin/manufacturing/planning') }}" class="btn btn-sm-glass shadow-sm">
                        <i class="fas fa-arrow-left mr-1"></i> Back to Planning
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container-fluid" style="position: relative; z-index: 20; padding-top: 0;">
        <div class="row">
            @forelse($productionPlans as $plan)
                @php
                    $total = $plan->processes->count();
                    $startDate = $plan->processes->min('start_date') ?? $plan->project_start_date;
                    $endDate = $plan->processes->max('end_date') ?? $plan->project_start_date;
                    $priorityClass = strtolower($plan->priority ?? '') === 'high'
                        ? 'text-danger'
                        : (strtolower($plan->priority ?? '') === 'medium' ? 'text-warning' : 'text-success');
                @endphp
                <div class="col-12 col-md-6 col-lg-4 mb-4">
                    <div class="premium-card">
                        <div class="card-header-stripe"></div>
                        <div class="card-body-content">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <div class="rc-number">{{ $plan->plan_no }}</div>
                                    <div class="company-name"><i class="far fa-building mr-1"></i> {{ Str::limit($plan->company_name, 25) }}</div>
                                </div>
                                <span class="status-badge">
                                    Production Approved
                                </span>
                            </div>

                            <div class="detail-row">
                                <span class="detail-label">Plan Date:</span>
                                <span class="detail-value">{{ $plan->plan_date ? date('d M Y', strtotime($plan->plan_date)) : '-' }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">Start:</span>
                                <span class="detail-value">{{ $startDate ? date('d M Y h:i A', strtotime($startDate)) : '-' }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">End:</span>
                                <span class="detail-value">{{ $endDate ? date('d M Y h:i A', strtotime($endDate)) : '-' }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">Priority:</span>
                                <span class="detail-value {{ $priorityClass }}">{{ $plan->priority ?? 'N/A' }}</span>
                            </div>

                            <!-- Progress Section -->
                            <div class="progress-container">
                                <div class="d-flex justify-content-between small mb-1">
                                    <span class="text-muted">Processes Scheduled</span>
                                    <span class="font-weight-bold text-primary">{{ $total }}</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-custom" role="progressbar" style="width: {{ $total > 0 ? 100 : 0 }}%"></div>
                                </div>
                                <div class="small text-muted mt-2">
                                    <i class="fas fa-clock mr-1"></i> Real-time logs: {{ $plan->production_logs_count ?? 0 }}
                                </div>
                            </div>
                            
                            <div class="mt-auto">
                               <div class="detail-row align-items-center mb-3">
                                     <span class="detail-label"><i class="fas fa-user-shield mr-1"></i> Planned By:</span>
                                     <span class="detail-value" style="font-size:0.85rem;">
                                        {{ $plan->approved_by ?? 'Admin' }}
                                     </span>
                                </div>

                                <div class="card-actions">
                                    <button type="button" class="btn-action-secondary" onclick="openLogModal({{ $plan->id }})">
                                        <i class="fas fa-clock mr-1"></i> Add Logs
                                    </button>
                                    <button type="button" class="btn-action-secondary" onclick="viewLogs({{ $plan->id }})">
                                        <i class="fas fa-list-alt mr-1"></i> View Logs
                                    </button>
                                    <button type="button" class="btn-action-secondary" onclick="confirmMoveToQC({{ $plan->id }})">
                                        <i class="fas fa-exclamation-triangle mr-1"></i> Move to QC
                                    </button>
                                    <a href="{{ url('superadmin/planning/edit/' . $plan->id) }}" class="btn-action-primary shadow-sm">
                                        <i class="fas fa-clipboard-list mr-1"></i> View Plan Details
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="empty-state">
                        <i class="fas fa-industry fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No production approved plans.</h5>
                        <p class="text-muted mb-0">Move approved plans from "Ready to Production" to show them here.</p>
                    </div>
                </div>
            @endforelse
        </div>
    </div>

    <div class="modal fade" id="productionLogModal" tabindex="-1" role="dialog" aria-labelledby="productionLogModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <form class="modal-content" id="productionLogForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="productionLogModalLabel">Add Production Log</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="logPlanId" name="plan_id">

                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label class="font-weight-bold">Process</label>
                            <select id="logProcessId" name="plan_process_id" class="form-control" required></select>
                            <small class="form-text text-muted" id="logProcessInfo"></small>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="font-weight-bold">Actual Start</label>
                            <input type="datetime-local" id="logActualStart" name="actual_start" class="form-control" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="font-weight-bold">Actual End</label>
                            <input type="datetime-local" id="logActualEnd" name="actual_end" class="form-control">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label class="font-weight-bold">Quantity</label>
                            <input type="number" id="logQuantity" name="quantity" class="form-control" min="0" step="0.01">
                        </div>
                        <div class="form-group col-md-8">
                            <label class="font-weight-bold">Remarks</label>
                            <input type="text" id="logRemarks" name="remarks" class="form-control" maxlength="1000">
                        </div>
                    </div>

                    <div class="alert alert-danger d-none" id="productionLogError"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="saveProductionLogBtn">
                        <i class="fas fa-save mr-1"></i> Save Log
                    </button>
                </div>
            </form>
        </div>
    </div>
    </div>

    <!-- Logs Modal -->
    <div class="modal fade" id="viewLogsModal" tabindex="-1" role="dialog" aria-labelledby="viewLogsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewLogsModalLabel">Production Logs</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="logsContent">
                        <div class="text-center text-muted">Loading...</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const productionPlans = @json($productionPlans);

        function toDatetimeLocal(value) {
            const date = value ? new Date(value) : new Date();
            if (isNaN(date.getTime())) return '';
            const pad = number => String(number).padStart(2, '0');
            return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
        }

        function openLogModal(planId) {
            const plan = productionPlans.find(item => Number(item.id) === Number(planId));
            const processSelect = $('#logProcessId');
            $('#productionLogError').addClass('d-none').text('');
            $('#productionLogForm')[0].reset();
            $('#logPlanId').val(planId);
            $('#logActualStart').val(toDatetimeLocal(new Date()));
            processSelect.html('<option value="">Select Process</option>');

            (plan?.processes || []).forEach(process => {
                const label = `${process.process_name || process.process || 'Process'} | ${process.machine_name || 'No machine'} | Planned: ${formatDateTime(process.start_date)} - ${formatDateTime(process.end_date)}`;
                processSelect.append(`<option value="${process.id}">${label}</option>`);
            });

            processSelect.off('change').on('change', function() {
                const process = (plan?.processes || []).find(item => Number(item.id) === Number(this.value));
                if (!process) {
                    $('#logProcessInfo').text('');
                    return;
                }
                $('#logProcessInfo').text(`Machine: ${process.machine_name || '-'} | Operator: ${process.operator_name || '-'} | Planned: ${formatDateTime(process.start_date)} - ${formatDateTime(process.end_date)}`);
                $('#logActualStart').val(toDatetimeLocal(process.start_date || new Date()));
                $('#logActualEnd').val(process.end_date ? toDatetimeLocal(process.end_date) : '');
            });

            $('#productionLogModal').modal('show');
        }

        function formatDateTime(value) {
            if (!value) return '-';
            const date = new Date(String(value).replace(' ', 'T'));
            if (isNaN(date.getTime())) return '-';
            return date.toLocaleString('en-GB', {
                day: '2-digit',
                month: '2-digit',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                hour12: true
            }).toUpperCase();
        }

        $('#productionLogForm').on('submit', function(event) {
            event.preventDefault();
            const button = $('#saveProductionLogBtn');
            const errorBox = $('#productionLogError');
            button.prop('disabled', true).text('Saving...');
            errorBox.addClass('d-none').text('');

            fetch("{{ route('superadmin.production.planLog.store') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(Object.fromEntries(new FormData(this).entries()))
            })
                .then(async response => {
                    const data = await response.json();
                    if (!response.ok || !data.success) {
                        const message = data.message || Object.values(data.errors || {}).flat().join(' ') || 'Unable to save production log.';
                        throw new Error(message);
                    }
                    $('#productionLogModal').modal('hide');
                    window.location.reload();
                })
                .catch(error => {
                    errorBox.removeClass('d-none').text(error.message);
                })
                .finally(() => {
                    button.prop('disabled', false).html('<i class="fas fa-save mr-1"></i> Save Log');
                });
        });
        
        function viewLogs(planId) {
            const modal = $('#viewLogsModal');
            const content = $('#logsContent');
            content.html('<div class="text-center text-muted">Loading...</div>');
            modal.modal('show');

            fetch("{{ url('superadmin/manufacturing/production') }}/plan/" + planId + "/logs", {
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            })
                .then(r => r.json())
                .then(data => {
                    if (!data || !Array.isArray(data.logs)) {
                        content.html('<div class="text-danger">Unable to load logs.</div>');
                        return;
                    }
                    if (data.logs.length === 0) {
                        content.html('<div class="text-muted">No logs found for this plan.</div>');
                        return;
                    }
                    let html = '<div class="table-responsive"><table class="table table-sm"><thead><tr><th>#</th><th>Process</th><th>Machine</th><th>Operator</th><th>Start</th><th>End</th><th>Qty</th><th>Remarks</th><th>Logged By</th></tr></thead><tbody>';
                    data.logs.forEach((log, idx) => {
                        html += `<tr><td>${idx+1}</td><td>${log.process_name || '-'}</td><td>${log.machine_name || '-'}</td><td>${log.operator_name || '-'}</td><td>${log.actual_start || '-'}</td><td>${log.actual_end || '-'}</td><td>${log.quantity ?? '-'}</td><td>${log.remarks ?? '-'}</td><td>${log.logged_by_name || '-'}</td></tr>`;
                    });
                    html += '</tbody></table></div>';
                    content.html(html);
                })
                .catch(() => content.html('<div class="text-danger">Unable to load logs.</div>'));
        }

        function confirmMoveToQC(planId) {
            if (!confirm('Move this plan to QC? This will create QC requests for active processes.')) return;
            movePlanToQC(planId);
        }

        function movePlanToQC(planId) {
            const btn = $(`button[onclick="confirmMoveToQC(${planId})"]`);
            btn.prop('disabled', true).text('Moving...');
            fetch("{{ url('superadmin/manufacturing/production') }}/plan/" + planId + "/move-to-qc", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json'
                }
            })
                .then(async res => {
                    const data = await res.json();
                    if (!res.ok || !data.success) throw new Error(data.message || 'Failed');
                    alert('Plan moved to QC successfully.');
                    window.location.reload();
                })
                .catch(err => {
                    alert(err.message || 'Failed to move to QC');
                    btn.prop('disabled', false).text('Move to QC');
                });
        }
    </script>
@endpush