@php
use App\Helpers\Helper;
@endphp
@extends('layouts.master')
@section('title', 'Contact Details')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('admin.errors.error')
        
        @section('breadcrumbs')
        <nav aria-label="breadcrumb" class="d-flex custom-breadcrumbs flex-sm-nowrap flex-wrap ">
            <ol class="breadcrumb mb-0 me-1">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.contact.index') }}">Contacts</a>
                </li>
                <li class="breadcrumb-item active">
                     Contact Details
                </li>

            </ol>
        </nav>
        @endsection

        <div class="row">
         
            <div class="col-12 col-lg-3 col-md-5 order-1 order-md-0">
                  
                <!-- User Card -->
                <div class="card ">
                    <div class="card-body">
                        <p class=" small text-uppercase text-muted">Details</p>
                        <div class="info-container">
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <span class="fw-bold me-1 fs-big">Name:</span>
                                    <span class="fw-bold fs-big">{{ $contact->fullName }}</span>
                                </li>
                                <li class="mb-2">
                                    <span class="fw-semibold me-1">Label:</span>
                                    <span
                                        style="color:{{ $contact->getlabel->label_color }}">{{ $contact->getlabel->label_name }}</span>
                                </li>

                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">Email:</span>
                                    <a
                                        href="mailto:{{ $contact->email }}">{{ isset($contact->email) ? $contact->email : '-' }}</a>
                                </li>

                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">Contact Number:</span>
                                    <span>{{ $contact->phone_number }}</span>
                                </li>
                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">Secondary Contact:</span>
                                    <span>{{ isset($contact->secondary_contact_no) ? $contact->secondary_contact_no : '-' }}</span>
                                </li>

                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">Date of Birth:</span>
                                    <span>{{ isset($contact->date_of_birth) ? Carbon\Carbon::parse($contact->date_of_birth)->format(config('const.displayDate')) : '-' }}</span>
                                </li>

                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">Address:</span>
                                    <span>{{ $contact->address }}</span>
                                </li>

                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">City:</span>
                                    <span>{{ $contact->city }}</span>
                                </li>

                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">State:</span>
                                    <span>{{ isset($contact->state) ? $contact->state->name : '-' }}</span>
                                </li>

                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">County:</span>
                                    <span>{{ isset($contact->county) ? $contact->county : '-' }}</span>
                                </li>

                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">Zip Code:</span>
                                    {{ $contact->zip_code }}
                                </li>

                                <li class="mb-2">
                                    <span class="fw-semibold me-1">Contact Index No:</span>
                                    <span>#{{ $contact->sequence_no }}</span>
                                </li>

                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">Created By:</span>
                                    {{ $contact->getCreatedByName->first_name . ' ' . $contact->getCreatedByName->last_name }}
                                </li>
                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">Updated By:</span>
                                    {{ $contact->getUpdatedByName->first_name . ' ' . $contact->getUpdatedByName->last_name }}
                                </li>
                                <li class="mb-2 pt-1">
                                    <span class="fw-semibold me-1">Status:</span>
                                    {!! Helper::status($contact->status) !!}
                                </li>
                            </ul>
                            
                            <div class="d-flex justify-content-center">
                                @if (auth()->user()->can('update-contact'))
                                <a href="{{ route('admin.contact.edit', $contact) }}" class="btn btn-primary me-2 btn-sm"><i
                                        class="tf-icons ti ti-edit pb-1"></i> Edit</a>
                                @endif
                                <a href="{{route('admin.contact.index')}}" class="btn btn-primary flex-grow-1 flex-sm-grow-0 mt-sm-0 mt-1"><i class="fa-solid fa-arrow-left"></i> &nbsp; Back</a>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- /User Card -->


            </div>
            <div class="col-lg-9 mb-6 mb-lg-0">
                 
                  <div class="nav-align-top nav-tabs-shadow mb-4">
                    <ul class="nav nav-tabs nav-fill" role="tablist">
                      <li class="nav-item">
                        <button
                          type="button"
                          class="nav-link active"
                          role="tab"
                          data-bs-toggle="tab"
                          data-bs-target="#navs-justified-home"
                          aria-controls="navs-justified-home"
                          aria-selected="true"
                        >
                          <i class="tf-icons ti ti-ticket ti-xs me-1"></i> Latest Tickets
                        </button>
                      </li>
                      <li class="nav-item">
                        <button
                          type="button"
                          class="nav-link"
                          role="tab"
                          data-bs-toggle="tab"
                          data-bs-target="#navs-justified-profile"
                          aria-controls="navs-justified-profile"
                          aria-selected="false"
                        >
                          <i class="tf-icons ti ti-note ti-xs me-1"></i> Notes ({{count($notes)}})
                        </button>
                      </li>
                      
                    </ul>
                    <div class="tab-content">
                      <div class="tab-pane fade show active" id="navs-justified-home" role="tabpanel">
                              <div class="card-header d-flex justify-content-between mb-3">
                                  <h5 class="card-title m-0 me-2">Latest Tickets</h5>
                                  
                                  <div class="dropdown">
                                      <a href="{{route('admin.ticket.create',['contact_id' => $contact->id])}}" class="btn btn-primary flex-grow-1 flex-sm-grow-0 mt-sm-0 mt-1"><i class="fa-solid fa-plus"></i></a>
                                      <button class="btn p-0" type="button" id="teamMemberList" data-bs-toggle="dropdown"
                                              aria-haspopup="true" aria-expanded="false">
                                          <i class="ti ti-dots-vertical ti-sm text-muted"></i>
                                      </button>
                                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="teamMemberList">
                                          <a class="dropdown-item" href="{{ route('admin.ticket.index') }}">View All</a>
                                      </div>
                                  </div>
                              </div>
                              <div class="table-responsive table-scroll custom-scroll">
                                  <table class="table table-borderless ">
                                      <thead class="">
                                          <tr>
                                              <th>#</th>
                                              <th>Agent Name</th>
                                              <th>Assigned To</th>
                                              <th>STATUS</th>
                                              <th>CREATED DATE</th>
                                              <th>Action</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          @if (isset($contact->getContactTicket) && $contact->getContactTicket->isNotEmpty())
                                          @foreach ($contact->getContactTicket as $contactTicket)
                                          <tr>
                                              <td>
                                                  {!! Helper::displayUniqueNumberClickable(route('admin.ticket.show', $contactTicket->id), $contactTicket->sequence_no) !!}
                                              </td>
                                              <td>
                                                  {{ isset($contactTicket->getCreatedByName) ? $contactTicket->getCreatedByName->owner_name : '-' }}
                                              </td>
                                              <td>
                                                  {{ isset($contactTicket->getAssignName) ? $contactTicket->getAssignName->owner_name : '-' }}
                                              </td>

                                              <td>{!! Helper::displayTicketStatus($contactTicket->status) !!}</td>
                                              <td>
                                                  <p class="mb-0">
                                                      {{ Helper::displayDateTimewithAMPMWithTimeZone($contactTicket->created_at) }}
                                                  </p>
                                              </td>
                                              <td><a href="{{ route('admin.ticket.show', $contactTicket->id) }}"
                                                     class="btn btn-label-primary btn-icon waves-effect" title="View"><i
                                                          class="ti ti-eye ti-sm mx-2"></i></a></td>
                                          </tr>
                                          @endforeach
                                          @else
                                      <td colspan="5" class="text-center">No Tickets Available.</td>
                                      @endif
                                      </tbody>
                                  </table>
                              </div>
                      </div>
                      <div class="tab-pane fade" id="navs-justified-profile" role="tabpanel">
                              <div class="card-header d-flex justify-content-between mb-3">
                                  <h5 class="card-title m-0"></h5>
                                  <div class="dropdown">
                                     <button type="button" data-bs-target="#addNotes" data-bs-toggle="modal"
                            class="btn btn-primary flex-grow-1 flex-sm-grow-0 mt-sm-0 mt-1"><i class="fa-solid fa-plus"></i>
                            &nbsp; Add Note</button>
                                  </div>
                              </div>
                              <div class="table-responsive table-scroll custom-scroll">
                                  <table class="table table-borderless ">
                                      <thead>
                                          <tr>
                                              <th width="52%">Note</th>
                                              <th width="15%">Created By</th>
                                              <th width="18%">CREATED DATE</th>
                                              <th width="15%">Action</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          @if (isset($notes) && $notes->isNotEmpty())
                                          @foreach ($notes as $notesData)
                                          <tr id="delete-note-{{ $notesData->id }}">
                                              <td class="webkitoverflow">
                                                  {{ isset($notesData->comment) ? $notesData->comment : '-' }}
                                              </td>
                                              <td>
                                                  {{ isset($notesData->getCreatedByName) ? $notesData->getCreatedByName->owner_name : '-' }}
                                              </td>
                                              <td>
                                                  <p class="mb-0">
                                                      {{ Helper::displayDateTimewithAMPMWithTimeZone($notesData->created_at) }}
                                                  </p>
                                              </td>
                                                    <input type="hidden" id="notes-{{$notesData->id}}" value="{{$notesData->comment}}">
                                              <td> 
                                                    <a href="{{ route('admin.contact.note', $notesData->id) }}"
                                                            class="btn btn-label-primary btn-icon waves-effect view-notes"><i class="ti ti-eye ti-sm mx-2"></i></a>
                                                            
                                                  @if($notesData->created_by==Auth::user()->id)
                                                  <a href="javascript:void(0)"
                                                            class="btn btn-label-danger btn-icon waves-effect"
                                                            title="Delete" data-toggle="modal"
                                                            onclick="deleteValueSet({{ $notesData->id }})"
                                                            data-bs-toggle='modal' data-bs-target='#delete-modal-notes'><i
                                                                class="ti ti-trash ti-sm mx-2"></i></a>
                                                   @endif             
                                              </td>
                                          </tr>
                                          @endforeach
                                          @else
                                      <td colspan="5" class="text-center">No Notes Available.</td>
                                      @endif
                                      </tbody>
                                  </table>
                              </div>
                      </div>
                    </div>
                  </div>

            </div>
        </div>
        <div class="row mt-4">

            <div class="col-lg-12 mb-12 mb-lg-0">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="card-title m-0 me-2">Associated Contacts</h5>
                        <button type="button" data-bs-target="#addAssociatedContact" data-bs-toggle="modal"
                            class="btn btn-primary flex-grow-1 flex-sm-grow-0 mt-sm-0 mt-1"><i class="fa-solid fa-plus"></i>
                            &nbsp; Add Associated Contacts</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-borderless border-top">
                            <thead class="border-bottom">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Contact Number</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (isset($associtedContacts) && $associtedContacts->isNotEmpty())
                                    @foreach ($associtedContacts as $associtedContactsData)
                                        @if (isset($associtedContactsData->getContacts) && $associtedContactsData->getContacts->isNotEmpty())
                                            @foreach ($associtedContactsData->getContacts as $associatcontact)
                                                <tr id="delete-{{ $associtedContactsData->id }}">
                                                    <td id="delete-{{ $associtedContactsData->id }}">
                                                        {!! Helper::displayUniqueNumberClickable(
                                                            route('admin.contact.show', $associatcontact->id),
                                                            $associatcontact->id,
                                                        ) !!}
                                                    </td>
                                                    <td>
                                                        {{ $associatcontact->full_name }}
                                                    </td>
                                                    <td>
                                                        {{ $associatcontact->email }}
                                                    </td>
                                                    <td>
                                                        {{ $associatcontact->phone_number }}
                                                    </td>
                                                    <td>
                                                        @if (auth()->user()->can('list-contact'))
                                                            <a href="{{ route('admin.contact.show', $associatcontact->id) }}"
                                                                class="btn btn-label-primary btn-icon waves-effect"
                                                                title="View"><i class="ti ti-eye ti-sm mx-2"></i></a>
                                                        @endif
                                                        <a href="javascript:void(0)"
                                                            class="btn btn-label-danger btn-icon waves-effect"
                                                            title="Delete" data-toggle="modal"
                                                            onclick="deleteValueSet({{ $associtedContactsData->id }})"
                                                            data-bs-toggle='modal' data-bs-target='#delete-modal'><i
                                                                class="ti ti-trash ti-sm mx-2"></i></a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    @endforeach
                                @else
                                    <td colspan="5" class="text-center">No Associated Contacts Available</td>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('admin.contact.create_associated_contact', ['contact_id' => $contact->id])
    @include('admin.contact.create_notes', ['contact_id' => $contact->id])
    @include('admin.confirmalert')
    
    <div class="modal fade" id="viewNotes" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content p-3 p-md-5">
                <button type="button" class="btn-close btn-pinned" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <h3 class="role-title mb-2">Note</h3>
                    </div>
                    <p id="note_text">To draw a dotted line with CSS, first, add a simple line with the help of the tag. Then, access the element by tag name in CSS. After that, apply the “border-top” or “border</p>
                    <div class="col-12 text-center mt-4">
                       
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        /* Initialize Select2 */
        const associatedContact = $('.associated_contact');
        if (associatedContact.length) {
            associatedContact.each(function() {
                var $this = $(this);
                $this.wrap('<div class="position-relative"></div>').select2({
                    placeholder: 'Select Associated Contact',
                    dropdownParent: $this.parent(),
                });
            });
        }
        $('#addAssociatedContact').on('shown.bs.modal', function(e) {
            if (associatedContact.length) {
                associatedContact.each(function() {
                    var $this = $(this);
                    $this.wrap('<div class="position-relative"></div>').select2({
                        placeholder: 'Select Associated Contact',
                        dropdownParent: $this.parent(),
                    });
                });
            }
        });



        $("select").on("select2:close", function(e) {
            $(this).valid();
        });
        $("#createform").validate({
            rules: {
                "associated_contact[]": {
                    required: true
                }
            },
            submitHandler: function(form) {
                if ($("#createform").validate().checkForm()) {
                    $('.submitbutton').attr('disabled', true);
                    $('.loader-btn').removeClass("d-none");
                    form.submit();
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("id") == "associated_contact") {
                    error.appendTo(element.parent("div"));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function(element, errorClass, validClass) {
                if ($(element).attr("id") == "associated_contact") {
                    $($(element).parent("div")).addClass("custom-highlight-error");
                } else {
                    $(element).addClass("custom-highlight-error");
                }

                if ($(element).attr("id") == "status") {
                    $($(element).parent("div")).addClass("has-erorr");
                }

            },
            unhighlight: function(element, errorClass, validClass) {
                if ($(element).attr("id") == "associated_contact") {
                    $($(element).parent("div")).removeClass("custom-highlight-error");
                } else {
                    $(element).removeClass("custom-highlight-error");
                }
                if ($(element).attr("id") == "status") {
                    $($(element).parent("div")).removeClass("has-erorr");
                }
            }
        });

        $("#delete-record").on("click", function() {
            var id = $("#id").val();
            var deleteUrl = baseUrl + '/admin/contact/associatedcontact/destroy/' + id;
            $('#delete-modal').modal('hide');
            $.ajax({
                url: deleteUrl,
                type: "DELETE",
                dataType: 'json',
                success: function(data) {
                    $(`#delete-${id}`).remove();
                    toastr.success("@lang('admin.recordDelete')", "@lang('admin.success')");
                },
                error: function(data) {
                    toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
                }
            });
        });
        
        $("#delete-record-notes").on("click", function() {
            var id = $("#id").val();
            var deleteUrl = baseUrl + '/admin/contact/note/destroy/' + id;
            $('#delete-modal-notes').modal('hide');
            $.ajax({
                url: deleteUrl,
                type: "DELETE",
                dataType: 'json',
                success: function(data) {
                    $(`#delete-note-${id}`).remove();
                    toastr.success("@lang('admin.recordDelete')", "@lang('admin.success')");
                },
                error: function(data) {
                    toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
                }
            });
        });
        
        
        $("#createFormNotes").validate({
            rules: {
                "notes": {
                    required: true
                }
            },
            submitHandler: function(form) {
                if ($("#createFormNotes").validate().checkForm()) {
                    $('.submitbutton').attr('disabled', true);
                    $('.loader-btn').removeClass("d-none");
                    form.submit();
                }
            },
        });
        
        
    </script>
@endsection