@extends('admin::layouts.master')

@section('title')
@lang('translation.Tests') / Edit
@endsection

@section('content')
@component('admin::components.breadcrumb')
@slot('li_1')
<a href="{{ route('admin.test.index') }}">Tests</a>
@endslot
@slot('title')
Edit Test
@endslot
@endcomponent

@if ($text = Session::get('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@elseif ($text = Session::get('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form id="test" action="{{ route('admin.test.update', $test->id) }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label> <span class="required">*</span>
                                <input type="text" class="form-control" id="name" name="name" placeholder="Name" value="{{ $test->name }}">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="test_type_id">Test Type</label> <span class="required">*</span>
                                <select class="form-control" name="test_type_id" id="test_type_id">
                                    <option value="">-- Select Test Type --</option>
                                    @foreach($test_types as $key => $value)
                                    <option @if($test->test_type_id == $value->id) selected @endif value="{{ $value->id }}">{{ $value->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="status">Status</label> <span class="required">*</span>
                                <select name="status" class="form-control">
                                    <option @if($test->status == '1')selected @endif value="1">Active</option>
                                    <option @if($test->status == '0')selected @endif value="0">Inactive</option>
                                    <option @if($test->status == '2')selected @endif value="2">Deleted</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="col-lg-12">
                                    <label for="test_score_type_id">Test Score Type</label> <span class="required">*</span>
                                    @foreach($test->testScores as $index => $value)
                                    <div id="row">
                                        <div class="input-group m-3">
                                            <input type="hidden" name="score_id[]" value="{{ $value->id }}">
                                            <select class="form-control" name="test_score_type_id[]" id="test_score_type_id">
                                                <option value="">-- Select Test Score Type --</option>
                                                @foreach($test_score_types as $key => $score)
                                                <option @if($value->test_score_type_id == $score->id) selected @endif value="{{ $score->id }}">{{ $score->name }}</option>
                                                @endforeach
                                            </select>
                                            <div class="input-group-prepend">
                                                <button class="btn btn-danger" id="DeleteRow" type="button">
                                                    <i class="bi bi-trash"></i>
                                                    Delete
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    <div id="newinput"></div>
                                    <button id="rowAdder" type="button" class="btn btn-dark">
                                        <span class="bi bi-plus-square-dotted">
                                        </span> ADD Test Score Type
                                    </button>
                                </div>

                            </div>
                        </div>
                        <div>
                            <button class="btn btn-primary" type="submit">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<!-- jquery-validation -->
<script src="{{ asset('themes/backend/custom/build/libs/jquery-validation/jquery.validate.min.js') }}"></script>

<script>
    $(function() {
        $('#test').validate({
            rules: {
                name: {
                    required: true,
                },
                test_type_id: {
                    required: true,
                },
                "test_score_type_id[]": {
                    required: true,
                },
                status: {
                    required: true
                },
            },
            messages: {
                name: "Please enter name",
                test_type_id: "Please choose one test type",
                "test_score_type_id[]": "Please choose one test score type",
                status: "Please select one status",
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.mb-3').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });

    $("#rowAdder").click(function() {
        newRowAdd =
            '<div id="row"> <div class="input-group m-3">' +
            '<select class="form-control" name="test_score_type_id[]" id="test_score_type_id">' +
            '<option value="">-- Select Test Score Type --</option>' +
            '@foreach($test_score_types as $key => $score)' +
            '<option value="{{ $score->id }}">{{ $score->name }}</option>' +
            '@endforeach' +
            '</select>' +
            '<div class="input-group-prepend">' +
            '<button class="btn btn-danger" id="DeleteRow" type="button">' +
            '<i class="bi bi-trash"></i> Delete</button> </div> </div> </div>'

        $('#newinput').append(newRowAdd);
    });

    $("body").on("click", "#DeleteRow", function() {
        $(this).parents("#row").remove();
    })
</script>
@endsection