@extends('admin')

@push('after-style')
<link rel="stylesheet" href="{{ asset('adminn/plugins/summernote/summernote-bs4.css') }}">
@endpush

@push('header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Contact</h1>
            </div><!-- /.col -->
            <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">Contact</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
@endpush

@section('content')
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-12 col-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <!-- <h3 class="card-title">DataTable with default features</h3> -->
                <!-- <button class="btn-sm btn btn-primary" onclick="add();">tambah</button> -->
            </div>
            <!-- /.card-header -->
            <form id="form">
                <div class="card-body">
                    <div class="form-group">
                        <label for="location">Content</label>
                        <textarea class="form-control" name="location" id="location" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                        {{ $contact->location }}
                        </textarea>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <textarea class="form-control" name="email" id="email" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                        {{ $contact->email }}
                        </textarea>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone</label>
                        <textarea class="form-control" name="phone" id="phone" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                        {{ $contact->phone }}
                        </textarea>
                    </div>
                    <div class="form-group">
                        <label for="working_hours">Working Hour</label>
                        <textarea class="form-control" name="working_hours" id="working_hours" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                        {{ $contact->working_hours }}
                        </textarea>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: unset;">
                    <button type="button" id="btnSave" onclick="save();" class="btn btn-primary waves-effect waves-light">Simpan</button>
                    <button type="reset" class="btn btn-secondary waves-effect">Hapus</button>
                </div>
            </form>
            <!-- /.card-body -->
        </div>
    </div>
</div>


@endsection

@push('after-script')
<!-- Summernote -->
<script src="{{ asset('adminn/plugins/summernote/summernote-bs4.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#location').summernote({
            height: "200",
        });

        $('#email').summernote({
            height: "200",
        });

        $('#phone').summernote({
            height: "200",
        });

        $('#working_hours').summernote({
            height: "200",
        });
    });

    function save() {
        $('.text-error').empty(); // clear error string
        $('#btnSave').text('Menyimpan...'); //change button text
        $('#btnSave').attr('disabled', true); //set button disable 

        var formData = new FormData($('#form')[0]);
        formData.append("_token", "{{ csrf_token() }}");

        $.ajax({
            url: "{{ url('/admin/contact/update') }}",
            type: "POST",
            data: formData,
            dataType: "JSON",
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data);
                if (data.status) //if success close modal and reload ajax table
                {
                    var text = '';
                    text = 'Data Updated Successfully';

                    toastr.success(text);
                    // notification('success', 'Success', text);
                    // $('#modal_form').modal('hide');
                    // reload_table();
                    location.reload();
                } else {
                    for (const [key, value] of Object.entries(data.message)) {
                        $('#' + key + '_error').html('*' + value);
                    }
                }
                $('#btnSave').text('Simpan');
                $('#btnSave').attr('disabled', false); //set button enable 
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error adding / update data');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
                // $('#btnSave').attr('disabled', false); //set button enable 
            }
        });
    }
</script>
@endpush