@extends('backend.layouts.app')

@section('content')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">Edit Make</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"><a href="{{ route('makes') }}">Make</a></li>
                    <li class="breadcrumb-item active">Edit Make</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="content-wrapper">
            <section class="content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-primary">
                            <div class="card-body">
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <form id="make_form" action="{{ route('makes.update', $make->id) }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label for="title">Title<span
                                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                                <input type="text" id="title" name="title" class="form-control"
                                                    placeholder="Enter make title" value="{{ old('title', $make->title) }}">
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label for="logo">Logo<span
                                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                                <input type="file" id="logo" name="logo" class="form-control">
                                            </div>
                                            @if ($make->logo)
                                                <a target="_blank" href="{{ asset('uploads/makes/' . $make->logo) }}"><img src="{{ asset('uploads/makes/' . $make->logo) }}" alt="Logo"
                                                    width="100" class="mt-2"></a>
                                            @endif
                                        </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="is_active" value="1"
                                                        {{ old('status', $make->status) ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="is_active">Is Active</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <button type="submit" class="btn btn-primary">Update</button>
                                            <a href="{{ route('makes') }}" class="btn btn-secondary">Back</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    @push('custom-script')
        <script>

             $.validator.addMethod("validImageExtension", function(value, element) {
    if (!value) return true; // skip validation if empty
    var extension = value.split('.').pop().toLowerCase();
    return ["jpg", "jpeg", "png"].includes(extension);
}, "Only JPG, JPEG or PNG files are allowed.");


            document.addEventListener('DOMContentLoaded', function() {
                $(document).ready(function() {
                    $.validator.addMethod("noOnlySpaces", function(value, element) {
                        return $.trim(value).length !== 0;
                    }, "Please enter a value other than spaces.");

                    $('#make_form').validate({
                        rules: {
                            title: {
                                required: true,
                                maxlength: 50,
                                noOnlySpaces: true,
                                remote: {
                                    url: "{{ route('makes.checkTitle') }}",
                                    type: "get",
                                    data: {
                                        title: function() {
                                            return $("#title").val();
                                        },
                                        id: "{{ $make->id }}" // avoid matching self on validation
                                    }
                                }
                            },
                            logo: {
                                 validImageExtension: true
                            }

                        },
                        messages: {
                            title: {
                                required: "Title is required.",
                                maxlength: "Title cannot exceed 50 characters.",
                                remote: "This title already exists."
                            },
                            logo: {
                                validImageExtension: "Only JPG, JPEG or PNG files are allowed."
                            }
                        },
                        errorElement: "div",
                        errorPlacement: function(error, element) {
                            error.addClass("invalid-feedback");
                            element.closest(".form-group").append(error);
                        },
                        highlight: function(element, errorClass, validClass) {
                            $(element).addClass("is-invalid").removeClass("is-valid");
                        },
                        unhighlight: function(element, errorClass, validClass) {
                            $(element).removeClass("is-invalid");
                        },
                        submitHandler: function(form) {
                            form.submit();
                        }
                    });
                });
            });
        </script>
    @endpush
@stop
