@extends('layouts.master')
@section('css')
<style>
   /* Base Styles */
.task-detail-container {
	/* max-width: 1200px; */
	margin: 0 auto;
}

/* Header Styles */
.task-header {
	margin-bottom: 30px;
}

.breadcrumb-nav {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-size: 14px;
}

.breadcrumb-link {
	color: #4f46e5;
	text-decoration: none;
}

.breadcrumb-separator {
	margin: 0 8px;
	color: #94a3b8;
}

.breadcrumb-current {
	color: #64748b;
}

.task-title {
	font-size: 28px;
	font-weight: 700;
	/* color: #1e293b; */
	margin: 0 0 10px 0;
}

.task-meta {
	display: flex;
	align-items: center;
	gap: 15px;
}

.task-status {
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
}

.task-status.new {
	background-color: #e0e7ff;
	color: #4f46e5;
}

.task-status.in_progress {
	background-color: #f7b84b;
	color: #fff;
}

.task-status.completed {
	background-color: #dcfce7;
	color: #16a34a;
}

.task-status.failed {
	background-color: #fee2e2;
	color: #dc2626;
}

.task-date {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #64748b;
	font-size: 14px;
}

/* Content Grid */
.task-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

@media (max-width: 768px) {
	.task-content-grid {
		grid-template-columns: 1fr;
	}
}

/* Task Details Card */
.task-details-card,
.comments-card {
	background: var(--vz-modal-bg);
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.section-title {
	font-size: 18px;
	font-weight: 600;
	/* color: #1e293b; */
	margin-top: 0;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-title i {
	color: #4f46e5;
}

/* Detail Grid */
.detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	margin-bottom: 25px;
}

.detail-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 15px;
	border-radius: 8px;
}

.detail-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.detail-content label {
	display: block;
	font-size: 12px;
	color: #64748b;
	margin-bottom: 5px;
}

.detail-content p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	/* color: #1e293b; */
}

/* Description */
.description-box {
	padding: 15px;
	background-color: #f8fafc;
	border-radius: 8px;
	line-height: 1.6;
	/* color: #334155; */
}

/* Task Actions */
.task-actions {
	display: flex;
	gap: 15px;
	margin-top: 25px;
}

/* Comments Section */
.comments-list {
	max-height: 400px;
	overflow-y: auto;
	margin-bottom: 25px;
}

.comment {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
	padding: 15px;
	border-radius: 8px;
}

.comment-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #4f46e5;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	flex-shrink: 0;
}

