@extends('layouts.app')

@section('title', 'Job Info')

@section('content')
    <style>
        .piece-details {
            text-align: center;
            padding: 15px;
        }

        .piece-details h4 {
            font-size: 1.5rem;
            font-weight: 500;
            color: #red;
            margin-bottom: 10px;
        }

        .piece-length {
            font-size: 1.2rem;
            font-weight: bold;
            color: #343a40;
        }

        .no-piece {
            text-align: center;
            padding: 20px;
            color: #dc3545;
            font-weight: bold;
            font-size: 1.2rem;
        }
    </style>

    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Job Information</h4>
                <h6>View all job info here</h6>
            </div>
            <div class="page-btn">
                <a href="javascript:void(0);" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#add-job-info">
                    <i data-feather="plus-circle" class="me-2"></i>Add New
                </a>
            </div>
        </div>
        <div class="card table-list-card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <a href="javascript:void(0);" class="btn btn-searchset">
                                <i data-feather="search" class="feather-search"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="table-responsive product-list">
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th class="no-sort">
                                    <label class="checkboxs">
                                        <input type="checkbox" id="select-all" />
                                        <span class="checkmarks"></span>
                                    </label>
                                </th>
                                <th>Job No</th>
                                <th>Job Address</th>
                                <th>Site</th>
                                <th>Length (mm)</th>
                                {{-- <th>St ock Length (pc)</th> --}}
                                <th>Created At</th>
                                <th>Waste's</th>
                                <th class="no-sort">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($jobs as $job)
                                <tr>
                                    <td>
                                        <label class="checkboxs">
                                            <input type="checkbox" />
                                            <span class="checkmarks"></span>
                                        </label>
                                    </td>
                                    <td>{{ \Str::limit($job->job_no ?? 'N/A', 100) }}</td>
                                    <td>{{ \Str::limit($job->address ?? 'N/A', 100) }}</td>
                                    <td>{{ \Str::limit($job->site ?? 'N/A', 100) }}</td>
                                    <td>{{ \Str::limit($job->length ?? 'N/A', 100) }}</td>

                                    {{-- Stock Length (pc) Column --}}
                                    {{-- <td>
                                        @if (isset($job->used_pieces) && count($job->used_pieces) > 0)
                                            @foreach ($job->used_pieces as $piece)
                                                {{ \Str::limit($piece['length'], 100) }} / {{ $piece['qty'] }}pc <br>
                                            @endforeach
                                        @else
                                            N/A
                                        @endif
                                    </td> --}}

                                    <td>{{ $job->created_at ? $job->created_at->format('Y-m-d') : 'N/A' }}</td>
                                    <td>
                                        <a class="btn btn-danger view-wastes"
                                            href="{{ route('job_details', ['id' => $job->id]) }}">
                                            View
                                        </a>
                                        {{-- <button class="btn btn-danger view-wastes" data-job='@json($job)'
                                            data-bs-toggle="modal" data-bs-target="#view-wastes-modal">
                                            View
                                        </button> --}}
                                    </td>

                                    <td class="action-table-data">
                                        <div class="edit-delete-action" style="margin-top: 15px">
                                            <a class="ml-1 p-2" href="{{ route('delete_job', ['id' => $job->id]) }}">
                                                <i data-feather="trash-2" class="feather-trash-2"></i>
                                            </a>
                                            <a onclick="getData({{ $job }})" href="javascript:void(0);"
                                                class="me-2 p-2 edit-stock-btn">
                                                <i data-feather="edit" class="feather-edit"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>


                </div>
            </div>
        </div>
    </div>

    <!-- Add Job Modal -->
    <div class="modal fade" id="add-job-info">
        <div class="modal-dialog modal-dialog-centered custom-modal-two">
            <div class="modal-content">
                <div class="content">
                    <div class="modal-header border-0 custom-modal-header">
                        <h4>Create Job</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="{{ route('add_job') }}">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Job No</label>
                                <input name="job_no" type="text" class="form-control" />
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Job Address</label>
                                <input name="address" type="text" class="form-control" />
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Site</label>
                                <input name="site" type="text" class="form-control" />
                            </div>

                            <div id="length-fields">
                                <div class="mb-3 length-input-group">
                                    <label class="form-label">Length (mm)</label>
                                    <div class="d-flex align-items-center">
                                        <input name="length[]" type="text" class="form-control length-input"
                                            oninput="validateLength(this)" />
                                        <button type="button" class="btn btn-danger btn-sm ms-2 remove-length">
                                            <i data-feather="trash-2"></i>
                                        </button>
                                    </div>
                                    <div class="text-danger validation-message" style="display: none;">
                                        Length above 6000 is not allowed.
                                    </div>
                                </div>
                            </div>

                            <button type="button" id="add-length-field"
                                class="btn btn-secondary btn-sm mb-3 add-length-field">
                                <i data-feather="plus-circle"></i> Add Length
                            </button>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-submit">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="edit-job-info">
        <div class="modal-dialog modal-dialog-centered custom-modal-two">
            <div class="modal-content">
                <div class="content">
                    <div class="modal-header border-0 custom-modal-header">
                        <h4>Edit Job</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="{{ route('edit_job') }}">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Job No</label>
                                <input name="job_no" type="text" class="form-control" />
                                <input name="job_id" type="text" class="form-control" />
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Job Address</label>
                                <input name="address" type="text" class="form-control" />
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Site</label>
                                <input name="site" type="text" class="form-control" />
                            </div>

                            <div class="length-fields" id="length-fields-edit">
                                <div class="mb-3 length-input-group">
                                    <label class="form-label">Length (mm)</label>
                                    <div class="d-flex align-items-center">
                                        <input name="length[]" type="text" class="form-control length-input"
                                            oninput="validateLength(this)" />
                                        <button type="button" class="btn btn-danger btn-sm ms-2 remove-length">
                                            <i data-feather="trash-2"></i>
                                        </button>
                                    </div>
                                    <div class="text-danger validation-message" style="display: none;">
                                        Length above 6000 is not allowed.
                                    </div>
                                </div>
                            </div>

                            <button type="button" id="add-length"
                                class="btn btn-secondary btn-sm mb-3 add-length-field">
                                <i data-feather="plus-circle"></i> Add Length
                            </button>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-submit">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Waste Details Modal -->
    <div class="modal fade" id="view-wastes-modal" tabindex="-1" aria-labelledby="viewWastesLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewWastesLabel">Waste Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul id="waste-details-list" class="list-group">
                        <!-- Waste details will be populated here dynamically -->
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        function getData(jobData) {
            // Parse the JSON data
            const data = jobData;

            // Set the job data in the modal
            $('#edit-job-info input[name="job_no"]').val(data.job_no);
            $('#edit-job-info input[name="address"]').val(data.address);
            $('#edit-job-info input[name="site"]').val(data.site);
            $('#edit-job-info input[name="job_id"]').val(data.id);

            // Clear existing length fields
            $('#length-fields-edit').html('');

            // Add length fields dynamically based on the "length" array in the data
            const lengths = JSON.parse(data.length); // Parse the lengths as JSON
            lengths.forEach(length => {
                const lengthField = `
            <div class="mb-3 length-input-group">
                <label class="form-label">Length (mm)</label>
                <div class="d-flex align-items-center">
                    <input name="length[]" type="text" class="form-control length-input"
                        value="${length}" oninput="validateLength(this)" />
                        <button type="button" class="btn btn-danger btn-sm ms-2 remove-length">
                    <i data-feather="trash-2"></i>
                </button>
                </div>
                
                <div class="text-danger validation-message" style="display: none;">
                    Length above 6000 is not allowed.
                </div>
            </div>
        `;
                $('#length-fields-edit').append(lengthField);
            });

            // Now show the modal
            $('#edit-job-info').modal('show');
        }

        $(document).ready(function() {
            // When the "View" button is clicked
            $(document).on('click', '.view-wastes', function() {
                const job = $(this).data('job'); // Retrieve the job data
                const jobLengths = JSON.parse(job.length); // Parse lengths array
                const usedPieces = job.stock_used;
                const wastes = job.wastes;

                const wasteDetailsList = $('#waste-details-list');
                wasteDetailsList.empty(); // Clear any existing content

                if (jobLengths.length > 0) {
                    // Create a table for Job Length and Used Pieces
                    let usedPiecesTable = `
                <h5 class="mb-3">Used Pieces</h5>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Job Length</th>
                            <th>Used Pieces</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
                    for (var i = 0; i < jobLengths.length; i++) {
                        usedPiecesTable += `
                    <tr>
                        <td>${jobLengths[i]} mm</td>
                        <td>${usedPieces[i]?.stock?.length || '0'} mm / ${usedPieces[i]?.cost || '0'}pc</td>
                    </tr>
                `;
                    }
                    usedPiecesTable += `
                    </tbody>
                </table>
            `;
                    wasteDetailsList.append(usedPiecesTable);

                    // Create a table for Waste Details
                    let wasteDetailsTable = `
                <h5 class="mt-4 mb-3">Waste Details</h5>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Job Length</th>
                            <th>Waste Length</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
                    for (var i = 0; i < jobLengths.length; i++) {
                        wasteDetailsTable += `
                    <tr>
                        <td>${jobLengths[i]} mm</td>
                        <td>${wastes[i]?.length || '0'} mm</td>
                    </tr>
                `;
                    }
                    wasteDetailsTable += `
                    </tbody>
                </table>
            `;
                    wasteDetailsList.append(wasteDetailsTable);
                }

                $('#view-wastes-modal').modal('show');
            });
        });
    </script>
    {{-- <script>
        $(document).ready(function() {
            // When the "View" button is clicked
            $(document).on('click', '.view-wastes', function() {
                const job = $(this).data('job'); // Retrieve the job data
                const jobLengths = JSON.parse(job.length); // Parse lengths array
                const usedPieces = job.used_pieces;
                const wastes = job.wastes;

                const wasteDetailsList = $('#waste-details-list');
                wasteDetailsList.empty(); // Clear any existing content

                if (jobLengths.length > 0) {
                    // Create a table for Job Length and Used Pieces
                    let usedPiecesTable = `
                <h5 class="mb-3">Used Pieces</h5>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Job Length</th>
                            <th>Used Pieces</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
                    for (var i = 0; i < jobLengths.length; i++) {
                        usedPiecesTable += `
                    <tr>
                        <td>${jobLengths[i]} mm</td>
                        <td>${usedPieces[i]?.length || 'N/A'} mm / ${usedPieces[i]?.qty || 'N/A'}pc</td>
                    </tr>
                `;
                    }
                    usedPiecesTable += `
                    </tbody>
                </table>
            `;
                    wasteDetailsList.append(usedPiecesTable);

                    // Create a table for Waste Details
                    let wasteDetailsTable = `
                <h5 class="mt-4 mb-3">Waste Details</h5>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Job Length</th>
                            <th>Waste Length</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
                    for (var i = 0; i < jobLengths.length; i++) {
                        wasteDetailsTable += `
                    <tr>
                        <td>${jobLengths[i]} mm</td>
                        <td>${wastes[i]?.length || 'N/A'} mm</td>
                    </tr>
                `;
                    }
                    wasteDetailsTable += `
                    </tbody>
                </table>
            `;
                    wasteDetailsList.append(wasteDetailsTable);
                }

                $('#view-wastes-modal').modal('show');
            });
        });
    </script> --}}


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const lengthFieldsContainer = document.getElementById("length-fields");
            const lengthFieldEdit = document.getElementById("length-fields-edit");
            const addLengthFieldButton = document.getElementById("add-length-field");
            const addLengthField = document.getElementById("add-length");

            // Add new length field
            addLengthFieldButton.addEventListener("click", function() {
                const newField = document.createElement("div");
                newField.className = "mb-3 length-input-group";
                newField.innerHTML = `
            <label class="form-label">Length (mm)</label>
            <div class="d-flex align-items-center">
                <input name="length[]" type="text" class="form-control length-input" oninput="validateLength(this)" />
                <button type="button" class="btn btn-danger btn-sm ms-2 remove-length">
                    <i data-feather="trash-2"></i>
                </button>
            </div>
            <div class="text-danger validation-message" style="display: none;">
                Length above 6000 is not allowed.
            </div>
        `;
                lengthFieldsContainer.appendChild(newField);
                feather.replace(); // Update Feather icons
            });
            addLengthField.addEventListener("click", function() {
                
                const newField = document.createElement("div");
                newField.className = "mb-3 length-input-group";
                newField.innerHTML = `
            <label class="form-label">Length (mm)</label>
            <div class="d-flex align-items-center">
                <input name="length[]" type="text" class="form-control length-input" oninput="validateLength(this)" />
                <button type="button" class="btn btn-danger btn-sm ms-2 remove-length">
                    <i data-feather="trash-2"></i>
                </button>
            </div>
            <div class="text-danger validation-message" style="display: none;">
                Length above 6000 is not allowed.
            </div>
        `;
        lengthFieldEdit.appendChild(newField);
                feather.replace(); // Update Feather icons
            });

            // Remove length field
            lengthFieldEdit.addEventListener("click", function(e) {
                if (e.target.closest(".remove-length")) {
                    e.target.closest(".length-input-group").remove();
                }
            });
        });

        // Validate input length and show message if above 6000
        function validateLength(inputField) {
            const validationMessage = inputField.closest('.length-input-group').querySelector('.validation-message');
            if (inputField.value > 6000) {
                validationMessage.style.display = 'block';
                inputField.value = ''; // Clear invalid value
            } else {
                validationMessage.style.display = 'none';
            }
        }
    </script>
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/home.css') }}">
@endpush