@extends('layout.admin.app')

@section('content')
    <div class="container-fluid">





        <div class="container my-4">

            <div class="main-card">

                <h2 class="fw-bold">Migration Services</h2>

                <p class="text-muted mb-3">
                    Choose the authorisation category applicable to your existing license to begin the migration process.
                </p>

                <div class="alert alert-primary">
                    <i class="fa fa-circle-info"></i>
                    Only one authorisation service category can be selected per migration.
                    Review the services listed below and select the appropriate category to continue.
                </div>

                <!-- Principal -->

                <div class="section-card left-border-blue">

                    <div class="section-header">
                        <div>
                            <h5>
                                <i class="fa fa-building text-primary"></i>
                                Principal Authorisation Service
                            </h5>

                            <div class="small-text">
                                Migrate licenses that fall under the Principal Authorisation Services category.
                            </div>
                        </div>

                        <span class="service-count">
                            26 Services
                        </span>

                    </div>

                    <div class="row px-3 pb-3">

                        <div class="col-md-6">

                            <table class="table table-bordered">

                                <thead>

                                    <tr>
                                        <th>UL Services</th>
                                    </tr>

                                    <tr>
                                        <th>License / Authorisation Service Name</th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td>AS under UL</td>
                                    </tr>
                                    <tr>
                                        <td>GMPCS under UL</td>
                                    </tr>
                                    <tr>
                                        <td>ILD standalone</td>
                                    </tr>
                                    <tr>
                                        <td>ILD under UL</td>
                                    </tr>
                                    <tr>
                                        <td>ISP Cat A standalone</td>
                                    </tr>
                                    <tr>
                                        <td>ISP Cat A under UL</td>
                                    </tr>
                                    <tr>
                                        <td>ISP Cat B standalone</td>
                                    </tr>
                                    <tr>
                                        <td>ISP Cat B under UL</td>
                                    </tr>
                                    <tr>
                                        <td>ISP Cat C under UL</td>
                                    </tr>
                                    <tr>
                                        <td>M2M Cat A under UL</td>
                                    </tr>
                                    <tr>
                                        <td>M2M Cat B under UL</td>
                                    </tr>
                                    <tr>
                                        <td>M2M Cat C under UL</td>
                                    </tr>
                                    <tr>
                                        <td>NLD standalone</td>
                                    </tr>
                                    <tr>
                                        <td>NLD under UL</td>
                                    </tr>
                                    <tr>
                                        <td>UASL</td>
                                    </tr>

                                </tbody>

                            </table>

                        </div>

                        <div class="col-md-6">

                            <table class="table table-bordered">

                                <thead>

                                    <tr>
                                        <th>VNO Services</th>
                                    </tr>

                                    <tr>
                                        <th>License / Authorisation Service Name</th>
                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>
                                        <td>AS under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>AS(CAT B) under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>GMPCS under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>ILD under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>ISP Cat A under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>ISP Cat B under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>ISP Cat C under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>M2M Cat A under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>M2M Cat B under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>M2M Cat C under UL(VNO)</td>
                                    </tr>
                                    <tr>
                                        <td>NLD under UL(VNO)</td>
                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <!-- Misc -->

                <div class="section-card left-border-green">

                    <div class="section-header">

                        <div>

                            <h5>

                                <i class="fa fa-layer-group text-success"></i>

                                Miscellaneous Authorisation Service

                            </h5>

                            <div class="small-text">
                                Migrate licenses that fall under the Miscellaneous Authorisation Services category.
                            </div>

                        </div>

                        <span class="service-count">
                            5 Services
                        </span>

                    </div>

                    <div class="px-3 pb-3">

                        <table class="table table-bordered">

                            <thead>

                                <tr>
                                    <th>License / Authorisation Service Name</th>
                                </tr>

                            </thead>

                            <tbody>

                                <tr>
                                    <td>Public Mobile Radio Trunking Service (PMRTS)</td>
                                </tr>
                                <tr>
                                    <td>Audio Conferencing / Audiotex / Voice Mail Service under UL</td>
                                </tr>
                                <tr>
                                    <td>Machine-to-machine service authorisation</td>
                                </tr>
                                <tr>
                                    <td>PM WANI</td>
                                </tr>
                                <tr>
                                    <td>IFMC Service</td>
                                </tr>

                            </tbody>

                        </table>

                    </div>

                </div>

                <!-- Captive -->

                <div class="section-card left-border-orange">

                    <div class="section-header">

                        <div>

                            <h5>

                                <i class="fa fa-shield text-warning"></i>

                                Captive Authorisation Service

                            </h5>

                            <div class="small-text">
                                Migrate licenses that fall under the Captive Authorisation Services category.
                            </div>

                        </div>

                        <span class="service-count">
                            3 Services
                        </span>

                    </div>

                    <div class="px-3 pb-3">

                        <table class="table table-bordered">

                            <thead>

                                <tr>
                                    <th>License / Authorisation Service Name</th>
                                </tr>

                            </thead>

                            <tbody>

                                <tr>
                                    <td>Captive mobile radio trunking service</td>
                                </tr>
                                <tr>
                                    <td>Captive non-public network service</td>
                                </tr>
                                <tr>
                                    <td>Captive very small aperture terminal service</td>
                                </tr>

                            </tbody>

                        </table>

                    </div>

                </div>

                <!-- Bottom Selection -->

                <div class="border rounded p-3 bg-light">

                    <h5>Select an Authorisation Service Category</h5>

                    <p class="small text-muted">
                        Only one option can be selected.
                    </p>

                    <div class="row g-3">

                        <div class="col-md-4">

                            <label class="category-card d-flex">

                                <div class="flex-grow-1">

                                    <div class="category-title">
                                        <i class="fa fa-building text-primary"></i>
                                        Principal Authorisation Service
                                    </div>

                                    <div class="small-text">
                                        Migrate licenses that fall under the Principal Authorisation Services category.
                                    </div>

                                </div>

                                <input class="form-check-input ms-2" type="radio" name="serviceCategory"
                                    value="{{ route('migrate.authorization.rules') }}">

                            </label>

                        </div>

                        <div class="col-md-4">

                            <label class="category-card d-flex">

                                <div class="flex-grow-1">

                                    <div class="category-title">
                                        <i class="fa fa-layer-group text-success"></i>
                                        Miscellaneous Authorisation Service
                                    </div>

                                    <div class="small-text">
                                        Migrate licenses that fall under the Miscellaneous Authorisation Services category.
                                    </div>

                                </div>

                                <input class="form-check-input ms-2" type="radio" name="serviceCategory"
                                    value="{{ route('mismigrate.authorization.rules') }}">

                            </label>

                        </div>

                        <div class="col-md-4">

                            <label class="category-card d-flex">

                                <div class="flex-grow-1">

                                    <div class="category-title">
                                        <i class="fa fa-shield text-warning"></i>
                                        Captive Authorisation Service
                                    </div>

                                    <div class="small-text">
                                        Migrate licenses that fall under the Captive Authorisation Services category.
                                    </div>

                                </div>

                                <input class="form-check-input ms-2" type="radio" name="serviceCategory"
                                    value="{{ route('capmigrate.authorization.rules') }}">

                            </label>

                        </div>

                    </div>

                </div>

                <div class="footer-btn text-end mt-4">

                    <button class="btn btn-outline-secondary">
                        Cancel
                    </button>

                    <button class="btn btn-primary" id="proceedBtn">
                        Proceed
                    </button>

                </div>

            </div>

        </div>
    @endsection
    @push('styles')
        <style>
            .main-card {
                background: #fff;
                border-radius: 10px;
                padding: 25px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
            }

            .section-card {
                border: 1px solid #dfe7f3;
                border-radius: 10px;
                margin-bottom: 25px;
                overflow: hidden;
                background: #fff;
            }

            .section-header {
                padding: 15px 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .section-header h5 {
                margin: 0;
                font-size: 18px;
                font-weight: 600;
            }

            .service-count {
                background: #eef3ff;
                color: #0d6efd;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 12px;
            }

            .left-border-blue {
                border-left: 4px solid #0d6efd;
            }

            .left-border-green {
                border-left: 4px solid #20c997;
            }

            .left-border-orange {
                border-left: 4px solid #fd7e14;
            }

            .table thead {
                background: #f8f9fa;
            }

            .table td {
                font-size: 13px;
            }

            .category-card {
                border: 1px solid #d9e2f0;
                border-radius: 8px;
                padding: 15px;
                cursor: pointer;
                transition: .3s;
                height: 100%;
            }

            .category-card:hover {
                border-color: #0d6efd;
                background: #f8fbff;
            }

            .form-check-input {
                width: 20px;
                height: 20px;
            }

            .category-title {
                font-weight: 600;
            }

            .footer-btn {
                border-top: 1px solid #dee2e6;
                padding-top: 20px;
            }

            .small-text {
                font-size: 13px;
                color: #6c757d;
            }
        </style>
    @endpush
    @push('scripts')
        <script>
            document.getElementById('proceedBtn').addEventListener('click', function() {

                const selected = document.querySelector('input[name="serviceCategory"]:checked');

                if (!selected) {
                    alert('Please select an Authorisation Service Category.');
                    return;
                }

                window.location.href = selected.value;
            });
        </script>
    @endpush