@extends('adminlte::page')

@section('title', 'Add New Business')

@section('content_header')
    <h1>Add New Business</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('business.store') }}" method="POST" id="businessForm">
                @csrf
                <div class="form-group row">
                    <div class="col-md-6">
                        <label>Name:</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label>Phone:</label>
                        <input type="text" name="phone_number" class="form-control" required>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label>Email:</label>
                        <input type="email" name="email" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label>Vehicle:</label>
                        <input type="text" name="vehicle_name" class="form-control" required>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label>Transporter:</label>
                        <input type="text" name="transporter_name" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label>Message:</label>
                        <textarea name="message" class="form-control"></textarea>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end">
                    <a href="{{ route('business') }}" class="btn btn-danger mx-1">Cancel</a>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
                <!-- Submit Button -->
            </form>
        </div>
    </div>
@endsection
@section('js')

    <script>
        $(document).ready(function() {
            $("#businessForm").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 3
                    },
                    phone_number: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 15
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    vehicle_name: {
                        required: true,
                        minlength: 2
                    },
                    transporter_name: {
                        required: true,
                        minlength: 2
                    },
                    message: {
                        required: true,
                        minlength: 5
                    }
                },
                messages: {
                    name: {
                        required: "<strong>Name is required.</strong>",
                        minlength: "<strong>Name must be at least 3 characters long.</strong>"
                    },
                    phone_number: {
                        required: "<strong>Phone number is required.</strong>",
                        digits: "<strong>Phone number must contain only digits.</strong>",
                        minlength: "<strong>Phone number must be at least 10 digits.</strong>",
                        maxlength: "<strong>Phone number can't be more than 15 digits.</strong>"
                    },
                    email: {
                        required: "<strong>Email is required.</strong>",
                        email: "<strong>Enter a valid email address.</strong>"
                    },
                    vehicle_name: {
                        required: "<strong>Vehicle name is required.</strong>",
                        minlength: "<strong>Vehicle name must be at least 2 characters long.</strong>"
                    },
                    transporter_name: {
                        required: "<strong>Transporter name is required.</strong>",
                        minlength: "<strong>Transporter name must be at least 2 characters long.</strong>"
                    },
                    message: {
                        required: "<strong>Message is required.</strong>",
                        minlength: "<strong>Message must be at least 5 characters long.</strong>"
                    }
                },
                errorElement: "strong", // Increased text size without CSS
                highlight: function(element) {
                    $(element).addClass("is-invalid");
                },
                unhighlight: function(element) {
                    $(element).removeClass("is-invalid");
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                }
            });
        });
    </script>
@endsection