@extends('layouts.app')
@section('title')
    Final Checking View
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('final-checking.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="{{ $final_checking->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="{{ $final_checking->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="{{ $final_checking->product_id ?? '' }}" selected>
                                    {{ $final_checking->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="{{ $final_checking->user_id ?? '' }}" selected>
                                    {{ $final_checking->user->user_name ?? '' }}/{{ $final_checking->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="{{ $final_checking->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="{{ $final_checking->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="{{ $final_checking->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($final_checking_details))
                                @foreach ($final_checking_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($final_checking_details_summary))
                                @foreach ($final_checking_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($final_checking_verify_ll))
                                @foreach ($final_checking_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($final_checking_verify_sv))
                                @foreach ($final_checking_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