@extends('layout.app')
@section('title', 'Org Info Create')
@section('style')
@endsection
@section('main')
    <div class="row py-4">
        <div class="card card-body border-0 shadow mb-4">

            <div class="row">
                <div class="col-12 col-xl-12">
                    <h2 class="h5">
                        <a href="{{url('orginfo')}}" class="btn btn-outline-warning text-dark d-inline-flex align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" class="icon icon-xs me-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H6M12 5l-7 7 7 7"></path>
                            </svg>
                            Back To Previous Page
                        </a></br></br>
                        Org information</h2>
                    <div class="user-information" id="user-information">
                        <form>@csrf
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="col-md-9 mb-3">
                                            <div>
                                                <label for="org_name">Org Name</label>
                                                <input class="form-control" name="org_name" id="org_name" type="text" placeholder="Example : Dhaka Power Distribution Company Ltd" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <label for="org_code">Org Code</label>
                                                <input class="form-control" name="org_code" id="org_code" type="text" placeholder="Example : DPDC" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <div class="form-group">
                                                <label for="web_addr">Web Address</label>
                                                <input class="form-control" name="web_addr" id="web_addr" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="form-group">
                                                <label for="contact_person">Contact Person</label>
                                                <input class="form-control" name="contact_person" id="contact_person" type="text" placeholder="Example :" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="form-group">
                                                <label for="contact_phone">Contact Phone</label>
                                                <input class="form-control" name="contact_phone" id="contact_phone" type="text" placeholder="Example : +880-1372 007 287" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-8 mb-3">
                                            <div class="form-group">
                                                <label for="address">Address</label>
                                                <input class="form-control" name="address" id="address" type="text" placeholder="" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <label for="group_in">Group In</label>
                                                <div class="group_select" style="display: none;">
                                                    <select class="form-select w-100 mb-0" name="group_in" id="group_in" aria-label="State select example"></select>
                                                </div>
                                                <div class="group_name" style="display: none;">
                                                    <input class="form-control" name="group_in" id="group_in" type="text" placeholder="Example : New Group Name" required>
                                                </div>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-1 mb-3">
                                            <div class="form-group">
                                                <label for="path">Que</label>
                                                <input class="form-control" name="que" id="que" type="number" placeholder="Example :" value="1" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="form-group">
                                                <label for="paymode">Pay Mode</label>
                                                <select class="form-select w-100 mb-0" name="paymode" id="paymode" aria-label="State select example"></select>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="form-group">
                                                <label for="org_type">ORG Type</label>
                                                <select class="form-select w-100 mb-0" name="org_type" id="org_type" aria-label="State select example"></select>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="path">Path</label>
                                                    <input class="form-control" name="path" id="path" type="text" placeholder="Example :" required>
                                                    <div class="invalid-feedback"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="url">URL</label>
                                                    <input class="form-control" name="url" id="url" type="text" placeholder="Example : ********" required>
                                                    <div class="invalid-feedback"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-4 merchan" style="display: none;">
                                                <div class="form-group">
                                                    <label for="merchan">Merchant Number</label>
                                                    <input class="form-control" name="merchan" id="merchan" type="text" placeholder="Example : ********" required>
                                                    <div class="invalid-feedback"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="">
                                        <ul class="list-group list-group-flush p-2">
                                            <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                                                <div>
                                                    <h3 class="h6 mb-1">Temp Retry Status</h3>
                                                    <p class="small pe-4">Is This Biller Data Retry from the Temp Table checked this</p>
                                                </div>
                                                <div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" name="office_tnt" id="office_tnts" value="A">
                                                        <label class="form-check-label" for="office_tnt"></label>
                                                    </div>
                                                </div>
                                                <div class="invalid-feedback"></div>
                                            </li>
                                            <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                                                <div>
                                                    <h3 class="h6 mb-1">Retry Status</h3>
                                                    <p class="small pe-4">Is This Biller Have Retry System then checked this</p>
                                                </div>
                                                <div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" name="retry_status" id="retry_status" value="A">
                                                        <label class="form-check-label" for="retry_status"></label>
                                                    </div>
                                                </div>
                                                <div class="invalid-feedback"></div>
                                            </li>
                                            <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                                                <div>
                                                    <h3 class="h6 mb-1">ORG Status</h3>
                                                    <p class="small pe-4">What is the status of this ORG Inactive or activity</p>
                                                </div>
                                                <div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" name="status" id="status" value="A">
                                                        <label class="form-check-label" for="status"></label>
                                                    </div>
                                                </div>
                                                <div class="invalid-feedback"></div>
                                            </li>
                                            <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                                                <div>
                                                    <h3 class="h6 mb-1">Have Merchant</h3>
                                                    <p class="small pe-4">If this ORG have any Merchant then checked.</p>
                                                </div>
                                                <div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" name="HaveMerchant" id="HaveMerchant" value="A">
                                                        <label class="form-check-label" for="HaveMerchant">Have Merchant?</label>
                                                    </div>
                                                </div>
                                                <div class="invalid-feedback"></div>
                                            </li>
                                            <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                                                <div>
                                                    <h3 class="h6 mb-1">Add New Group</h3>
                                                    <p class="small pe-4">If you want to Add ned Group checke this.</p>
                                                </div>
                                                <div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" name="AddNewGroup" id="AddNewGroup" value="A">
                                                        <label class="form-check-label" for="AddNewGroup">Add New Group?</label>
                                                    </div>
                                                </div>
                                                <div class="invalid-feedback"></div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <h2 class="h5 my-4"  for="error_map">ORG Error Map</h2>
                            <div class="invalid-feedback"></div>
                            <div class="row">
                                <div class="col-sm-12 mb-3">
                                    <div id="error-table" class="table-responsive">
                                        <table class="table table-centered table-nowrap mb-0 rounded">
                                            <thead class="thead-light">
                                            <tr>
                                                <th>Biller Error Code</th>
                                                <th>CDSL Error Code</th>
                                                <th>CDSL Error Desc</th>
                                                <th>Success Error Type</th>
                                                <th>Pay Type</th>
                                                <th>Action</th>
                                            </tr>
                                            </thead>
                                            <tbody id="error-body">
                                            <tr class="error-row">
                                                <td><input class="form-control" name="biller_err_code" type="text" placeholder="Example :" required></td>
                                                <td><input class="form-control" name="cdsl_err_code" type="number" maxlength="3" placeholder="Example :" required></td>
                                                <td><input class="form-control" name="cdsl_err_descr" type="text" placeholder="Example :" required></td>
                                                <td>
                                                    <select class="form-select w-100 mb-0" name="success_err_type" id="success_err_type">
                                                        <option value="0">0</option>
                                                        <option value="1">1</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select class="form-select w-100 mb-0" name="pay_type" id="pay_type">
                                                        <option value="CHK_BILL">CHK_BILL</option>
                                                        <option value="PAY_BILL">PAY_BILL</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-danger btn-sm remove-row">Remove</button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="mt-3">
                                        <button type="button" id="add-row" class="btn btn-info">Add Row</button>
                                        {{--
                                                                                <button type="button" id="get-data" class="btn btn-success">Get JSON</button>
                                        --}}
                                    </div>

                                    {{-- <pre id="output" class="mt-3 bg-light p-3 border"></pre>--}}
                                </div>
                            </div>
                            <div class="mt-3 text-center">
                                <button class="btn btn-gray-800 mt-2 animate-up-2 col-md-6" type="button" onclick="submitData()">Save all</button>
                            </div>
                        </form>
                    </div>
                </div>

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

