@extends('backend.layouts.app')
@section('content')

<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Edit Language</h4>
   </div>
   <div class="col-md-7 align-self-center text-right">
      <div class="d-flex justify-content-end align-items-center">
         <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
         <li class="breadcrumb-item active"><a href="{{route('language')}}">Language</a></li>
            <li class="breadcrumb-item active">Edit Language</li>
         </ol>
      </div>
   </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <form action="{{ route('language.update', $language->id) }}" method="post" id="form">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="name">Name<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                    <input type="text" name="name" value="{{ old('name', $language->name) }}" class="form-control stop_first_space" pattern="^[a-zA-Z_ ]*$" placeholder="Enter Category" id="name">
                                    @if(isset($errors) && $errors->has('name'))
                                        <p style="color:red;">{{ $errors->first('name') }}</p>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="language_name">Language Code<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                    <input type="text" name="language_name" value="{{ old('language_name', $language->lang_code) }}" class="form-control stop_first_space" pattern="^[a-zA-Z_ ]*$" placeholder="Enter Title" id="language_name">
                                    @if(isset($errors) && $errors->has('language_name'))
                                        <p style="color:red;">{{ $errors->first('language_name') }}</p>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="direction">Direction<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                    <select name="direction" class="form-control">
                                        <option value='ltr' {{ old('direction', $language->direction_type) == 'ltr' ? 'selected' : '' }}>Left to Right</option>
                                        <option value='rtl' {{ old('direction', $language->direction_type) == 'rtl' ? 'selected' : '' }}>Right to Left</option>
                                    </select>
                                    @if(isset($errors) && $errors->has('direction'))
                                        <p style="color:red;">{{ $errors->first('direction') }}</p>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="country_id">Country<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                    <select name="country_id" class="form-control">
                                        <option value=''>Select Country</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}" {{ old('country_id', $language->country_id) == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                    @if(isset($errors) && $errors->has('country_id'))
                                        <p style="color:red;">{{ $errors->first('country_id') }}</p>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox mr-sm-2 m-b-15">
                                        <input type="checkbox" class="custom-control-input" name="status" id="checkbox0" value="1" {{ old('status', $language->status) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="checkbox0">Is Active</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <button type="submit" id="submitButton" class="btn btn-primary">Update</button>
                        <a href="{{ route('language') }}" class="btn btn-secondary">Back</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
 document.addEventListener('DOMContentLoaded', function() {

 $(document).ready(function () {
    // Custom method to check if input has only spaces
    $.validator.addMethod("noOnlySpaces", function(value, element) {
        return $.trim(value).length !== 0;
    }, "This field cannot contain only spaces.");

    // Custom method for pattern validation
    $.validator.addMethod("regex", function(value, element, regexp) {
        var re = new RegExp(regexp);
        return this.optional(element) || re.test(value);
    }, "Please check your input.");

    $('#form').validate({
        rules: {
            name: {
                required: true,
                maxlength: 50,
                regex: "^[a-zA-Z_ ]*$", // only letters, underscores, and spaces
                noOnlySpaces: true
            },
            language_name: {
                required: true,
                maxlength: 50,
                regex: "^[a-zA-Z_ ]*$", // only letters, underscores, and spaces
                noOnlySpaces: true
            },
            direction: {
                required: true
            },
            country_id: {
                required: true
            },
            status: {
                required: false
            }
        },
        messages: {
            name: {
                required: "Please enter the name.",
                maxlength: "Name cannot exceed 50 characters.",
                regex: "Only letters, underscores, and spaces are allowed.",
                noOnlySpaces: "Name cannot contain only spaces."
            },
            language_name: {
                required: "Please enter the language code.",
                maxlength: "Language code cannot exceed 50 characters.",
                regex: "Only letters, underscores, and spaces are allowed.",
                noOnlySpaces: "Language code cannot contain only spaces."
            },
            direction: {
                required: "Please select a direction."
            },
            country_id: {
                required: "Please select a country."
            }
        },
        errorClass: "error",
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },
        highlight: function (element) {
            $(element).addClass('is-invalid').removeClass('is-valid');
        },
        unhighlight: function (element) {
            $(element).removeClass('is-invalid').addClass('is-valid');
        },
        submitHandler: function(form) {
            form.submit();  // Submit the form once it's valid
        }
    });
});
});
    </script>
@stop
