@extends('layouts.app')

@section('title', 'Edit Task List: ' . $taskList->title)

@push('styles')
<style>
   .viewPageTabs .tab-content-box { height: calc(100vh - 100px); overflow: hidden!important; }
   .mail-view.personal-div01 { overflow: hidden!important; overflow-y: auto!important; border-bottom: 0!important; }
   .message-body { height: 34rem!important; }
   .home_1 { border-bottom: 0!important; }
</style>
@endpush

@section('content')
<div class="loadPages01">
   <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 p-0 viewPage">
      <div class="align-items-stretch">
         <div class="card bd-0 navtab-card01 viewPageTabs">
            <form method="POST" action="{{ route('task-lists.update', crypt_encrypt($taskList->id)) }}" id="taskListForm">
               @csrf
               <div class="az-tab-content tab-content-box tab-content-box-view viewPaneTab overflow-auto">
                  <div id="azTab1" class="az-tab-pane active">
                     <div class="mail-view personal-div01 mx-2 bg-white">
                        <div class="message-body py-3 px-2">
                           <div class="item-details-page">
                              <div class="row">
                                 <!-- Left Side - Task List Details -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Edit Task List<a href="#" class="addNewBtn saveBtn"><i class="las la-save"></i> Save</a></h5>
                                    <div class="group">
                                       <!-- Title -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Title<span class="asterisk"> *</span> <span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('title', $taskList->title) }}" required name="title" placeholder="Task List Title" minlength="4">
                                             @if ($errors->has('title')) 
                                             <p class="help-block">{{ $errors->first('title') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Description -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Description<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <textarea class="form-control form-control-sm" rows="3" placeholder="Description" name="description">{{ old('description', $taskList->description) }}</textarea>
                                             @if ($errors->has('description')) 
                                             <p class="help-block">{{ $errors->first('description') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Due Date -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Due Date<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="datetime-local" class="form-control form-control-sm" name="due_date" value="{{ old('due_date', $taskList->due_date ? $taskList->due_date->format('Y-m-d\TH:i') : '') }}">
                                             @if ($errors->has('due_date')) 
                                             <p class="help-block">{{ $errors->first('due_date') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Priority -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Priority<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="priority_id">
                                                <option value="">Select Priority</option>
                                                @foreach($priorities as $priority)
                                                   <option value="{{ $priority->id }}" {{ old('priority_id', $taskList->priority_id) == $priority->id ? 'selected' : '' }}>
                                                      {{ $priority->name }}
                                                   </option>
                                                @endforeach
                                             </select>
                                             @if ($errors->has('priority_id')) 
                                             <p class="help-block">{{ $errors->first('priority_id') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Status -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Status<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="status_id">
                                                <option value="">Select Status</option>
                                                @foreach($statuses as $status)
                                                   <option value="{{ $status->id }}" {{ old('status_id', $taskList->status_id) == $status->id ? 'selected' : '' }}>
                                                      {{ $status->name }}
                                                   </option>
                                                @endforeach
                                             </select>
                                             @if ($errors->has('status_id')) 
                                             <p class="help-block">{{ $errors->first('status_id') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Category -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Category<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="category_id">
                                                <option value="">Select Category</option>
                                                @foreach($categories as $category)
                                                   <option value="{{ $category->id }}" {{ old('category_id', $taskList->category_id) == $category->id ? 'selected' : '' }}>
                                                      {{ $category->name }}
                                                   </option>
                                                @endforeach
                                             </select>
                                             @if ($errors->has('category_id')) 
                                             <p class="help-block">{{ $errors->first('category_id') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                    </div>
                                 </div>

                                 <!-- Right Side - Additional Settings -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Settings</h5>
                                    <div class="group">
                                       <!-- Active Status -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Status<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm" name="active" required>
                                                <option value="1" {{ old('active', $taskList->active) == 1 ? 'selected' : '' }}>Active</option>
                                                <option value="0" {{ old('active', $taskList->active) == 0 ? 'selected' : '' }}>Inactive</option>
                                             </select>
                                             @if ($errors->has('active')) 
                                             <p class="help-block">{{ $errors->first('active') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Template Info (Readonly if it's a template) -->
                                       @if($taskList->is_template)
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Template Name:</label>
                                          <label class="col-lg-8">
                                             <p class="form-control-plaintext">{{ $taskList->template_name ?: $taskList->title }}</p>
                                             <small class="text-muted">This is a template. To edit template details, create a new version.</small>
                                          </label>
                                       </div>
                                       @endif
                                       
                                       <!-- Form Actions -->
                                       <div class="row mt-4">
                                          <div class="col-lg-12 text-right">
                                             <a href="{{ route('task-lists.show', crypt_encrypt($taskList->id)) }}" class="btn btn-sm btn-secondary mr-2">Cancel</a>
                                             <button type="submit" class="btn btn-sm btn-primary submit01">Update Task List</button>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
@endsection

@push('scripts')
<script>
   $(document).ready(function() {
      // Initialize Select2
      $('.select2').select2({ 
         width: '100%', 
         placeholder: "Select an option", 
         allowClear: true 
      });

      // Form Submit
      $('#taskListForm').on('submit', function(e) {
         e.preventDefault();
         let submitBtn = $('.submit01');
         let originalText = submitBtn.html();

         submitBtn.prop('disabled', true).html('<i class="las la-spinner la-spin"></i> Updating...');

         $.ajax({
            url: "{{ route('task-lists.update', crypt_encrypt($taskList->id)) }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
               if (response.status) {
                  toastr.success(response.message, 'Success');
                  setTimeout(() => window.location.href = response.redirect, 1000);
               }
            },
            error: function(xhr) {
               submitBtn.prop('disabled', false).html(originalText);
               if (xhr.status === 422) {
                  let errors = xhr.responseJSON.errors;
                  $('#taskListForm .form-control, #taskListForm .select2-hidden-accessible').removeClass('is-invalid');
                  $('#taskListForm .help-block').text('');
                  $.each(errors, (field, messages) => {
                     let input = $('[name="' + field + '"]');
                     input.addClass('is-invalid');
                     input.closest('.row').find('.help-block').text(messages[0]);
                  });
                  let firstError = $('.is-invalid').first();
                  if (firstError.length) {
                     $('.viewPaneTab').animate({
                        scrollTop: firstError.offset().top - 100
                     }, 500);
                  }
               } else {
                  toastr.error(xhr.responseJSON.message || 'Something went wrong!', 'Error');
               }
            }
         });
      });
   });
</script>
@endpush