@extends('admin.layout.master')
@section('title', 'Hourly Production')
@section('content')
    <div class="card sina-card">
        <div class="d-flex justify-content-between card-header card-header-s">
            <div class="d-flex align-items-start">
                <h4>Hourly Production</h4>
            </div>
            <div class="d-flex justify-content-end p-0">
                <a href="{{ route('inventory.hourly_production.report') }}" class="btn btn-primary btn-sm">Report</a>
            </div>
        </div>
        <div class="card-body">
            <form id="form">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <label>Party <span style="color: red">*</span></label>
                            <select name="party_id" onchange="checkExist()" id="party" class="select_2 form-control">
                                <option value="">Choose One</option>
                                @foreach ($parties as $party)
                                    <option value="{{ $party->id }}">{{ $party->name_eng }}</option>
                                @endforeach
                            </select>
                            <input type="hidden" value="" name="edit_id" id="edit_id" />
                        </div>

                        <div class="col-lg-3">
                            <label>Supervisor <span style="color: red">*</span></label>
                            <select name="supervisor_id" onchange="checkExist()" id="supervisor"
                                class="select_2 form-control">
                                <option value="">Choose One</option>
                                @foreach ($supervisors as $supervisor)
                                    <option value="{{ $supervisor->id }}">{{ $supervisor->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-lg-3">
                            <label>Style <span style="color: red">*</span></label>
                            <select name="style_id" onchange="checkExist()" id="style" class="select_2 form-control">
                                <option value="">Choose One</option>
                                @foreach ($styles as $style)
                                    <option value="{{ $style->id }}">{{ $style->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3">
                            <label>Line <span style="color: red">*</span></label>
                            <select name="line_id" onchange="checkExist()" id="line" class="select_2 form-control">
                                <option value="">Choose One</option>
                                @foreach ($lines as $line)
                                    <option value="{{ $line->id }}">{{ $line->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3">
                            <label>Date <span style="color: red">*</span></label>
                            <input type="text" value="{{ date('d-m-Y') }}" onchange="checkExist()" name="date"
                                id="date" class="form-control date_picker" />
                        </div>

                        <div class="col-lg-3">
                            <label>Remarks</label>
                            <textarea name="remarks" id="remarks" class="form-control"></textarea>
                        </div>
                        <div class="col-lg-12 mt-1 table-responsive">
                            <div class="d-flex justify-content-end mt-1">
                                <button type="button" class="btn btn-primary btn-sm" onclick="incDiv()">+</button>
                            </div>
                            <table class="table table-striped table-bordered table-hover table-sm mt-1">
                                <thead>
                                    <tr>
                                        <th>Process <span style="color: red">*</span></th>
                                        @foreach ($shifts as $shift)
                                            <th class="text-nowrap">{{ $shift->name }} <span style="color: red">*</span></th>
                                        @endforeach
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="process_details">

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

                        <div class="col-lg-2">
                            <label class="w-100">&nbsp;</label>
                            <button type="button" class="btn btn-primary btn-block btn-sm py-1"
                                onclick="submitForm()">Submit</button>
                            <button type="button" class="btn btn-danger btn-block btn-sm py-1"
                                onclick="resetForm()">Reset</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('.select_2').select2();
            incDiv();
        });

        let process = @json(@$process);
        let shift = @json(@$shifts);

        let customDataSet = [];

        let i = 0;

        function incDiv() {
            let html = "";
            let removeBtn = "";
            let processHtml = "";
            let shiftHtml = "";

            if (i > 0) {
                removeBtn = `<button class="btn btn-danger btn-block btn-sm py-1" onclick="removeDiv(${ i })">-</button>`;
            }

            if (i == 0) {
                removeBtn =
                    `<button type="button" class="btn btn-primary btn-block btn-sm py-1" onclick="resetDiv(${ i })"><i class="fas fa-undo"></i></button>`;
            }

            process.forEach((item) => {
                processHtml += `<option value="${ item.id }">${ item.name }</option>`;
            });

            shift.forEach((item) => {
                shiftHtml += `<td>
                            <input type="number" step="any" ${item.name =='Lunch'?'readonly':''} name="quantity[${i}][${item.id}]" value="" class="form-control" />
                        </td>`;
            });

            html += `
                <tr id="process_${ i }" class="tr_class">
                    <td class="text-nowrap">
                        <select name="process_id[]" id="process_id_${ i }" class="select_2 form-control select_${i}" style="width: 100%">
                            <option value="">Choose One</option>
                            ${ processHtml }
                        </select>
                    </td>
                    ${shiftHtml}
                    <td>${ removeBtn }</td>
                </tr>`;
            $('#process_details').append(html);
            $('.select_' + i).select2();
            i++;
        }

        function removeDiv(id) {
            $(`#process_${ id }`).remove();
        }

        function submitForm() {
            let hasEmpty = false;

            $(".tr_class").each(function() {
                let process = $(this).find('[name="process_id[]"]').val();

                if (!process) {
                    hasEmpty = true;
                    $(this).css("background-color", "#ffe5e5");
                } else {
                    $(this).css("background-color", "");
                }
            });

            if (hasEmpty) {
                alert("Some rows have empty fields!");
                return false;
            }

            ajaxCallV2("{{ route('inventory.hourly_production.store') }}", 'POST', $('#form').serialize(), (data) => {
                $('#loader').hide();
                callSweetAlert('success', 'Success', data.message);
                resetForm();
            }, (error) => {
                $('#loader').hide();
            });
        }

        function resetForm() {
            $('#form')[0].reset();
            $('#form select').val(null).trigger('change');
            $('#process_details').html('');
            i = 0;
            incDiv();
        }

        function resetDiv(rowId) {
            $('#process_id_' + rowId).val(null).trigger('change');
            $('[name^="quantity[' + rowId + ']["]').val('');
        }

        function checkExist() {
            let party = $('#party').val();
            let date = $('#date').val();
            let supervisor = $('#supervisor').val();
            let style = $('#style').val();
            let line = $('#line').val();

            if (party) {
                if (supervisor == '') $('#supervisor').select2('open');
            }

            if (supervisor) {
                if (style == '') $('#style').select2('open');
            }

            if (style) {
                if (line == '') $('#line').select2('open');
            }

            if (line) {
                $('#date').focus();
            }

            if (date) {
                $('#remarks').focus();
            }

            let linkUrl = "{{ route('inventory.hourly_production.check_exist') }}";
            let int_data_param = {
                party_id: party,
                date: date,
                supervisor_id: supervisor,
                style_id: style,
                line_id: line,
            };

            if (party == '' || date == '' || supervisor == '' || style == '' || line == '') {
                return false;
            }

            ajaxCallV2(linkUrl, 'GET', int_data_param, function(data) {
                $('#loader').hide();
                setExistedData(data.data);
            }, function(error) {
                $('#loader').hide();
            });

        }

        function setExistedData(data = null) {
            $('#edit_id').val(null);
            if (data) {
                $('#edit_id').val(data.id);
                $('#remarks').val(data.remarks);
                if (data.transactions.length > 0) {
                    $('#process_details').html('');
                }
                const grouped = data.transactions.reduce((acc, item) => {
                    if (!acc[item.process_id]) {
                        acc[item.process_id] = [];
                    }
                    acc[item.process_id].push(item);
                    return acc;
                }, {});

                i = 0;
                Object.entries(grouped).forEach(([index, value]) => {
                    let removeBtn = "";
                    let processHtml = "";
                    let shiftHtml = "";

                    if (i > 0) {
                        removeBtn =
                            `<button class="btn btn-danger btn-block btn-sm py-1" onclick="removeDiv(${i})">-</button>`;
                    }

                    if (i == 0) {
                        removeBtn =
                            `<button type="button" class="btn btn-primary btn-block btn-sm py-1" onclick="resetDiv(${i})"><i class="fas fa-undo"></i></button>`;
                    }

                    process.forEach((item) => {
                        processHtml += `<option value="${ item.id }">${ item.name }</option>`;
                    });

                    shift.forEach((item) => {
                        let isValueExist = value.find((q) => {
                            return item.id == q.shift_id;
                        });
                        let Shtqty = isValueExist ? isValueExist.quantity : '';
                        let Shtid = isValueExist ? isValueExist.id : '';

                        shiftHtml += `<td>
                            <input type="number" step="any" name="quantity[${i}][${item.id}]" value="${Shtqty}" class="form-control" />
                            <input type="hidden" name="transaction_id[${i}][${item.id}]" value="${Shtid}" />
                        </td>`;
                    });

                    let html = `<tr id="process_${i}" class="tr_class">
                            <td>
                                <select name="process_id[]" id="process_id_${i}" class="select_2 form-control select_${i}">
                                    <option value="">Choose One</option>
                                    ${ processHtml }
                                </select>
                            </td>
                            ${shiftHtml}}
                            <td>${ removeBtn }</td>
                        </tr>`;

                    $('#process_details').append(html);
                    $('.select_' + i).select2();
                    $('#process_id_' + i).val(index).trigger('change');
                    i++;
                });

            }else{
                $('#process_details').html('');
                i = 0;
                incDiv();
            }
        }
    </script>
@endsection