.comment-body {
	flex-grow: 1;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.comment-author {
	font-size: 14px;
	font-weight: 600;
	/* color: #1e293b; */
}

.comment-time {
	font-size: 12px;
	color: #94a3b8;
}

.comment-text {
	font-size: 14px;
	line-height: 1.5;
	color: #334155;
}

/* Comment Form */
/*  */
/* .comment-form textarea:focus {
   outline: none;
   border-color: #a5b4fc;
   box-shadow: 0 0 0 3px #e0e7ff;
   } */
.btn-comment {
	background-color: #4f46e5;
	color: white;
	width: 100%;
}

.btn-comment:hover {
	background-color: #4338ca;
}
</style>
@endsection
@section('title', 'Task Details')
@section('content')
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
   <h4 class="mb-sm-0 font-size-18">
      TASK DETAILS 
      <span class="badge px-3 py-1 rounded-pill 
         {{ 
         $task->status === 'new' ? 'bg-info' : 
         ($task->status === 'in_progress' ? 'bg-warning' : 
         ($task->status === 'completed' ? 'bg-success' : 
         ($task->status === 'failed' ? 'bg-danger' : 'bg-light text-secondary'))) 
         }}">
      {{ ucfirst(str_replace('_', ' ', $task->status)) }}
      </span>
   </h4>
   <div class="page-title-right">
      <ol class="breadcrumb m-0">
         <li class="breadcrumb-item"><a href="{{ route('tasks.index') }}">Dashboard</a></li>
         <li class="breadcrumb-item active">Task Details</li>
      </ol>
   </div>
</div>
<div class="task-detail-container mb-4">
   <!-- Header Section -->
   <div class="task-header">
      <h1 class="task-title">{{ $task->title }}</h1>
      <div class="task-meta">
         <span class="task-date">
         <i class="far fa-calendar-alt"></i>
         {{ \Carbon\Carbon::parse($task->scheduled_at)->format('d M, Y') }}
         </span>
      </div>
   </div>
   @if (session('status'))
   <div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show" role="alert">
      <i class="ri-check-double-line label-icon"></i><strong>Success</strong> - {{session('status')}}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
   @endif @if (session('error'))
   <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show mb-xl-0" role="alert">
      <i class="ri-error-warning-line label-icon"></i><strong>Failed</strong>
      - {{session('error')}}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
   <br />
   @endif
   <div class="task-content-grid">
      <!-- Main Task Details -->
      <div class="task-details-card">
         <div class="detail-section">
            <h3 class="section-title">
               <i class="fas fa-info-circle"></i>
               Task Information
            </h3>
            <div class="detail-grid">
               <div class="detail-item bg-light">
                  <div class="detail-icon bg-soft-info">
                     <i class="ri-map-pin-fill text-info"></i>
                  </div>
                  <div class="detail-content">
                     <label>Location</label>
                     <p>
                        {{ $task->location_name ?? 'Not Specified' }}
                        @if($task->latitude && $task->longitude)
                        <br>
                        <a href="https://www.google.com/maps/search/?api=1&query={{ $task->latitude }},{{ $task->longitude }}" 
                           target="_blank" 
                           class="text-info text-decoration-underline small">
                        <i class="ri-external-link-line"></i> View on Google Maps
                        </a>
                        @endif
                     </p>
                  </div>
               </div>
               <div class="detail-item bg-light">
                  <div class="detail-icon bg-soft-secondary">
                     <i class="ri-user-received-2-line text-secondary"></i>
                  </div>
                  <div class="detail-content">
                     <label>Client</label>
                     <p class="mb-1">{{ $task->client ? $task->client->fullName() : 'Not Assigned' }}</p>
                     @if($task->client && $task->client->phone)
                           <a href="tel:+{{ $task->client->phone }}" class="text-info text-decoration-none small">
                              <i class="ri-phone-line me-1"></i> +{{ $task->client->phone }}
                           </a>
                     @endif
                  </div>
               </div>
               <div class="detail-item bg-light">
                  <div class="detail-icon bg-soft-secondary">
                     <i class="ri-user-shared-line text-secondary"></i>
                  </div>
                  <div class="detail-content">
                     <label>Assigned To</label>
                     <p class="mb-1">{{ $task->assignedUser ? $task->assignedUser->fullName() : 'Not Assigned' }}</p>
                     @if($task->assignedUser && $task->assignedUser->phone)
                           <a href="tel:+{{ $task->assignedUser->phone }}" class="text-info text-decoration-none small">
                              <i class="ri-phone-line me-1"></i> +{{ $task->assignedUser->phone }}
                           </a>
                     @endif
                  </div>
               </div>
            </div>
         </div>
         <div class="detail-section">
            <h3 class="section-title">
               <i class="fas fa-align-left"></i>
               Description
            </h3>
            <div class="description-box bg-light">
               {{ $task->description ?? 'No description provided.' }}
            </div>
         </div>
         <div class="task-actions d-flex gap-2">
            {{-- Edit Task --}}
            @can('update task')
               <a href="{{ route('tasks.edit', $task->id) }}" class="btn btn-soft-info">
                     <i class="ri-edit-line"></i> Edit Task
               </a>
            @endcan

            {{-- Delete Task --}}
            @can('delete task')
               <form id="delete-task-form" action="{{ route('tasks.destroy', $task->id) }}" method="POST">
                     @csrf
                     @method('DELETE')
                     <button type="button" class="btn btn-soft-danger" onclick="confirmDelete()">
                        <i class="ri-delete-bin-line"></i> Delete Task
                     </button>
               </form>
            @endcan

            {{-- Notify Assigned User --}}
            @can('assign task')
               @if($task->assignedUser && $task->assignedUser->phone)
                     <form id="notify-user-form" action="{{ route('tasks.notify', $task->id) }}" method="POST">
                        @csrf
                        <button type="button" class="btn btn-soft-secondary" onclick="confirmNotify()">
                           <i class="ri-notification-3-line"></i> Notify Assigned User
                        </button>
                     </form>
               @endif
            @endcan
         </div>
      </div>
      <!-- Comments Section -->
      <div class="comments-card">
         <h3 class="section-title">
            <i class="fas fa-comments"></i>
            Activity & Comments
         </h3>
         <div class="comments-list">
            @foreach($task->comments as $comment)
            <div class="comment mb-3 bg-light">
               <div class="d-flex align-items-start">
                  <div class="comment-avatar me-3">
                     @if($comment->user->avatar)
                     <img class="rounded-circle" 
                        src="{{ asset($comment->user->avatar) }}" 
                        alt="Avatar" 
                        style="width: 40px; height: 40px; object-fit: cover;">
                     @else
                     <div class="avatar-initials rounded-circle bg-info text-white d-flex align-items-center justify-content-center" 
                        style="width: 40px; height: 40px; font-weight: bold;">
                        {{ strtoupper(substr($comment->user->first_name, 0, 1)) }}{{ strtoupper(substr($comment->user->last_name, 0, 1)) }}
                     </div>
                     @endif
                  </div>
                  <div class="comment-body flex-grow-1">
                     <div class="comment-header d-flex justify-content-between">
                        <div>
                           <span class="comment-author fw-bold" style="color: #64748b;">{{ $comment->user->fullName() }}</span>
                           <span class="comment-time text-muted ms-2">{{ $comment->created_at->diffForHumans() }}</span>
                        </div>
                        @if(auth()->id() === $comment->user_id)
                        <button class="btn btn-sm btn-light" 
                           data-bs-toggle="modal" 
                           data-bs-target="#editCommentModal{{ $comment->id }}">
                        <i class="ri-edit-line text-info"></i> <span class="text-info">Edit</span>
                        </button>
                        @endif
                     </div>
                     <div class="comment-text text-muted mt-2">{{ $comment->comment }}</div>
                  </div>
               </div>
            </div>
            <!-- Edit Comment Modal -->
            @if(auth()->id() === $comment->user_id)
            <div class="modal fade" id="editCommentModal{{ $comment->id }}" tabindex="-1" aria-hidden="true">
               <div class="modal-dialog modal-dialog-centered">
                  <form action="{{ route('tasks.comments.update', [$task->id, $comment->id]) }}" method="POST" class="modal-content">
                     @csrf
                     @method('PUT')
                     <div class="modal-header">
                        <h5 class="modal-title">Edit Comment</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                     </div>
                     <div class="modal-body">
                        <textarea name="comment" class="form-control" rows="5" required>{{ $comment->comment }}</textarea>
                     </div>
                     <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">
                        <i class="ri-save-line"></i> Save Changes
                        </button>
                     </div>
                  </form>
               </div>
            </div>
            @endif
            @endforeach
         </div>
         <form action="{{ route('tasks.comments.store', $task->id) }}" method="POST" class="comment-form">
            @csrf
            <textarea name="comment" class="form-control" rows="5" placeholder="Add a comment..." required></textarea>
            <button type="submit" class="btn btn-info mt-4 w-100">
            <i class="fas fa-paper-plane"></i> Post Comment
            </button>
         </form>
      </div>
   </div>
</div>
@endsection
@section('script')
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
   function confirmDelete() {
       Swal.fire({
           title: 'Are you sure?',
           text: "This task will be permanently deleted!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#d33',
           cancelButtonColor: '#6c757d',
           confirmButtonText: 'Yes, delete it!'
       }).then((result) => {
           if (result.isConfirmed) {
               document.getElementById('delete-task-form').submit();
           }
       });
   }
   
   function confirmNotify() {
       Swal.fire({
           title: 'Send Notification?',
           text: "The assigned user will receive an SMS notification.",
           icon: 'info',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#6c757d',
           confirmButtonText: 'Yes, send it!'
       }).then((result) => {
           if (result.isConfirmed) {
               document.getElementById('notify-user-form').submit();
           }
       });
   }
</script>
@endsection