@extends('layout.app')
@section('title')
    {{ __('تعديل الفقرة') }}
@stop
@section('css')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/vendors-rtl.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/buttons.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/rowGroup.bootstrap4.min.css') }}">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css-rtl/core/menu/menu-types/vertical-menu.css') }}">
    <!-- END: Page CSS-->
    <link href="{{ asset('app-assets/hijri-date/css/bootstrap-datetimepicker.min.css') }}?1789554644"
        rel="stylesheet" />
    <style>
        .indicator-tag {
            background-color: #28a745;
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            display: inline-block;
            margin-right: 5px;
            margin-bottom: 5px;
            position: relative;
        }

        .indicator-tag .remove-tag {
            position: absolute;
            top: -5px;
            right: -5px;
            background: red;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .indicator-input {
            border: none;
            outline: none;
            width: 100%;
            margin-bottom: 10px;
            padding: 5px;
        }

        .indicator-container {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            padding: 10px;
            margin-bottom: 20px;
        }

        .indicator-container:focus-within {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .indicator-value-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
            width: 100%;
        }

        .indicator-value-group label {
            margin-bottom: 5px;
        }

        .indicator-value-group input {
            padding: 5px;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        .remove-tag {
            background-color: red;
            color: white;
            font-weight: bold;
            padding: 5px 8px;
            /* Adjust the padding to make the button smaller */
            border-radius: 50%;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            line-height: 1;
            /* Adjust this value to center the text vertically */
            font-size: 20px;
            /* Adjust the font size if needed */
            width: 24px;
            /* Set a fixed width */
            height: 24px;
            /* Set a fixed height */
            box-sizing: border-box;
        }
    </style>

@stop

@section('content')

    <div class="content-wrapper">
        <section class="app-standards-list">
            <div class="card">
                <div class="card-header mb-2">
                    <h4 class="card-title">{{ __('تعديل الفقرة') }}</h4>
                </div>
                <div class="card-datatable table-responsive pt-0">

                    <form class="create-new-standards modal-content pt-0"
                        action="{{ route('paragraphs.update', $paragraph->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-header mb-1">
                            <h5 class="modal-title" id="exampleModalLabel">تعديل الفقرة</h5>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="indicator_id">{{ __('المؤشر') }}</label>
                                <select name="indicator_id" class="form-control" id="indicator_id" required>
                                    @foreach (App\Models\Indicator::where('school_id', Auth::user()->school_id)->get() as $indicator)
                                        <option value="{{ $indicator->id }}"
                                            {{ $indicator->id == $paragraph->indicator_id ? 'selected' : '' }}>
                                            {{ $indicator->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="name">{{ __('الفقرة') }}</label>
                                <textarea name="name" class="form-control" required>{{ $paragraph->name }}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="requirements">{{ __('المتطلبات') }}</label>
                                <div id="requirements-container">
                                    @if ($paragraph->requirements && count($paragraph->requirements) > 0)
                                        @foreach ($paragraph->requirements as $requirement)
                                            <div class="input-group mb-2">
                                                <input type="text" name="requirements[]" class="form-control"
                                                    value="{{ $requirement->requirement }}" required>
                                                <div class="input-group-append">
                                                    <button class="btn btn-danger remove-requirement"
                                                        type="button">حذف</button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="input-group mb-2">
                                            <input type="text" name="requirements[]" class="form-control" required>
                                            <div class="input-group-append">
                                                <button class="btn btn-danger remove-requirement"
                                                    type="button">حذف</button>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                <button type="button" class="btn btn-primary" id="add-requirement">إضافة متطلب</button>
                            </div>
                            <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                            <input type="hidden" name="status" value="0">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary mr-1 data-submit">تحديث</button>
                            <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">الغاء</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('js')
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/responsive.bootstrap4.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jszip.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js') }}"></script>

    <!-- END: Page Vendor JS-->

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('add-requirement').addEventListener('click', function() {
                const container = document.getElementById('requirements-container');
                const newRequirement = document.createElement('div');
                newRequirement.classList.add('input-group', 'mb-2');
                newRequirement.innerHTML = `
                    <input type="text" name="requirements[]" class="form-control" required>
                    <div class="input-group-append">
                        <button class="btn btn-danger remove-requirement" type="button">حذف</button>
                    </div>`;
                container.appendChild(newRequirement);
            });

            document.getElementById('requirements-container').addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-requirement')) {
                    e.target.closest('.input-group').remove();
                }
            });
        });
    </script>
@stop