@extends('layouts.app')
@section('title')
    Electrical Continuity Test View
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('electrical-continuity-test.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        table thead th,
        table tbody td {
            width: 350px !important;

        }

        .modal-body {
            width: 100%;
        }
    </style>

<div class="card">
    
        <div class="card-body">
            <input type="hidden" name="electrical_id" class="electrical_id" id="electrical_id">

            <div class="row">
                <h5> Production Detail</h5>
            </div>
            <br>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="ref_no" class="form-label col-4">Ref No :</label>
                        <div class="col-6">
                            <input type="text" name="ref_no" id="ref_no" class="form-control rounded-4 ref_no"
                                value="{{ $electrical_continuity->ref_no }}" readonly>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12">
                    <div class="row align-items-center">
                        <label for="date" class="form-label col-4">Date :</label>
                        <div class="col-6">
                            <input type="text" name="date" id="date" class="form-control datepicker-current-date rounded-4"
                                value="{{ $electrical_continuity->date }}">
                        </div>
                    </div>
                </div>



                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="product_select" class="form-label col-4">Part No :</label>
                        <div class="col-6">
                            <select name="product_id" id="product_select" onchange="product_change()"
                                class="form-select rounded-4 part_no" style="width: 100% !important;">
                                <option value="{{ $electrical_continuity->product_id ?? '' }}" selected>
                                    {{ $electrical_continuity->products->part_no ?? '' }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="insepector" class="form-label col-4">Inspector :</label>
                        <div class="col-6">
                            <select name="user_id" id="insepector" class="form-select rounded-4 insepector"
                                style="width: 100% !important;">
                                <option value="{{ $electrical_continuity->user_id ?? '' }}" selected>
                                    {{ $electrical_continuity->user->user_name ?? '' }}/{{$electrical_continuity->user->employee_no ?? ''}}
                                </option>

                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="part_name" class="form-label col-4">Part Name</label>
                        <div class="col-6">
                            <input type="text" readonly name="part_name" id="part_name"
                                placeholder="auto based on database" class="form-control rounded-4 part_name"
                                value="{{ $electrical_continuity->products->part_name }}">
                        </div>
                    </div>
                </div>


            </div>

            <hr class="mt-3">
            <h5 class="mt-3">QC Output</h5>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="qty_qc" class="form-label col-4">Qty QC:</label>
                        <div class="col-6">
                            <input type="text" class="form-control rounded-4 qty_qc" value="{{ $electrical_continuity->qty_qc }}" readonly id="qty_qc" name="qty_qc">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="qty_rejected" class="form-label col-4">Qty Rejected:</label>
                        <div class="col-6">
                            <input type="text" class="form-control rounded-4 qty_rejected" value="{{ $electrical_continuity->qty_reject }}" readonly id="qty_rejected"
                                name="qty_rejected">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="table-responsive">
                    <table class="table table-bordered m-0" id="productTable">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Time</th>
                                <th>Serial No</th>
                                <th>Status</th>
                                <th>Reject Detail</th>
                                <th>Interval (s)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($electrical_continuity_details))
                            @foreach ($electrical_continuity_details as $key => $data)
                            <tr>
                                <td>{{ $loop->iteration }}</td>

                                <td>
                                    <input type="text" readonly name="details[{{ $key }}][time]" class="form-control form-control-sm time" value="{{ $data->time }}" />
                                </td>

                                <td>
                                    <input type="text" readonly name="details[{{ $key }}][serial_no]" class="form-control form-control-sm decode_text" value="{{ $data->serial_no }}" />
                                </td>

                                <td>
                                    <select name="details[{{ $key }}][status]" class="form-select status" required>
                                        <option value="pass" @selected($data->status == "pass")>pass</option>
                                        <option value="reject" @selected($data->status == "reject")>reject</option>
                                    </select>
                                </td>

                                <td>
                                    <button @disabled($data->status == "pass") type="button" class="btn btn-info btn-sm openRejectionModal" data-bs-toggle="modal" data-id="{{ $loop->iteration }}" data-bs-target="#rejectionModal">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                    <input type="hidden" class="jsonData" name="details[{{ $key }}][json_data]" value="{{ $data->json_data }}">
                                </td>

                                <td>
                                    <input type="text" readonly name="details[{{ $key }}][interval]" class="form-control form-control-sm interval" value="{{ $data->interval }}" />
                                </td>

                               
                            </tr>
                            @endforeach
                            @endif


                        </tbody>
                    </table>
                </div>
            </div>

            <div class="modal fade" id="rejectionModal" tabindex="-1" aria-labelledby="rejectionModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="rejectionModalLabel">Rejection</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                id="closeModalBtn"></button>
                        </div>
                        <div class="modal-body">
                            <h5>Time:</h5>
                            <table class="table table-bordered w-100" id="rejectionDetailsTable">
                                <thead>
                                    <tr>
                                        <th>Rejection Type</th>
                                        <th>Comments</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="rejectiontype">
                                            <select name="rejectionType" class=" form-control form-control-sm">
                                                <option value="" disabled selected>Please Select</option>
                                                <option value="qc" selected>QC</option>

                                                @foreach ($rejectiontypes as $type)
                                                <option value="{{ $type->id }}">
                                                    {{ $type->type }}
                                                </option>
                                                @endforeach
                                                <!-- Add more options as needed -->
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" name="comments"
                                                class="form-control form-control-sm comments"
                                                value="{{ old('comments') }}" />
                                        </td>
                                    </tr>
                                    <!-- Additional rows will be added dynamically -->
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            
                        </div>
                    </div>
                </div>
            </div>



            <br>
            <div class="row">
                <h5>Summary</h5>
            </div>
            <br>
            <div class="row">
                <div class="table-responsive">
                    <table class="table table-bordered m-0" id="rejectedItemsTable">
                        <thead>
                            <tr>
                                <th>Reject Type</th>
                                <th>Remarks</th>

                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($electrical_continuity_details_summary))
                            @foreach ($electrical_continuity_details_summary as $key => $data)
                            @php
                            if ($data->rejection_type == 'qc') {
                            $reject_type = "QC";
                            } else {
                            $reject = \App\Models\TypeOfRejection::find($data->rejection_type);
                            $reject_type = $reject ? $reject->type : ''; // Handle case where the rejection type is not found
                            }
                            @endphp
                            <tr>
                                <td>{{ $reject_type ?? '' }}</td>
                                <td>{{ $data->comment }}</td>
                            </tr>
                            @endforeach
                            @endif

                        </tbody>
                    </table>
                </div>
            </div>

            <br>
            <div class="row">
                <h5>Verify LL</h5>
            </div>
            <br>
            <div class="row">
            <div class="table-responsive">
                    <table class="table table-bordered m-0" id="verifyLL">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>User Name</th>
                                <th>Designation</th>
                                <th>Department</th>
                                <th>Status</th>
                                <th>Reason</th>

                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($electrical_continuity_verify_ll))
                            @foreach ($electrical_continuity_verify_ll as $key => $data)
                           
                            <tr>
                                <td>{{ $loop->iteration ?? '' }}</td>
                                <td>{{ $data->user->user_name ?? '' }}</td>
                                <td>{{ $data->user->department != null ? $data->user->department->name :'' }}</td>
                                <td>{{ $data->user->designation != null ? $data->user->designation->name :'' }}</td>
                                <td>
                                    @if ($data->status == "verify")
                                    <span class="badge border border-success text-success">Verify</span>
                                    @elseif($data->status == "decline")  
                                    <span class="badge border border-danger text-danger">Decline</span>
                                    @elseif($data->status == "cancel")  
                                    <span class="badge border border-warning text-warning">Cancel</span>
                                    @endif

                                </td>
                                <td>{{ $data->reason }}</td>
                            </tr>
                            @endforeach
                            @endif

                        </tbody>
                    </table>
                </div>
            </div>

            <br>
            <div class="row">
                <h5>Verify SV</h5>
            </div>
            <br>
            <div class="row">
            <div class="table-responsive">
                    <table class="table table-bordered m-0" id="verifySV">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>User Name</th>
                                <th>Designation</th>
                                <th>Department</th>
                                <th>Status</th>
                                <th>Reason</th>

                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($electrical_continuity_verify_sv))
                            @foreach ($electrical_continuity_verify_sv as $key => $data)
                           
                            <tr>
                                <td>{{ $loop->iteration ?? '' }}</td>
                                <td>{{ $data->user->user_name ?? '' }}</td>
                                <td>{{ $data->user->department != null ? $data->user->department->name :'' }}</td>
                                <td>{{ $data->user->designation != null ? $data->user->designation->name :'' }}</td>
                                <td>
                                    @if ($data->status == "verify")
                                    <span class="badge border border-success text-success">Verify</span>
                                    @elseif($data->status == "decline")  
                                    <span class="badge border border-danger text-danger">Decline</span>
                                    @elseif($data->status == "cancel")  
                                    <span class="badge border border-warning text-warning">Cancel</span>
                                    @endif

                                </td>
                                <td>{{ $data->reason }}</td>
                            </tr>
                            @endforeach
                            @endif

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
 
