@extends('modules.head') @section('contenido')

<div class="crm_container pendingAcc_edit_container box boxes">
    <div class="crm_container_1">
        <div>
            <label class="pendingAcc_subtitle">Log Type:</label><br>
            <select class="form-control" name="crm_logType">
                <option disabled selected value="0">Choose...</option>
                @foreach ($log_types as $log_type)
                    <option value="{{ $log_type->id }}">{{ $log_type->log_type_name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="pendingAcc_subtitle">Content:</label>
            <textarea class="form-control rounded-0" cols="50" rows="5" id="crm_content" name="crm_content" value=""></textarea>
        </div>
        <div>
            <input type="button" id="crm_btn" value="Add Log">
        </div>
    </div>


    <div class="crm_container_2">
        <div>
            <table class="table table-striped" id="crm_table">
               @if ($current_customer_crms->count())
                <thead>
                    <h3 style="color: #3c8dbc">Previous entries</h3>
                    <tr>
                        <th class="pendingAcc_subtitle">Content</th>
                        <th class="pendingAcc_subtitle">Log Type</th>
                    </tr>
                </thead>
                @endif
                <tbody>
                    @foreach ($current_customer_crms as $current_customer_crm)
                    <tr>
                        <td>{{ $current_customer_crm->content }}</td>
                        <td>{{ $current_customer_crm->log_type->log_type_name }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // CRM SECTION
        $("#crm_btn").click(() => {
            // get values from fields
            let log_type = $('select[name="crm_logType"]').val();
            let content = $('#crm_content').val();
            let customerId = $(location).attr("href").split('/').pop();

            let data = {
                crm_logType: log_type,
                crm_content: content,
                crm_customerId: customerId
            };
            let url = "/newCrmCreated";
            if (log_type && content && customerId) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    data: data,
                    url: url,
                    success: function(r) {

                    },
                    error: function(e) {
                        if (e.status >= 200 && e.status < 300) {
                            swal("Success", "The data has been submitted!", "success");
                            $('select[name="crm_logType"]').val(0);
                            $('#crm_content').val("");
                        }
                    },
                });
            } else {
                swal("Alert", "Fill out all the fields", "warning");
            }

        })
    });
</script>
@endsection