@extends('layouts.app')
@section('content')

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>SPOCs <small>{{isset($spoc_id) ? "Edit" : "Create"}}</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active">{{isset($spoc_id) ? "Edit" : "Create"}} SPOC</li>
        </ol>
    </div>

    <div class="float-end">
        <a class="btn btn-primary float-right" href="{{url('spocs')}}"> <i class="fa fa-arrow-left"></i> Back</a>
    </div>
</div>
<!-- PAGE-HEADER END -->

<div class="content mt-3">
    <div class="card shadow mb-4">
        <div class="card-header">
            {{isset($spoc_id) ? "Edit" : "Create New"}} SPOC
        </div>
        <div class="card-body">
            {{ Form::open(['id'=>'spocForm']) }}
            {{ Form::hidden('spoc_id', '', ['id'=>'spoc_id']) }}

            <p class="lead"> SPOC Details:</p>
            <div class="row">
                <div class="col-md-6">
                    <label for="spoc_name" class="col-form-label">Name <k>*</k></label>
                    {{ Form::text('spoc_name', '', ['class'=>'form-control', 'id'=>'spoc_name']) }}
                    <span class="text-danger" id="spoc_name-error"></span>
                </div>

                <div class="col-md-6">
                    <label for="spoc_email" class="col-form-label">Email <k>*</k></label>
                    {{ Form::email('spoc_email', '', ['class'=>'form-control', 'id'=>'spoc_email']) }}
                    <span class="text-danger" id="spoc_email-error"></span>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <label for="spoc_phone" class="col-form-label">Phone <k>*</k></label>
                    {{ Form::text('spoc_phone', '', ['class'=>'form-control', 'id'=>'spoc_phone']) }}
                    <span class="text-danger" id="spoc_phone-error"></span>
                </div>

                <div class="col-md-6">
                    <label for="spoc_position" class="col-form-label">Position</label>
                    {{ Form::text('spoc_position', '', ['class'=>'form-control', 'id'=>'spoc_position']) }}
                    <span class="text-danger" id="spoc_position-error"></span>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <label for="spoc_remarks" class="col-form-label">Remarks</label>
                    {{ Form::textarea('spoc_remarks', '', ['class'=>'form-control', 'rows'=>2, 'id'=>'spoc_remarks']) }}
                    <span class="text-danger" id="spoc_remarks-error"></span>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-4">
                    <label for="spoc_status" class="col-form-label">Status <k>*</k></label>
                    {{ Form::select('spoc_status', ['1' => 'Active', '0' => 'Inactive'], '', ['class'=>'form-control', 'id'=>'spoc_status']) }}
                    <span class="text-danger" id="spoc_status-error"></span>
                </div>
            </div>

            <div class="form-group row mt-4 mb-0">
                <div class="col-md-12" align="right">
                    {{ Form::submit('Submit', ['class'=>'btn btn-primary', 'id'=>'saveBtn']) }}
                </div>
            </div>
            {{ Form::close() }}
        </div>
    </div>
</div>

@stop

@section('scripting')

<script type="text/javascript">

    $(document).ready(function($) {
        var spoc_id = "{{ isset($spoc_id) ? $spoc_id : false }}";

        if (spoc_id) {
            $.ajax({
                url: "{{ url('spoc/details/') }}/" + spoc_id,
                type: "GET",
                dataType: 'json',
                success: function(data) {
                    $('#spocForm').trigger("reset");
                    $('#spoc_id').val(data.id);
                    $('#spoc_name').val(data.name);
                    $('#spoc_email').val(data.email);
                    $('#spoc_phone').val(data.phone);
                    $('#spoc_position').val(data.position);
                    $('#spoc_remarks').val(data.remarks);
                    $('#spoc_status').val(data.status);
                },
                error: function(data) {
                    console.error(data);
                }
            });
        }

        if ($("#spocForm").length > 0) {
            $("#spocForm").validate({
                errorClass: "is-invalid",
                rules: {
                    spoc_name: 'required',
                    spoc_email: {
                        required: true,
                        email: true
                    },
                    spoc_phone: {
                        required: true,
                        number: true
                    },
                    spoc_status: 'required',
                },
                messages: {
                    spoc_name: "Please enter the SPOC's name.",
                    spoc_email: {
                        required: "Please enter the SPOC's email.",
                        email: "Please enter a valid email address."
                    },
                    spoc_phone: {
                        required: "Please enter the SPOC's phone number.",
                        number: "Phone number must be numeric."
                    },
                    spoc_status: "Please select the SPOC's status."
                },
                submitHandler: function(form) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $('#saveBtn').html('Sending..');
                    $.ajax({
                        data: $('#spocForm').serialize(),
                        url: "{{ url('spoc/store') }}",
                        type: "POST",
                        dataType: 'json',
                        success: function(data) {
                            swal({
                                title: "Success!",
                                text: data.msg,
                                icon: "success",
                            }).then(() => {
                                window.location.replace("{{url('spocs')}}");
                            });
                        },
                        error: function(data) {
                            console.error(data);
                            $('#saveBtn').html('Submit');
                        }
                    });
                }
            });
        }
    });

</script>

@endsection