@endsection
@section('script')
    <script>
        $(document).ready(function () {

            $('#HaveMerchant').change(function () {
                if ($(this).is(':checked')) {
                    $('.merchan').show();
                } else {
                    $('.merchan').hide();
                }
            });

            $('.group_select').show();
            $('#AddNewGroup').change(function () {
                if ($(this).is(':checked')) {
                    $('.group_name').show();
                    $('.group_select').hide();
                } else {
                    $('.group_name').hide();
                    $('.group_select').show();
                }
            });

            $('#add-row').click(function () {
                const newRow = $('.error-row:first').clone();
                newRow.find('input').val('');
                newRow.find('#pay_type').val('CHK_BILL');
                newRow.find('#success_err_type').val('0');
                $('#error-body').append(newRow);
            });

            // Remove a row
            $('#error-body').on('click', '.remove-row', function () {
                if ($('#error-body .error-row').length > 1) {
                    $(this).closest('.error-row').remove();
                }
            });

            // Get JSON data with validation
            $('#get-data').click(function () {
                let error_map = [];
                let isValid = true;
                let rowCount = $('#error-body .error-row').length;

                if (rowCount < 2) {
                    alert("At least 2 rows are required.");
                    return;
                }

                $('#error-body .error-row').each(function (index) {
                    let row = $(this);
                    let biller_err_code = row.find('input[name="biller_err_code"]').val().trim();
                    let cdsl_err_code = row.find('input[name="cdsl_err_code"]').val().trim();
                    let cdsl_err_descr = row.find('input[name="cdsl_err_descr"]').val().trim();
                    let success_err_type = row.find('select[name="success_err_type"]').val();
                    let pay_type = row.find('select[name="pay_type"]').val();

                    // Validate each field
                    if (!biller_err_code || !cdsl_err_code || !cdsl_err_descr || !success_err_type || !pay_type) {
                        alert(`All fields are required in row ${index + 1}.`);
                        isValid = false;
                        return false; // Break .each loop
                    }

                    error_map.push({
                        biller_err_code,
                        cdsl_err_code,
                        cdsl_err_descr,
                        success_err_type,
                        pay_type
                    });
                });

                if (!isValid) return;

                const output = { error_map };
                $('#output').text(JSON.stringify(output, null, 2));
            });
        });

        showRole();
        function submitData() {
            let error_map = [];
            let isValid = true;
            let rowCount = $('#error-body .error-row').length;

            if (rowCount < 2) {
                alert("At least 2 rows are required.");
                return false;
            }

            $('#error-body .error-row').each(function (index) {
                let row = $(this);
                let biller_err_code = row.find('input[name="biller_err_code"]').val().trim();
                let cdsl_err_code = row.find('input[name="cdsl_err_code"]').val().trim();
                let cdsl_err_descr = row.find('input[name="cdsl_err_descr"]').val().trim();
                let success_err_type = row.find('select[name="success_err_type"]').val();
                let pay_type = row.find('select[name="pay_type"]').val();

                if (!biller_err_code || !cdsl_err_code || !cdsl_err_descr || !success_err_type || !pay_type) {
                    alert(`All fields are required in row ${index + 1}.`);
                    isValid = false;
                    return false; // break loop
                }

                error_map.push({
                    biller_err_code,
                    cdsl_err_code,
                    cdsl_err_descr,
                    success_err_type,
                    pay_type
                });
            });

            if (!isValid) return false;

            const formElement = $("#user-information form")[0];
            const formData = new FormData(formElement);
            formData.append("error_map", JSON.stringify(error_map));

            let url = "{{ url('orginfo') }}";

            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.statusCode == 200) {
                        Swal.fire({
                            title: "Success!",
                            text: data.statusMsg,
                            icon: "success"
                        });
                        $("#user-information form")[0].reset();
                        $('#error-body').html($('.error-row:first').clone()); // reset dynamic rows
                    } else if (data.statusCode == 204) {
                        showErrors(data.errors);
                    } else {
                        Swal.fire({
                            icon: "error",
                            text: data.statusMsg,
                        });
                    }
                },
                error: function () {
                    Swal.fire({
                        text: "Internal Server Error",
                        icon: "question"
                    });
                }
            });

            return false;
        }


        function showRole() {
            url = "{{ url('getOrgGroupInfo') }}";
            $.ajax({
                url: url,
                type: "GET",
                success: function (data) {
                    if (data) {
                        var roles = data;
                        var selectElement = $('#group_in');
                        selectElement.empty();
                        selectElement.append('<option value="" disabled selected>Select Group</option>');
                        roles.forEach(function(role) {
                            selectElement.append('<option value="' + role.GROUP_NAME + '" data-que="'+ role.QUE +'">' + role.GROUP_NAME + '</option>');
                        });
                        selectElement.select2();

                        selectElement.on('change', function() {
                            var selectedOption = $(this).find('option:selected');
                            var queValue = selectedOption.data('que') || '';
                            $('#que').val(queValue);
                            if (queValue) {
                                $('#que').prop('readonly', true);
                            } else {
                                $('#que').prop('readonly', false);
                            }
                        });
                        /* var selectElement1 = $('#group_in');
                         selectElement1.empty();
                         selectElement1.append('<option value="" disabled selected>Select Group</option>');
                         selectElement1.append('<option value="Prepaid">Prepaid</option>');
                         selectElement1.append('<option value="Prepaid1">Prepaid1</option>');
                         selectElement1.select2();*/

                        var selectElement2 = $('#org_type');
                        selectElement2.empty();
                        selectElement2.append('<option value="" disabled selected>Select ORG Type</option>');
                        selectElement2.append('<option value="Prepaid">Electricity</option>');
                        selectElement2.append('<option value="Postpaid">Gas</option>');
                        selectElement2.append('<option value="Postpaid">Water</option>');
                        selectElement2.append('<option value="Postpaid">Internet</option>');
                        selectElement2.append('<option value="Postpaid">Telephone</option>');
                        selectElement2.append('<option value="Postpaid">TV</option>');
                        selectElement2.append('<option value="Postpaid">Govt. Fees</option>');
                        selectElement2.append('<option value="Postpaid">Insurance</option>');
                        selectElement2.append('<option value="Postpaid">Tracker</option>');
                        selectElement2.append('<option value="Postpaid">Others</option>');
                        selectElement2.select2();

                        var selectElement3 = $('#paymode');
                        selectElement3.empty();
                        selectElement3.append('<option value="" disabled selected>Select Pay Mode</option>');
                        selectElement3.append('<option value="Prepaid">Prepaid</option>');
                        selectElement3.append('<option value="Postpaid">Postpaid</option>');
                        selectElement3.select2();
                    } else {
                        console.error('Failed to load roles');
                    }
                },
                error: function (err) {
                    console.error('Error loading roles', err);
                }
            });
        }
    </script>
@endsection