@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

<!-- Route Card 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> Create Manufacturing Plan
        </h6>
        <div>
            <a href="{{ route('superadmin.manufacturing.planning', ['tab' => empty($routeCard) ? 'r2plan' : '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">
        @if (isset($routeCard) && !empty($routeCard))
            <input type="hidden" id="routeCard" value="{{ json_encode($routeCard) }}">
        @endif

        <form id="routeForm" method="POST"
            action="{{ route('superadmin.planning.store') }}"
            >
            @csrf
            @if (isset($routeCard) && !empty($routeCard))
                @method('PUT')
            @endif

            <!-- 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>
                    @if (isset($routeCard) && !empty($routeCard))
                        <input type="hidden" name="id" value="{{ $routeCard->id }}">
                        <input type="text" id="planNo" name="plan_no" value="{{ $routeCard->plan_no }}" readonly required class="form-control">
                        @else
                        <input type="text" id="planNo" name="plan_no" value="{{ $nextRouteNo }}" readonly required class="form-control">
                        @endif
                        <input type="hidden" name="sales_order_id" value="{{ $saleOrdersDetail[0]->id }}">
                </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="2026-06-09">
                </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="" 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="">
                </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="{{ \Carbon\Carbon::parse($saleOrdersDetail[0]->sales_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="">
                </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="">
                </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="">
                </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="">
                </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="">
                </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="">
                </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="">
                </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="{{ \Carbon\Carbon::parse($saleOrdersDetail[0]->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="">
                </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="{{ \Carbon\Carbon::parse($saleOrdersDetail[0]->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="">
                </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="">
                </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="">
                </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="">
                </div>
                <div class="col-md-3 mb-3">
                    @php
                        $selectedProduct = strtolower(trim($saleOrdersDetail[0]->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">
                </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"></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>
                       
                    </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>
                    {{ isset($routeCard) && !empty($routeCard) ? 'Save Plan' : 'Save & Add Process' }}
                </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>
    const processesData = {!! json_encode($processes) !!};
    const machinesData = {!! json_encode($machines) !!};
    const processCount = {{ !empty($routeCardProcesses) ? $routeCardProcesses->count() : 'null' }};

    function fillFormData(fromSelector, sourceData, mappedKeys, callback=(v)=>(v)) {
        [...(new FormData(fromSelector[0])).entries()].map(([key, value]) => {
            let newValue = callback(dotwalk(sourceData, mappedKeys[key] || key) || sourceData[key] || value, mappedKeys[key] || key);
            fromSelector.find(`[name="${key}"]`).val(newValue);
        });
    }

    const mappedKeys = {
        "order_date": "sales_order_date",
        "order_ref_no": "rfq_no",
        "route_date": "rfq_date",
        "company_name": "customer.company",
    };
    const mappedValues = {
        "project_start_date": (v) => v ? v.split(' ')[0] : '',
    };

    const mappedValueResolver = (v, k) => mappedValues[k] ? mappedValues[k](v) : v;

    document.addEventListener('DOMContentLoaded', function() {
        if (processCount === 0) {
            setTimeout(() => {
                $("#route_card_process_list #addProcess").trigger("click");
            }, 500);
        }

        const saleOrder = {!! json_encode($saleOrder) !!};

        let routeCard = null;
        if ($("#route_card_section #routeCard").length) {
            routeCard = JSON.parse($("#route_card_section #routeCard").val());
            fillFormData($("#routeForm"), routeCard, mappedKeys, mappedValueResolver);
            console.log("Route Card Data:", {routeCard, saleOrder});
        }

        if (saleOrder) {
            $("#orderNo").val(saleOrder.sales_order_no);
            setTimeout(() => $("#orderNo").trigger("change"), 0);
        }

        $("#orderNo").on('change', function() {
            const orderNo = $(this).val();
            if (orderNo) {
                const orderData = $(this).find('option:selected').data('order');
                console.log("Selected Order Data:", orderData, routeCard);
                if (!routeCard) {
                    fillFormData($("#routeForm"), orderData, mappedKeys, mappedValueResolver);
                }
            }
        });

        $('#routeForm').on('submit', function(e) {
            e.preventDefault();
            this.submit();
        });

        // 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');
            
            console.log("Process changed:", processId);

            if (processId) {
                const process = processesData.find(p => p.id == processId);
                console.log("Found process data:", process);

                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>`;
                    });
                } else {
                    console.warn("No machines found for process ID:", processId);
                }
                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();

            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 (unsaved) rows first
            let localConflict = false;
            $('#processTable tbody tr').each(function(idx) {
                if (idx === rowIdxLocal) return; // Skip current row

                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);

                    // Check date overlap
                    const datesOverlap = (start <= otherEnd && end >= otherStart);

                    if (datesOverlap) {
                        const slNo = $(this).find('.sl-no').text().trim();
                        // ONLY conflict if machine matches AND both have a machine selected
                        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;
                        }
                        // ONLY conflict if operator matches AND both have an operator selected
                        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
                    },
                    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);
        });
    });


let rowIdx = 1;
    $('#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 }} - ({{ $process->productType->name ?? 'N/A' }})</option>
    @endforeach
`;

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

let operatorOptions = `
    <option value="">Select Operator</option>
`;
    let newRow = `
        <tr>
            <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"></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" min="0" step="1">
            </td>
            <td>
            <input type="date" name="processes[${rowIdx}][end_date]" class="form-control" placeholder="DD-MM-YYYY" min="0" step="1">
            </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++;
    //updateSlNos();
    //updateProcessDropdowns($('#productType').val());
    //disableDuplicateMachines();
    //updateSourceFields();
   // updatePreviousProcessDropdowns();
});
</script>
@endsection