@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Detail Data'])

    <div class="row">

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

            {{-- TOP BAR --}}
            <div class="card shadow-lg mx-4 mt-top-menu">

                <div class="card-body p-3">

                    <div class="row gx-4">

                        <div class="col-auto my-auto">

                            <div class="h-100">

                                <h5 class="mb-1">
                                    Detail {{ $title_menu ?? 'ISO Clauses' }}
                                </h5>

                                <p class="mb-0 font-weight-bold text-sm">
                                    Module Detail {{ $title_menu ?? 'ISO Clauses' }}
                                </p>

                            </div>

                        </div>

                        <div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">

                            <div class="nav-wrapper position-relative inset-e-0">

                                <ul class="nav nav-pills nav-fill p-1 gap-2" role="tablist">

                                    <li class="nav-item">
                                        <h4 class="mb-0">
                                            <button class="btn btn-secondary mb-0 w-100"
                                                onclick="window.location='{{ URL::to($url_menu) }}'">
                                                <i class="fas fa-backward"></i>
                                                <span class="ms-1">Kembali</span>
                                            </button>
                                        </h4>
                                    </li>


                                    @if (isset($authorize) && $authorize->edit == '1')
                                        <li class="nav-item tab-action">
                                            <h4 class="mb-0">
                                                <button class="btn btn-warning mb-0 w-100 btn-edit">
                                                    <i class="fas fa-edit"></i>
                                                    <span class="ms-1">Edit</span>
                                                </button>
                                            </h4>
                                        </li>

                                        <li class="nav-item tab-action d-none">
                                            <h4 class="mb-0">
                                                <button type="submit" class="btn btn-primary mb-0 w-100" form="form-edit">
                                                    <i class="fas fa-save"></i>
                                                    <span class="ms-1">Update</span>
                                                </button>
                                            </h4>
                                        </li>
                                    @endif

                                </ul>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- FORM --}}
    <div class="container-fluid py-4">

        <div class="row">

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

                <div class="card">

                    <div class="card-body">

                        @include('components.alert')

                        <form action="{{ url($url_menu . '/' . encrypt($row->idclauses)) }}" method="POST" id="form-edit">

                            @csrf
                            @method('PUT')

                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Standar ISO</label>
                                        <input type="text" class="form-control state-form"
                                            value="{{ $row->code }} - {{ $row->name }}" disabled>
                                    </div>
                                </div>

                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Nomor Klausul</label>
                                        <input type="text" class="form-control state-form" value="{{ $row->clause_number }}"
                                            disabled>
                                    </div>
                                </div>

                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Level</label>
                                        <input type="number" class="form-control state-form" value="{{ $row->level }}"
                                            disabled>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Nama Klausul</label>
                                        <input type="text" class="form-control state-form" value="{{ $row->clause_name }}"
                                            disabled>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Deskripsi</label>
                                        <textarea class="form-control state-form" rows="4"
                                            disabled>{{ $row->description }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">Status</label>
                                        <input type="text" class="form-control state-form"
                                            value="{{ ($row->isactive == '1') ? 'Active' : 'Inactive' }}" disabled>
                                    </div>
                                </div>
                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function () {

            $('.btn-edit').click(function (e) {

                e.preventDefault();
                $('.tab-action').toggleClass('d-none');

                // Note: The fields are readonly to prevent modifying them without fully editing since idstandards uses a select in actual edit mode.
                // Redirecting to edit page is a better approach in this case, but we stick to the auto style which uses toggleDisabled for simplicity.
                // To properly support saving from show page, we would need to include the actual form fields.
                // Since this is just a quick show view matching, let's just enable the link to actual edit.
                window.location.href = "{{ url($url_menu . '/edit/' . encrypt($row->idclauses)) }}";

            });

        });
    </script>
@endpush