@extends('layouts.dashboard')
@section('content')
    <div class="main-content">

        <div class="page-content">

            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <div class="d-flex justify-content-between">
                                <a href="{{ route('dashboard.medical.pathway.index', ['NoReg' => Request::segment(3)]) }}">
                                    <h6 class="mb-sm-0 font-size-18"><i class='bx bx-arrow-back'></i></h6>
                                </a>
                                <h4 class="mb-sm-0 font-size-18 ml-2">Medical Pathway</h4>
                            </div>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    {{-- <li class="breadcrumb-item"><a href="{{route('medical.pathway.index')}}">Dashboard</a></li> --}}
                                    <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                                    <li class="breadcrumb-item active">Medical Pathway</li>
                                </ol>
                            </div>

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

                <!-- end page title -->
                <div class="row">
                    <div class="col-xl-3 col-md-3 col-sm-12">

                        @livewire('medical-pathway.detail.sidebar', ['NoReg' => $NoReg])

                    </div>

                    <div class="col-xl-9 col-md-9 col-sm-12">

                        <div class="card">

                            <div class="card-body">
                                <h6 class="card-title mb-4">{{ $m_form->nama }}</h6>
                                @livewire('form.cpw.header.edit', ['mForm' => $m_form, 'NoReg' => $NoReg, 'header_id' => $header_id])
                            </div>

                        </div>

                        {{-- Card CPW Activity list --}}
                        @livewire('form.cpw.index', ['mForm' => $m_form, 'NoReg' => $NoReg, 'header_id' => $header_id])


                    </div>
                </div>
                <!-- end row -->

            </div>
        </div>

        <!-- End Page-content -->
        <!-- Modal Structure -->
<div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="messageModalLabel">Notification</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Session message will be injected here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-bs-dismiss="modal">Oke</button>
            </div>
        </div>
    </div>
</div>
    </div>
@endsection
@push('AddCSS')
    @livewireStyles
    <style>
        table.table-nowrap td {
            word-wrap: break-word;
            white-space: normal;
        }

        .tab-pane {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .tab-pane.show {
            opacity: 1;
        }
    </style>
    <style>
        td {
            text-align: center;
            vertical-align: middle;
            /* Ensures content is vertically centered */
        }

        .form-check {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 0 0px;
            padding-left: 0px;
        }

        .form-check-input {
            display: none;
            /* Hide the default checkbox */
        }

        .form-check-label {
            padding: 4px 8px;
            /* Smaller padding for compact buttons */
            border: 1px solid #556ee6;
            background-color: white;
            border-radius: 20px;
            font-size: 11px;
            /* Smaller font size for compactness */
            font-weight: 500;
            color: #556ee6;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            margin: 0 0px;
        }

        .form-check-input:checked+.form-check-label {
            background-color: #556ee6;
            color: white;
        }

        .form-check-input:not(:checked)+.form-check-label:hover {
            background-color: #e0e0e0;
            border-color: #556ee6;
        }

        /* Center the varian form below the radio buttons */
        .varian-form {
            margin-top: 10px;
            display: grid;
            justify-content: center;
            align-items: center;
        }

        .varian-form input[type="text"] {
            border-radius: 4px;
            font-size: 12px;
            width: 100%;
            max-width: 150px;
            /* Limit input width for compact design */
            border: 1px solid #556ee6;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .varian-form input[type="text"]:focus {
            border-color: #0056b3;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }

        /* Error message styling */
        .text-danger {
            font-size: 10px;
            margin-top: 5px;
            color: #dc3545;
        }

        .table-bordered {
            border: 1px solid #e3e3e3;
        }
    </style>

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@endpush

@push('AddJS')
    @livewireScripts

    @if (session()->has('message'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Show the modal if the session message exists
            const modalElement = document.getElementById('messageModal');
            if (modalElement) {
                const bootstrapModal = new bootstrap.Modal(modalElement);
                const modalMessage = modalElement.querySelector('.modal-body');
                if (modalMessage) {
                    modalMessage.textContent = "{{ session('message') }}";
                }
                bootstrapModal.show();
            }

            // Scroll to the section with ID 'cpwInput'
            const element = document.getElementById("cpwInput");
            if (element) {
                element.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    </script>
@endif

@endpush