@extends('layouts.layout')
@section('title', 'Customer Account')

@section('content')
@include('customers.customer_sidebar')

    <div class="tab-content-wrap">
        <!-- first -->
        <div class="tab-pane">
        <div class="tab-pane">
                <div class="d-flex justify-content-between align-items-center mb-4">
                <h3 class="mb-4">Customer Notes</h3>
                    <!-- <a href="{{ url('/customers')}}"  class="btn">Back</a> -->

                    <a href="{{url('customers/'.request()->id.'/customer-account')}}" class="btn">Back</a>
                </div>
            </div> 
            
             <form method="post" action="{{ url('note/store',request()->id)}}" id="newnote"  class="newnote" >
                @csrf
                    <div class="custom-form-inner">
                    <div class="custom-form-column fluid-column">
                      <div class="form-wrap  form-wrap-custom">
                            <textarea name="note" id="newno" cols="30" rows="10" class="form-control" placeholder=" "></textarea>
                            <label for="newno">Add New Note*</label>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn">Add New Note</button>
                        </div>
                    </div>
                    </div>
                </form>
                <div class="mb-5 custom-hr"></div>
                @if(isset($cus_note) && count($cus_note)>0)
                @foreach($cus_note as $note)
                <div class="new-note-teaser" id="block{{ $note->id }}">
                    <div class="new-note-header">
                        <h4>Updated: {{ date_format($note->updated_at,"d/m/y H:m") }} {{ $note->remark }}</h4>
                        <div class="note-action-btn">
                            <a href="javasctript:;" onclick="updatenote()"><i class="fas fa-edit"></i></a>
                            <a href="javasctript:;" data-id="{{$note->id}}" class="delete-customer-note"><i class="fas fa-trash-alt"></i></a>
                        </div>
                    </div>
                    <div class="new-note-content">
                        <p>{{ $note->notes}}</p>     
                    </div>
                </div>
                @endforeach
                @endif

        </div>
    </div>

</div>
<div class="modal fade bg-modal small-modal show"  data-backdrop="static" data-keyboard="false" id="edit_customer_note" tabindex="-1" >
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="exampleModalLabel">Edit Note</h3>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- {{url('admin/staff/update')}} -->
            <div class="modal-body">
                <form  action="{{url('note/update')}}" method="post" enctype="multipart/form-data" id="edit_note">
                    @csrf
                    <div class="custom-form-inner">
                    <div class="custom-form-column fluid-column">
                      <div class="form-wrap  form-wrap-custom">
                        <input type="hidden" id="note_id" name="note_id"/>
                            <textarea name="note" id="newno_edit" cols="30" rows="10" class="form-control" placeholder=" "></textarea>
                            <label for="newno_edit">Note*</label>
                        </div>
                        
                    </div>
                    </div>

                    <div class="d-flex justify-content-end">
                            <button type="submit" class="btn">Save</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
</div>

{!! JsValidator::formRequest('App\Http\Requests\AddNoteRequest', '#newnote'); !!}

{!! JsValidator::formRequest('App\Http\Requests\AddNoteRequest', '#edit_note'); !!}
<script>
 $(document).ready(function()
    {
        $('#edit_customer_note').modal({backdrop: 'static', keyboard: false}, 'show');
    })

    $("body").on("click", ".delete-customer-note", function () {
            const id = $(this).data("id");
            //alert(id);
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            });
    
            swalWithBootstrapButtons.fire({
                title: 'Are you sure?',
                text: `Delete This Note?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        method: "POST",
                        url: "/customer/delete_note", 
                        data: { id: id }, 
                        success: function (response) {
                            swalWithBootstrapButtons.fire(
                                'Deleted!',
                                `Note has been deleted.`,
                                'success'
                            );
                            $('#block'+id).hide();
                        },
                       
                        error: function (error) {
                            console.error(error);
                            swalWithBootstrapButtons.fire(
                                'Error',
                                'An error occurred while deleting.',
                                'error'
                            );
                        }
                    });
                } else if (
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your Note is safe :)',
                        'error'
                    );
                }
            });
        });

        function updatenote(id){

            //const id = $(this).data("id");
            //alert(id);
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            });
    
            swalWithBootstrapButtons.fire({
                title: 'Are you sure?',
                text: `Edit This Note?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    axios.post('{{ url('/note/get-note/')}}', {
              id: id
                })
                .then(function(response) {
                    const note = response.data.get_note;
                    const modalBody = document.querySelector('#edit_customer_note .modal-body');
                    $('#edit_customer_note #note_id').val(note.id);
                    $('#edit_customer_note #newno_edit').val(note.notes);
                    $('#edit_customer_note').modal('show');
                })
                .catch(function(error) {
                
          });
                } else if (
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your Note is safe :)',
                        'error'
                    );
                }
            });        
      }
    </script>
@endsection