@extends('admin.layouts.app')

@section('head')
    <style>
        .choice{
            width: 70%;
            display: inline-block !important;
            margin-right: 10px;
        }
    </style>
@endsection

@section('breadcrumb')
    @include('admin.includes.breadcrumb', [
        'title'     => __('admin.categories.index'),
        'menu'      => [
            __('admin.categories.index') => route('admin.categories.index'),
        ],
    ])
@endsection

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <!--begin::List Widget 3-->
            <div class="card card-custom card-stretch gutter-b">
                <!--begin::Header-->
                <div class="card-header border-0">
                    <h3 class="card-title font-weight-bolder text-dark">عرض</h3>
                    <div class="card-toolbar">
                        <div class="dropdown dropdown-inline">
                            <a href="#" class="btn btn-light-primary btn-sm font-weight-bolder dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">خيارات</a>
                            <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
                                <!--begin::Navigation-->
                                <ul class="navi navi-hover">
                                    <li class="navi-item">
                                        <a href="{{ route('admin.categories.edit', $category->id) }}" class="navi-link">
                                            <span class="navi-icon">
                                                <i class="flaticon2-pen text-primary"></i>
                                            </span>
                                            <span class="navi-text">تعديل</span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" onclick="$('.deleteForm').submit()" style="cursor: pointer;">
                                            <span class="navi-icon">
                                                <i class="flaticon-delete text-danger"></i>
                                            </span>
                                            <span class="navi-text">حذف</span>
                                        </a>
                                        <form method="post" class="deleteForm" action="{{ route('admin.categories.destroy', $category->id) }}" style="display: inline;" title="حذف">
                                            {{ csrf_field() }}
                                            <input type="hidden" name="_method" value="DELETE" />
                                        </form>
                                    </li>
                                </ul>
                                <!--end::Navigation-->
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="card-body pt-2">
                    <!--begin::Item-->
                    <div class="d-flex align-items-center mb-10">
                        <div class="d-flex flex-column flex-grow-1 font-weight-bold">
                            <a class="text-dark text-hover-primary mb-1 font-size-lg">{{ __('الاسم') }}</a>
                            <span class="text-muted">{{ $category->name }}</span>
                        </div>
                    </div>                 

                    <div class="d-flex align-items-center mb-10">
                        <div class="d-flex flex-column flex-grow-1 font-weight-bold">
                            <a class="text-dark text-hover-primary mb-1 font-size-lg">{{ __('الوصف') }}</a>
                            <span class="text-muted">{{ $category->description }}</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-10">
                        <div class="d-flex flex-column flex-grow-1 font-weight-bold">
                            <a class="text-dark text-hover-primary mb-1 font-size-lg">{{ __('الحالة') }}</a>
                            <span class="text-muted">{{ $category->active ? 'مفعل' : 'غير مفعل' }}</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-10">
                        <div class="d-flex flex-column flex-grow-1 font-weight-bold">
                            <a class="text-dark text-hover-primary mb-1 font-size-lg" style="margin-bottom: 20px;display: block;">{{ __('الاسئلة') }}</a>
                            @foreach($category->questions as $question)
                                <div class="row">
                                    <div class="col-md-11">
                                        <input type="text" disabled class="no-star form-control" value="{{ $question->question }}">
                                    </div>
                                </div>
                                <div class="row" style="margin: 20px 0;">
                                    <div class="col-md-4">
                                        <input type="radio" onclick="return false" class="no-star radio-input" value="option1" required {{ $question->choices[0]['correct_choice'] ? 'checked' : '' }}/>
                                        <input type="text" disabled class="form-control no-star choice" value="{{ $question->choices[0]['choice'] }}">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="radio" onclick="return false" class="no-star radio-input" value="option2" {{ $question->choices[1]['correct_choice'] ? 'checked' : '' }}/>
                                        <input type="text" disabled class="form-control no-star choice" value="{{ $question->choices[1]['choice'] }}">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="radio" onclick="return false" class="no-star radio-input" value="option3" {{ $question->choices[2]['correct_choice'] ? 'checked' : '' }}/>
                                        <input type="text" disabled class="form-control no-star choice" value="{{ $question->choices[2]['choice'] }}">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                <!--end::Body-->
            </div>
            <!--end::List Widget 3-->
        </div>
    </div>
@endsection