@extends('layouts.app')
@section('content')
<style>
    #page-loader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.85);
        z-index: 99999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .loader-spinner {
        width: 60px;
        height: 60px;
        border: 6px solid #e5e5e5;
        border-top: 6px solid #007bff;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    .loader-text {
        margin-top: 15px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    #error-popup {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 10000;
    }

    .popup-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 25px;
        min-width: 350px;
        border-radius: 8px;
        text-align: center;
    }

    .json-view {
        text-align: left;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 5px;
        max-height: 600px;
        overflow: auto;
    }
</style>
<div class="container">
    <h1>Number Assignment API Tool</h1>
    <div class="row">
        <div class="col-md-3">
            <select class="form-control" id="user-select">
                <option value="">Select User</option>
                @foreach($users as $user)
                <option value='{{ $user["user_reference_id"] }}'>{{ $user["user_login"] }} ({{ $user["user_reference_id"] }})</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-3">
            <select class="form-control" id="entity">
                <option value="">Select Entity</option>
            </select>
        </div>
        <div class="col-md-3">
            <select class="form-control" id="obntype">
                <option value="">Select OBN Type</option>
                <option value="either">Either</option>
                <option value="tollfree">Toll Free</option>
                <option value="nontollfree">Non Toll Free</option>
            </select>
        </div>
        <div class="col-md-3">
            <select class="form-control" id="carrier">
                <option value="">Select Carrier</option>
                @foreach($carriers as $carrier)
                <option value='{{ $carrier }}'>{{ $carrier }}</option>
                @endforeach
            </select>
        </div>
    </div>
</div>
<div class="row" style="margin-top: 15px;">
    <div class="col-md-6" style="padding-right: 5px;">
        <div class="card" style="padding: 15px; min-height: 300px;">
            <h4>OBNs</h4>
            <div id="obnContainer"></div>
        </div>
    </div>

    <div class="col-md-6" style="padding-left: 5px;">
        <div class="card" style="padding: 15px; min-height: 300px;">
            <h4>Carrier Groups</h4>
            <div id="carriergroupContainer"></div>
        </div>
    </div>
</div>

<div id="page-loader" style="display:none;">
    <div class="loader-spinner"></div>
    <div class="loader-text" id="loadertext"></div>
</div>

<div id="error-popup" style="display:none;">
    <div class="popup-content">
        <h4>Error</h4>
        <p id="popup-message"></p>
        <button onclick="closeErrorPopup()">OK</button>
    </div>
</div>

<script>
    $(document).ready(function() {
        $(".theme-selector").remove();
        $('#user-select').fSelect({
            placeholder: 'Select User',
            allowClear: true
        });

        $("#entity").fSelect({
            placeholder: 'Select Entity',
            allowClear: true
        });

        $('#carrier').fSelect({
            placeholder: 'Select Carrier',
            allowClear: true
        });
        $("#obntype").fSelect({
            placeholder: 'Select OBN Type',
            allowClear: true
        });
        $("#user-select").on("change", function() {
            var userId = $(this).val();
            $("#entity").empty().append('<option value="">Select Entity</option>').fSelect('reload');
            if (userId) {
                $("#loadertext").text("Loading entities");
                $("#page-loader").show();
                $.ajax({
                    url: "{{ url('getuserentities') }}",
                    type: "GET",
                    data: {
                        user_id: userId
                    },
                    success: function(data) {
                        if (data.header.code == 200) {
                            data = data.body.data;
                        } else {
                            data = [];
                        }
                        $.each(data, function(key, value) {
                            $("#entity").append('<option value="' + value["id"] + '">' + value["entity"] + ' (' + value["id"] + ')</option>');
                        });
                        $("#entity").fSelect('reload');
                    },
                    error: function() {
                        alert("Failed to load entities.");
                    },
                    complete: function() {
                        $("#page-loader").hide();
                    }
                });
            } else {
                $("#entity").empty().append('<option value="">Select Entity</option>').fSelect('reload');
            }
        });

        $("#carrier").on("change", function() {
            var userId = $("#user-select").val();
            var entityId = $("#entity").val();
            var obnType = $("#obntype").val();
            if (!userId || !entityId || !obnType) {
                showError("Please select a user, an entity, and an OBN type first.");
                $(this).val("").fSelect('reload');
                return;
            }
            var carrier = $(this).val();
            if (carrier) {
                $("#loadertext").text("Loading carrier groups and obn details");
                $("#page-loader").show();
                $.ajax({
                    url: "{{ url('getobndetails') }}",
                    type: "GET",
                    data: {
                        user_id: parseInt(userId),
                        entity_id: parseInt(entityId),
                        carrier: carrier,
                        obntype: obnType
                    },
                    success: function(data) {
                        console.log(data);
                        if (data.header.code == 200) {
                            data = data.body.data;
                            $("#obnContainer").html("<pre class='json-view'>" + JSON.stringify(data.obnDetails, null, 4) + "</pre>");
                            $("#carriergroupContainer").html("<pre class='json-view'>" + JSON.stringify(data.results, null, 4) + "</pre>");
                        } else {
                            alert("Failed to load carrier groups and obn details.");
                        }
                    },
                    error: function() {
                        $("#popup-message").text("Failed to load carrier groups and obn details.");
                        $("#error-popup").show();
                    },
                    complete: function() {
                        $("#page-loader").hide();
                    }
                });
            }
        });
    });

    function showError(message) {
        $("#popup-message").text(message);
        $("#error-popup").show();
    }

    function closeErrorPopup() {
        $("#error-popup").hide();
    }
</script>
@endsection