@extends('voyager::master')

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@stop

@section('page_title', 'Contacts')

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-people"></i>
        Add Contact
    </h1>
@stop

@section('content')
    <div class="page-content edit-add container-fluid">
        <div class="row">
            <div class="col-sm-12">

                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <div class="loader-wrapper">
                            <div class="content">
                                <div class="loader"></div>
                            </div>
                        </div>
                        <div id="_notification"></div>
                        <form id="form_contact">
                            <div class="row">
                                <div class="col-md-4">
                                    <input type="hidden" name="id" value="">
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="contact_type">Select Type <span class='required'>*</span>:</label>
                                        <div class="col-sm-9">
                                            <select class="form-control" name="contact_type">
                                                <option value="supplier" selected>Supplier</option>
                                                <option value="wholesaler">Wholesaler</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="supplier">Supplier <span class='required'>*</span>:</label>
                                        <div class="col-sm-9">
                                            <select class="form-control" name="supplier">
                                                <option value="">[Select Supplier]</option>
                                                @if(!empty($suppliers))
                                                  @foreach($suppliers as $key => $sup)
                                                    <option value="{{$key}}">{{ $sup }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="state">State <span class='required'>*</span>:</label>
                                        <div class="col-sm-9">
                                            <select class="form-control" name="state">
                                                <option value="">[Select State]</option>
                                                @if(!empty($states))
                                                  @foreach($states as $key => $state)
                                                    <option value="{{$key}}">{{ $state }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="name">Name <span class='required'>*</span>:</label>
                                        <div class="col-sm-9">
                                            <input required="" type="text" class="form-control" name="name" placeholder="Name">
                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-5">

                                    <div class="form-group">
                                        <label class="control-label col-sm-1" for="notes">Notes:</label>
                                        <div class="col-sm-11">
                                            <textarea class="form-control" name="notes" rows="6" placeholder="Notes"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <h3>Main Contact</h3>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label col-sm-2" for="address">Address:</label>
                                                <div class="col-sm-10">
                                                    <input required="" type="text" class="form-control" name="address" placeholder="Address">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-2" for="phone">Phone:</label>
                                                <div class="col-sm-10">
                                                    <input required="" type="text" class="form-control" name="phone" placeholder="Phone">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-2" for="email">Email:</label>
                                                <div class="col-sm-10">
                                                    <input required="" type="email" class="form-control" name="email" placeholder="Email">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <h3>Contacts</h3>
                                    <div class="contact-data">
                                        <div class="row"></div>
                                    </div>
                                    <div class="add-contact-wrapper"><button type="button" class="btn btn-secondary add-contact"><span class="icon voyager-plus"></span> Add Contact</button></div>
                                </div>
                                <div class="col-md-12">
                                    <button class="btn btn-primary save-contacts" type="button">Save</button>
                                </div>
                            </div><!-- row -->
                        </form>
                        <div class="contact-template">
                            <div class="contact col-md-6">
                                <div class="form-group-wrapper">
                                    <div class="delete-wrapper">
                                        <button class="btn btn-danger btn-sm btn-delete-contact" type="button">x</button>
                                    </div>
                                    <input type="hidden" name="_contact_id">
                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="_contact_name">Name:</label>
                                        <div class="col-sm-10">
                                            <input required="" type="text" class="form-control" name="_contact_name" placeholder="Name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="_contact_job">Job Title:</label>
                                        <div class="col-sm-10">
                                            <input required="" type="text" class="form-control" name="_contact_job" placeholder="Job title">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="_contact_email">Email:</label>
                                        <div class="col-sm-10">
                                            <input required="" type="email" class="form-control" name="_contact_email" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="_contact_phone">Phone:</label>
                                        <div class="col-sm-10">
                                            <input required="" type="email" class="form-control" name="_contact_phone" placeholder="Phone">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- panel-body -->
                </div><!-- panel -->

            </div>
        </div>
    </div>

<style type="text/css">
    .loader-wrapper {
        display: none;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 25;
        margin: -30px -20px;
    }

    .loader-wrapper .content {
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        background-color: rgba(255,255,255,0.8);
        z-index: 25;
    }
    .loader {
        border: 16px solid #f3f3f3;
        border-top: 16px solid #89c33f;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
    }
    .loader:after {
        content: none;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    form#form_contact h3 {
        font-size: 20px;
        margin-bottom: 25px;
    }
    span.required {
        color: red;
    }
    .clickable-row {
        cursor: pointer;
    }
    .form-group {
        margin-bottom: 15px;
        overflow: hidden;
    }
    .contact-template {
        display : none;
    }
    .contact-data .form-group-wrapper {
        padding: 15px;
        border: 1px dashed #cecece;
        box-sizing: border-box;
        margin: 0;
        border-radius: 5px;
    }
    .contact-data > .row {
        margin: 15px;
    }
    .btn-primary.save-contacts {
        background: #89c33f;
        font-size: 1.2rem;
        padding: 0.75rem 1.5rem;
        margin-right: 15px;
    }
    .add-contact-wrapper .icon.voyager-plus:before {
        color: #89c33f;
        font-size: 24px;
    }
    .add-contact-wrapper .icon.voyager-plus {
        height: 24px;
        width: 24px;
        vertical-align: middle;
    }
    .delete-wrapper {
        position: absolute;
        right: 20px;
        top: 0;
        z-index: 10;
    }
    .btn-delete-contact {
        padding: 3px 8px;
    }

    div#_notification {
        margin-bottom: 25px;
    }
</style>
@stop

@section('javascript')
    <script>
        $(document).ready(function(){

            var _select_type = $("select[name='contact_type']");
            var _select_supplier = $("select[name='supplier']");
            var _select_state = $("select[name='state']");
            var _name = $("input[name='name']");
            var _btn_add = $("button.add-contact");
            var _btn_save = $("button.save-contacts");
            var _template = $(".contact-template");        
            var _contacts = $(".contact-data .row");
            var _contact_limit = 5;
            var _loader = $(".loader-wrapper");

            var _save_url = "