@extends('layouts.dashboard.superadminapp')
@section('title', 'Manufacturing Plan')

@section('styles')
<style>
    #productTable input.form-control { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
    #processTable .form-control { min-width: 140px; }
    #processTable .process-select { min-width: 200px; }
    #processTable .machine-select,
    #processTable .operator-select { min-width: 170px; }
    #processTable input[type="date"] { min-width: 155px; }
    #processTable .prev-process-cell .form-control { min-width: 180px; }
    #processTable .d-flex .form-control { min-width: 70px; }
    #processModal .modal-content { background: white !important; }
    #processModal.show { display: block !important; background-color: rgba(0, 0, 0, 0.5); }
    #processModal .modal-body { padding: 20px !important; }
    #processModal .form-control { background-color: #fff !important; border: 1px solid #ced4da !important; }
    .form-control:read-only { background-color: #e9ecef; }
</style>
@endsection

@section('content')

<!-- Page Heading -->
<x-layout.page-header title="UEPL | Manufacturing Plan" icon="route" iconColor="warning" />

<!-- Alerts -->
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif
@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle mr-2"></i>
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<!-- Plan Form -->
<div class="card shadow mb-4" id="route_card_section">
    <div class="card-header py-3 d-flex justify-content-between align-items-center" style="background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);">
        <h6 class="m-0 font-weight-bold text-white">
            <i class="fas fa-project-diagram mr-2"></i> Edit Manufacturing Plan
        </h6>
        <div>
            <a href="{{ route('superadmin.manufacturing.planning', ['tab' => 'planning']) }}" class="btn btn-light btn-sm mr-1">
                <i class="fa fa-arrow-left mr-1"></i> Back to Planning
            </a>
            <a href="{{ route('superadmin.routecard.details') }}" class="btn btn-light btn-sm">
                <i class="fa fa-list mr-1"></i> Plans List
            </a>
        </div>
    </div>
    <div class="card-body">
        <form id="routeForm" method="POST" action="{{ route('superadmin.planning.update', $plan->id) }}">
            @csrf
            @method('PUT')

            <!-- Row 1: Basic Info -->
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Plan ID <span class="text-danger">*</span></label>
                    <input type="text" id="planNo" name="plan_no" value="{{ $plan->plan_no }}" readonly required class="form-control">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Plan Date <span class="text-danger">*</span></label>
                    <input type="date" id="planDate" name="plan_date" required class="form-control" value="{{ $plan->plan_date ? \Carbon\Carbon::parse($plan->plan_date)->format('Y-m-d') : date('Y-m-d') }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Sales Order ID <span class="text-danger">*</span></label>
                    <input type="text" id="orderNo" name="order_no" required class="form-control" value="{{ $plan->order_no }}" readonly>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">GRN No</label>
                    <input type="text" id="grnNo" name="grn_no" class="form-control" value="{{ $plan->grn_no }}">
                </div>
            </div>

            <!-- Row 2: Order Info -->
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Order Date</label>
                    <input type="date" id="orderDate" name="order_date" class="form-control" value="{{ $plan->order_date ? \Carbon\Carbon::parse($plan->order_date)->format('Y-m-d') : '' }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label class="small font-weight-bold">Order Company Name</label>
                    <input type="text" id="companyName" name="company_name" class="form-control" value="{{ $plan->company_name }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Order Reference No</label>
                    <input type="text" id="orderRefNo" name="order_ref_no" class="form-control" value="{{ $plan->order_ref_no }}">
                </div>
            </div>

            <!-- Row 3: Company Details -->
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="small font-weight-bold">Address</label>
                    <input type="text" id="companyAddress" name="company_address" class="form-control" value="{{ $plan->company_address }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">GST No</label>
                    <input type="text" id="companyGSTN" name="company_gstn" class="form-control" value="{{ $plan->company_gstn }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Email</label>
                    <input type="email" id="companyEmail" name="company_email" class="form-control" value="{{ $plan->company_email }}">
                </div>
            </div>

            <!-- Row 4: Contact & Quotation -->
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Contact Number</label>
                    <input type="tel" id="company_phone" name="company_phone" class="form-control" value="{{ $plan->company_phone }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Quotation ID</label>
                    <input type="text" id="quotationNo" name="quotation_no" class="form-control" value="{{ $plan->quotation_no }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Quotation Date</label>
                    <input type="date" id="quotationDate" name="quotation_date" class="form-control" value="{{ $plan->quotation_date ? \Carbon\Carbon::parse($plan->quotation_date)->format('Y-m-d') : '' }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">RFQ No</label>
                    <input type="text" id="rfqNo" name="rfq_no" class="form-control" value="{{ $plan->rfq_no }}">
                </div>
            </div>

            <!-- Row 5: RFQ & Part Details -->
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">RFQ Date</label>
                    <input type="date" id="rfqDate" name="rfq_date" class="form-control" value="{{ $plan->rfq_date ? \Carbon\Carbon::parse($plan->rfq_date)->format('Y-m-d') : '' }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Part No</label>
                    <input type="text" id="partNo" name="part_no" class="form-control" value="{{ $plan->part_no }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Project Material No</label>
                    <input type="text" id="project-materialNo" name="project_material_no" class="form-control" value="{{ $plan->project_material_no }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Drawing No</label>
                    <input type="text" id="drawingNo" name="drawing_no" class="form-control" value="{{ $plan->drawing_no }}">
                </div>
            </div>

            <!-- Row 6: Product Type & Project Start -->
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Drawing Revision</label>
                    <input type="text" id="drawingRev" name="drawing_rev" class="form-control" value="{{ $plan->drawing_rev }}">
                </div>
                <div class="col-md-3 mb-3">
                    @php
                        $selectedProduct = strtolower(trim($plan->product_type ?? ''));
                    @endphp
                    <label class="small font-weight-bold">Product Type <span class="text-danger">*</span></label>
                    <select id="productType" name="product_type" class="form-control" required>
                        <option value="">Select Product Type</option>
                        @foreach ($productTypes as $pt)
                            <option value="{{ $pt->name }}" {{ strtolower(trim($pt->name)) == $selectedProduct ? 'selected' : '' }}>
                                {{ $pt->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Expected Project Start <span class="text-danger">*</span></label>
                    <input type="date" id="projectStart" name="project_start_date" required class="form-control" value="{{ $plan->project_start_date ? \Carbon\Carbon::parse($plan->project_start_date)->format('Y-m-d') : '' }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="small font-weight-bold">Description</label>
                    <textarea id="description" name="description" rows="1" class="form-control">{{ $plan->description }}</textarea>
                </div>
            </div>

            <hr>
            <div class="table-responsive">
                <table id="processTable" class="table table-bordered table-sm">
                    <thead class="thead-light">
                        <tr>
                            <th width="50">Sl No</th>
                            <th>Process</th>
                            <th width="120">Source</th>
                            <th>Previous Process</th>
                            <th>Machine</th>
                            <th>Operator</th>
                            <th>Cycle Time (h:m)</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th width="50"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($planProcesses as $idx => $proc)
                            <tr data-id="{{ $proc->id }}">
                                <td class="sl-no">{{ $idx + 1 }}</td>
                                <td>
                                    <select name="processes[{{ $idx }}][process]" class="form-control process-select" required>
                                        <option value="">Select Process</option>
                                        @foreach($processes as $process)
                                            <option value="{{ $process->id }}" {{ (string) $process->id === (string) $proc->process ? 'selected' : '' }}>
                                                {{ $process->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="text" name="processes[{{ $idx }}][process_other]" class="form-control mt-1 process-other" style="display:none;" placeholder="Other process" value="{{ $proc->process_other }}">
                                </td>
                                <td>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" name="processes[{{ $idx }}][source]" value="inhouse" class="form-check-input" {{ ($proc->source ?? 'inhouse') === 'inhouse' ? 'checked' : '' }}>
                                        <label class="form-check-label small">Inhouse</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" name="processes[{{ $idx }}][source]" value="outsourced" class="form-check-input" {{ ($proc->source ?? '') === 'outsourced' ? 'checked' : '' }}>
                                        <label class="form-check-label small">Outsourced</label>
                                    </div>
                                </td>
                                <td class="prev-process-cell">
                                    <input type="text" name="processes[{{ $idx }}][previous_process]" class="form-control" value="{{ $proc->previous_process }}">
                                </td>
                                <td>
                                    <select name="processes[{{ $idx }}][machine]" class="form-control machine-select">
                                        <option value="">Select Machine..</option>
                                        @foreach($machines as $machine)
                                            <option value="{{ $machine->id }}" {{ (string) $machine->id === (string) $proc->machine ? 'selected' : '' }}>
                                                {{ $machine->machine_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <select name="processes[{{ $idx }}][operator]" class="form-control operator-select">
                                        <option value="">Select Operator</option>
                                        @foreach($processes as $process)
                                            <option value="{{ $process->id }}" {{ (string) $process->id === (string) $proc->operator ? 'selected' : '' }}>
                                                {{ $process->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <input type="number" name="processes[{{ $idx }}][cycle_hours]" class="form-control" placeholder="H" min="0" step="1" value="{{ $proc->cycle_hours }}">
                                        <span class="mx-1">:</span>
                                        <input type="number" name="processes[{{ $idx }}][cycle_minutes]" class="form-control" placeholder="M" min="0" max="59" step="1" value="{{ $proc->cycle_minutes }}">
                                    </div>
                                </td>
                                <td>
                                    <input type="date" name="processes[{{ $idx }}][start_date]" class="form-control" value="{{ $proc->start_date ? \Carbon\Carbon::parse($proc->start_date)->format('Y-m-d') : '' }}">
                                </td>
                                <td>
                                    <input type="date" name="processes[{{ $idx }}][end_date]" class="form-control" value="{{ $proc->end_date ? \Carbon\Carbon::parse($proc->end_date)->format('Y-m-d') : '' }}">
                                </td>
                                <td>
                                    <button class="btn btn-danger btn-sm" type="button" onclick="deleteProcessRow(this)"><i class="fa fa-trash"></i></button>
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mb-3">
                <button type="button" class="btn btn-primary btn-sm" id="addProcessRowBtn">
                    <i class="fa fa-plus mr-1"></i> Add Row
                </button>
            </div>

            <hr>
            <!-- Action Buttons -->
            <div class="d-flex justify-content-end">
                <button type="submit" id="save-RC" class="btn btn-success btn-sm mr-2">
                    <i class="fa fa-save mr-1"></i>
                    Update Plan
                </button>
                <a href="{{ route('superadmin.routecard.details') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fa fa-times mr-1"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script>
let rowIdx = {{ $planProcesses->count() }};
const processesData = {!! json_encode($processes) !!};
const machinesData = {!! json_encode($machines) !!};
$('#addProcessRowBtn').on('click', function() {
    let tbody = $('#processTable tbody');
    let processOptions = `
        <option value="">Select Process</option>
        @foreach($processes as $process)
            <option value="{{ $process->id }}">{{ $process->name }}</option>
        @endforeach
    `;

    let machineOptions = `
        <option value="">Select Machine..</option>
    `;

let operatorOptions = `
    <option value="">Select Operator</option>
`;

    let newRow = `
        <tr class="process-row">
            <td class="sl-no">${rowIdx + 1}</td>
            <td>
                <select name="processes[${rowIdx}][process]" class="form-control process-select" required>
                    ${processOptions}
                </select>
                <input type="text" name="processes[${rowIdx}][process_other]" class="form-control mt-1 process-other" style="display:none;" placeholder="Other process">
            </td>
            <td>
                <div class="form-check form-check-inline">
                    <input type="radio" name="processes[${rowIdx}][source]" value="inhouse" class="form-check-input" checked>
                    <label class="form-check-label small">Inhouse</label>
                </div>
                <div class="form-check form-check-inline">
                    <input type="radio" name="processes[${rowIdx}][source]" value="outsourced" class="form-check-input">
                    <label class="form-check-label small">Outsourced</label>
                </div>
            </td>
            <td class="prev-process-cell">
                <input type="text" name="processes[${rowIdx}][previous_process]" class="form-control">
            </td>
            <td>
                <select name="processes[${rowIdx}][machine]" class="form-control machine-select">
                    ${machineOptions}
                </select>
            </td>
            <td>
                <select name="processes[${rowIdx}][operator]" class="form-control operator-select">
                    ${operatorOptions}
                </select>
            </td>
            <td>
                <div class="d-flex align-items-center">
                    <input type="number" name="processes[${rowIdx}][cycle_hours]" class="form-control" placeholder="H" min="0" step="1">
                    <span class="mx-1">:</span>
                    <input type="number" name="processes[${rowIdx}][cycle_minutes]" class="form-control" placeholder="M" min="0" max="59" step="1">
                </div>
            </td>
            <td>
                <input type="date" name="processes[${rowIdx}][start_date]" class="form-control" placeholder="DD-MM-YYYY">
            </td>
            <td>
                <input type="date" name="processes[${rowIdx}][end_date]" class="form-control" placeholder="DD-MM-YYYY">
            </td>
            <td>
                <button class="btn btn-danger btn-sm" type="button" onclick="deleteProcessRow(this)"><i class="fa fa-trash"></i></button>
            </td>
        </tr>
    `;
    tbody.append(newRow);
    rowIdx++;
});

// Event listener for process changes
$(document).on('change', '.process-select', function() {
    const processId = $(this).val();
    const row = $(this).closest('tr');
    const machineSelect = row.find('.machine-select');
    
    if (processId) {
        const process = processesData.find(p => p.id == processId);
        let machineOptions = '<option value="">Select Machine..</option>';
        
        if (process && process.machines && process.machines.length > 0) {
            process.machines.forEach(machine => {
                const mCode = machine.machine_id || machine.machine_code || '';
                const displayName = mCode ? `${machine.machine_name} (${mCode})` : machine.machine_name;
                machineOptions += `<option value="${machine.id}">${displayName}</option>`;
            });
        }
        machineSelect.html(machineOptions);
    } else {
        machineSelect.html('<option value="">Select Machine..</option>');
    }
});

// Event listener for machine changes to filter operators
$(document).on('change', '.machine-select', function() {
    const machineId = $(this).val();
    const row = $(this).closest('tr');
    const operatorSelect = row.find('.operator-select');
    
    if (machineId) {
        const machine = machinesData.find(m => m.id == machineId);
        let opOptions = '<option value="">Select Operator</option>';
        
        if (machine && machine.operators && machine.operators.length > 0) {
            machine.operators.forEach(op => {
                opOptions += `<option value="${op.id}">${op.name}</option>`;
            });
        }
        operatorSelect.html(opOptions);
    } else {
        operatorSelect.html('<option value="">Select Operator</option>');
    }
});

// Function to check overlapping
function checkOverlap(row, triggeringElement) {
    const rowIdxLocal = row.index();
    const machineId = row.find('.machine-select').val();
    const operatorId = row.find('.operator-select').val();
    const startDate = row.find('input[name*="[start_date]"]').val();
    const endDate = row.find('input[name*="[end_date]"]').val();
    const currentId = row.attr('data-id'); // For edit mode

    if (!startDate || !endDate) return;

    const start = new Date(startDate);
    const end = new Date(endDate);

    // 0. Check against Project Start Date
    const projectStartDateVal = $('#projectStart').val();
    if (projectStartDateVal) {
        const projectStart = new Date(projectStartDateVal);
        projectStart.setHours(0,0,0,0);
        const compareStart = new Date(start);
        compareStart.setHours(0,0,0,0);

        if (compareStart < projectStart) {
            alert(`Invalid Date: Process Start Date cannot be earlier than the Project Start Date (${projectStartDateVal}).`);
            $(triggeringElement).val('').attr('value', '');
            return;
        }
    }

    // 1. Check local table rows
    let localConflict = false;
    $('#processTable tbody tr').each(function(idx) {
        if (idx === rowIdxLocal) return; 

        const otherMachineId = $(this).find('.machine-select').val();
        const otherOperatorId = $(this).find('.operator-select').val();
        const otherStartDate = $(this).find('input[name*="[start_date]"]').val();
        const otherEndDate = $(this).find('input[name*="[end_date]"]').val();

        if (otherStartDate && otherEndDate) {
            const otherStart = new Date(otherStartDate);
            const otherEnd = new Date(otherEndDate);
            const datesOverlap = (start <= otherEnd && end >= otherStart);

            if (datesOverlap) {
                const slNo = $(this).find('.sl-no').text().trim();
                if (machineId && otherMachineId && machineId === otherMachineId) {
                    alert(`Local Conflict: Machine is already selected in Sl No ${slNo} for this period.`);
                    localConflict = true;
                    $(triggeringElement).val('').attr('value', '');
                    return false;
                }
                if (operatorId && otherOperatorId && operatorId === otherOperatorId) {
                    alert(`Local Conflict: Operator is already selected in Sl No ${slNo} for this period.`);
                    localConflict = true;
                    $(triggeringElement).val('').attr('value', '');
                    return false;
                }
            }
        }
    });

    if (localConflict) return;

    // 2. Check Database Overlap
    if ((machineId || operatorId)) {
        $.ajax({
            url: "{{ route('superadmin.planning.checkOverlap') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                machine_id: machineId,
                operator_id: operatorId,
                start_date: startDate,
                end_date: endDate,
                current_process_id: currentId
            },
            success: function(response) {
                if (!response.success) {
                    let msg = "";
                    if (response.conflicts.machine) msg += response.conflicts.machine + "\n";
                    if (response.conflicts.operator) msg += response.conflicts.operator;
                    alert("Database Conflict Detected:\n" + msg);
                    $(triggeringElement).val('').attr('value', '');
                }
            }
        });
    }
}

$(document).on('change', '.machine-select, .operator-select, input[name*="[start_date]"], input[name*="[end_date]"]', function() {
    const row = $(this).closest('tr');
    checkOverlap(row, this);
});

// Initialize filtering for existing rows
$(document).ready(function() {
    $('.process-select').each(function() {
        const processId = $(this).val();
        const row = $(this).closest('tr');
        if (processId) {
            const machineSelect = row.find('.machine-select');
            const selectedMachineId = machineSelect.attr('data-selected-id') || machineSelect.val();
            
            const process = processesData.find(p => p.id == processId);
            if (process && process.machines && process.machines.length > 0) {
                let machineOptions = '<option value="">Select Machine..</option>';
                process.machines.forEach(machine => {
                    const selected = (machine.id == selectedMachineId) ? 'selected' : '';
                    const mCode = machine.machine_id || machine.machine_code || '';
                    const displayName = mCode ? `${machine.machine_name} (${mCode})` : machine.machine_name;
                    machineOptions += `<option value="${machine.id}" ${selected}>${displayName}</option>`;
                });
                machineSelect.html(machineOptions);
            } else {
                machineSelect.html('<option value="">Select Machine..</option>');
            }
        }
    });

    // Also initialize operators based on already selected machines
    $('.machine-select').each(function() {
        const machineId = $(this).val();
        const row = $(this).closest('tr');
        if (machineId) {
            const operatorSelect = row.find('.operator-select');
            const selectedOperatorId = operatorSelect.attr('data-selected-id') || operatorSelect.val();
            
            const machine = machinesData.find(m => m.id == machineId);
            if (machine && machine.operators && machine.operators.length > 0) {
                let opOptions = '<option value="">Select Operator</option>';
                machine.operators.forEach(op => {
                    const selected = (op.id == selectedOperatorId) ? 'selected' : '';
                    opOptions += `<option value="${op.id}" ${selected}>${op.name}</option>`;
                });
                operatorSelect.html(opOptions);
            }
        }
    });
});
</script>
@endsection