</div>


    <script>
        function showVerifiedTable() {
            document.getElementById('verificationSection').classList.remove('d-none');
            document.getElementById('declineSection').classList.add('d-none');
            document.getElementById('cancelSection').classList.add('d-none');
        }

        function showDeclineTable() {
            document.getElementById('declineSection').classList.remove('d-none');
            document.getElementById('verificationSection').classList.add('d-none');
            document.getElementById('cancelSection').classList.add('d-none');
        }

        function showCancelTable() {
            document.getElementById('cancelSection').classList.remove('d-none');
            document.getElementById('declineSection').classList.add('d-none');
            document.getElementById('verificationSection').classList.add('d-none');
        }
    </script>


<script>
    const rejectionTypes = @json($rejectiontypes);
    $('.card-body').find('input').attr('readonly', true);
$('.card-body').find('select, textarea').attr('disabled', true);

    $(document).on('click', '.openRejectionModal', function() {
        $('#rejectionModal').modal('show');
        const rowId = $(this).data('id');
        const jsonData = $(this).closest('td').find('.jsonData').val();
        $('#doneBtn').data('id', rowId);
        if (!sessionStorage.getItem(`rejectionData_${rowId}`)) {
            sessionStorage.setItem(`rejectionData_${rowId}`, jsonData);
        }
        $('#rejectionDetailsTable tbody').empty();

        const savedData = sessionStorage.getItem(`rejectionData_${rowId}`);
        if (savedData) {
            const table = JSON.parse(savedData);
            table.forEach(item => {
                $('#rejectionDetailsTable tbody').append(`
                    <tr>
                        <td class="rejectiontype">
                            <select name="rejectionType" disabled class="form-control rejectionType form-control-sm">
                                ${generateOptions(item.rejectiontype)}
                            </select>
                        </td>
                        <td><input type="text" disabled name="comments" class="form-control form-control-sm comments" value="${item.comments}" /></td>
                        
                    </tr>
                `);
            });
        } else {
            // Add one empty row
            $('#rejectionDetailsTable tbody').append(`
            <tr>
                <td class="rejectiontype">
                    <select name="rejectionType" disabled class="form-control rejectionType form-control-sm">
                        ${generateOptions('')}
                    </select>
                </td>
                <td><input type="text" disabled name="comments" class="form-control form-control-sm comments" /></td>
               
            </tr>
        `);
            $('.comments').val('');
        }



    });

    function generateOptions(selectedId) {
        let options = `<option value="" disabled ${selectedId ? '' : 'selected'}>Please Select</option>`;
        options += `<option value="qc" ${selectedId == 'qc' ? 'selected' : ''}>QC</option>`;
        rejectionTypes.forEach(type => {
            const selected = type.id == selectedId ? 'selected' : '';
            options += `<option value="${type.id}" ${selected}>${type.type}</option>`;
        });
        return options;
    }
</script>

<script>
    $(document).ready(function() {
        $('#date').datepicker({
            format: 'dd/mm/yyyy', 
            autoclose: true,
            todayHighlight: true,
            orientation: 'bottom' 
        });
    });
</script>


   
@endsection