@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') }}?1789569063"
        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;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            line-height: 1;
            font-size: 20px;
            width: 24px;
            height: 24px;
            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('indicators.update', $indicator->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="dept_id">{{ __('المعيار') }}</label>
                                <select name="standard_id" class="form-control" id="standard_id" required>
                                    @foreach (App\Models\Standards::get() as $department)
                                        <option value="{{ $department->id }}"
                                            {{ $department->id == $indicator->dept_id ? 'selected' : '' }}>
                                            {{ $department->standard_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="name">{{ __('المؤشر') }}</label>
                                <input type="text" name="name" class="form-control" id="name"
                                    value="{{ $indicator->name }}" required>
                            </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-->
@stop