@extends('layouts.app')
@section('content')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Contact-us</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ action('HomeController@index') }}">Home</a></li>
                <li class="breadcrumb-item active">Contact-us</li>
            </ol>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form id="contactUsForm" enctype="multipart/form-data" action="javascript:void(0)"
                            class="form-horizontal" autocomplete="off">
                            @csrf
                            <input type="hidden" name="update_id" id="update_id"
                                value="{{ isset($contact->id) ? $contact->id : '' }}">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="name" class="col-sm-6 control-label">Name <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="name" name="name"
                                                placeholder="Enter name"
                                                value="{{ isset($contact->name) ? $contact->name : '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="email" class="col-sm-6 control-label">Email <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <input type="email" class="form-control" id="email" name="email"
                                                placeholder="Enter email address"
                                                value="{{ isset($contact->email) ? $contact->email : '' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="phone_number" class="col-sm-6 control-label">Phone Number <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="phone_number" name="phone_number"
                                                placeholder="Enter phone number"
                                                value="{{ isset($contact->phone_number) ? $contact->phone_number : '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="facebook" class="col-sm-6 control-label">Facebook Page Id <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="facebook_id" name="facebook_id"
                                                placeholder="Enter facebook id"
                                                value="{{ isset($contact->facebook_id) ? $contact->facebook_id : '' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="instagram_link" class="col-sm-6 control-label">Instagram Link <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="instagram" name="instagram"
                                                placeholder="Enter instagram link"
                                                value="{{ isset($contact->instagram) ? $contact->instagram : '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="whatsapp" class="col-sm-6 control-label">Whatsapp <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="whatsapp" name="whatsapp"
                                                placeholder="Enter whatsapp link"
                                                value="{{ isset($contact->whatsapp) ? $contact->whatsapp : '' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="twitter" class="col-sm-6 control-label">Twitter <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="twitter" name="twitter"
                                                placeholder="Enter twitter link"
                                                value="{{ isset($contact->twitter) ? $contact->twitter : '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="message" class="col-sm-6 control-label">Message <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <textarea name="message" class="form-control" id="" placeholder="Enter message" cols="30"
                                                rows="5">{{ isset($contact->message) ? $contact->message : '' }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="therapy_title" class="col-sm-6 control-label">Subject <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <textarea name="subject" class="form-control" id="" placeholder="Enter subject" cols="30"
                                                rows="5">{{ isset($contact->subject) ? $contact->subject : '' }}</textarea>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="therapy_title" class="col-sm-6 control-label">Content <span
                                                class="red">*</span></label>
                                        <div class="col-sm-12">
                                            <textarea name="content" class="form-control" id="" placeholder="Enter message" cols="30"
                                                rows="5">{{ isset($contact->content) ? $contact->content : '' }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-offset-2 col-sm-12 py-4" style="margin-top:10px;">
                                <button type="submit" class="btn btn-primary" id="btn-save" value="submit">Add contact
                                    us
                                </button>
                            </div>
                        </form>
                        <div style="clear:both;height:40px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#contactUsForm").validate({
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    phone_number: {
                        required: true,
                        digits: true,
                        maxlength: 10,
                        minlength: 10,
                    },
                    facebook_id: {
                        required: true,
                        digits: true,
                    },
                    instagram: {
                        required: true
                    },
                    whatsapp: {
                        required: true
                    },
                    twitter: {
                        required: true
                    },
                    message: {
                        required: true
                    },
                    subject: {
                        required: true
                    },
                    content: {
                        required: true
                    },
                },
                messages: {
                    name: {
                        required: "Enter name"
                    },
                    email: {
                        required: "Enter email"
                    },
                    phone_number: {
                        required: "Enter phone number",
                    },
                    facebook_id: {
                        required: "Enter facebook Id"
                    },
                    instagram: {
                        required: "Enter instagram"
                    },
                    whatsapp: {
                        required: "Enter whatsapp"
                    },
                    twitter: {
                        required: "Enter twitter"
                    },
                    message: {
                        required: "Enter message"
                    },
                    subject: {
                        required: "Enter subject"
                    },
                    content: {
                        required: "Enter content"
                    },
                },
                submitHandler: function(form) {
                    var contactUsForm = $(form).serialize();
                    $.ajax({
                        type: "POST",
                        url: "{{ url('contact-us/store') }}",
                        data: contactUsForm,
                        dataType: "json",
                        success: function(response) {
                            toastr.success(response.success);
                            window.location.href = '{{ url('home') }}'
                        },
                        error: function(xhr, status, error) {
                            console.error(xhr.responseText);

                        }
                    });
                }
            });

        });
    </script>
@endsection