@extends('layouts.app')

@section('content')
<div class="wrapper">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1>Leads</h1>
            </div>
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item active">Create Leads</li>
              </ol>
            </div>
          </div>
        </div><!-- /.container-fluid -->
      </section>

      <!-- Main content -->
      <section class="content">
        <div class="container">
          <div class="row">
            <!-- left column -->
            <div class="col-md-12">
              <!-- general form elements -->
              <div class="card card-primary p-4">
                <div class="card-header">
                  <h3 class="card-title">Add New Lead</h3>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <form action="{{route('customer.store')}}" method="POST" id="form-validate">
                  @csrf
                  <div class="card-body">
                      <div class="row">
                          <div class="col-md-6">
                              <div class="form-group">
                                  <label for="name">Full Name</label>
                                  <input type="text" required class="form-control" id="name" name="name" placeholder="Enter Full Name">
                                </div>
                          </div>
                          <div class="col-md-6">
                              <div class="form-group">
                                  <label for="email">Email</label>
                                  <input type="email" required class="form-control" id="email" name="email" placeholder="Enter Email">
                                </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-md-6">
                              <div class="form-group">
                                  <label for="phone">Phone Number</label>
                                  <input type="text" required class="form-control" id="phone" name="phone" placeholder="Enter Phone">
                                </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group"><label for="brand">Brand</label>
                                <select required class="form-control" id="brand" name="brand">
                                    @foreach ($brands as $brand)
                                        <option value="{{ str_replace('www.designlayeragency', 'designlayeragency', str_replace('https:', '', str_replace('/', '', $brand->b_url)))  }}">{{$brand->b_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                          <div class="col-md-12">
                              <div class="form-group">
                                  <label for="phonenumber">Description</label>
                                  <textarea class="form-control" id="description" name="brief" placeholder="Description"> </textarea>
                                </div>
                          </div>
                      </div>
                  </div>
                  <!-- /.card-body -->

                  <div class="card-footer">
                    <button type="submit" class="btn btn-primary mr-2">Submit</button>
                    <a href="{{route('customer.index')}}"><button type="button" class="btn btn-danger">Cancel</button></a>
                  </div>
                </form>
              </div>
              <!-- /.card -->


            </div>
            <!--/.col (left) -->
          </div>
          <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
      </section>
      <!-- /.content -->
    </div>

    <aside class="control-sidebar control-sidebar-dark">
      <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
  </div>
  <!-- ./wrapper -->


@endsection
@section('afterScript')
<script>

    $(document).ready(function () {
        $('#form-validate').validate({
            rules: {
                name: {
                required: true,
                },
                email: {
                required: true,
                email: true,
                },
                phone: {
                required: true,
                },
                brand: {
                required: true,
                }
            },
            messages: {
                name: {
                required: "Please enter name",
                },
                email: {
                required: "Please enter Email",
                email: "Please enter a valid Email Address",
                },
                phone: {
                required: "Please enter Phone Number",
                },
                brand: {
                required: "Please select Brand",
                }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
                $(element).addClass('is-valid');
            }
        });
    });


</script>

@endsection