@extends('layouts.app')

@section('title', 'Create New Task List')

@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css')}}">
<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; }
   .template-section { border-left: 3px solid #007bff; padding-left: 15px; margin: 15px 0; }
</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.store') }}" 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">New 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')}}" 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')}}</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')}}">
                                             @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') == $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') == $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') == $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 - Template & Additional Settings -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Template Settings</h5>
                                    <div class="group">
                                       <!-- Use Template -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Use Template<span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="template_id" id="template_id">
                                                <option value="">Select Template</option>
                                                @foreach($templates as $template)
                                                   <option value="{{ $template->id }}" data-tasks='@json($template->tasks)'>
                                                      {{ $template->template_name ?: $template->title }}
                                                   </option>
                                                @endforeach
                                             </select>
                                             <small class="form-text text-muted">Select a template to pre-populate tasks</small>
                                          </label>
                                       </div>

                                       <!-- Save as Template -->
                                       <div class="template-section">
                                          <div class="row">
                                             <label class="col-lg-4 items-label">Save as Template<span class="dot-input01">:</span></label>
                                             <label class="col-lg-8">
                                                <div class="form-check">
                                                   <input type="checkbox" class="form-check-input" name="is_template" id="is_template" value="1" {{ old('is_template') ? 'checked' : '' }}>
                                                   <label class="form-check-label" for="is_template">Save this as a reusable template</label>
                                                </div>
                                             </label>
                                          </div>
                                          
                                          <!-- Template Name (shown only when template is checked) -->
                                          <div class="row" id="template_name_row" style="display: none;">
                                             <label class="col-lg-4 items-label">Template Name<span class="asterisk"> *</span> <span class="dot-input01">:</span></label>
                                             <label class="col-lg-8">
                                                <input type="text" class="form-control form-control-sm" name="template_name" value="{{old('template_name')}}" placeholder="Template Name">
                                                @if ($errors->has('template_name')) 
                                                <p class="help-block">{{ $errors->first('template_name') }}</p>
                                                @endif
                                             </label>
                                          </div>
                                       </div>

                                       <!-- 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', 1) == 1 ? 'selected' : '' }}>Active</option>
                                                <option value="0" {{ old('active') == 0 ? 'selected' : '' }}>Inactive</option>
                                             </select>
                                             @if ($errors->has('active')) 
                                             <p class="help-block">{{ $errors->first('active') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Preview Tasks from Template -->
                                       <div class="row mt-3">
                                          <label class="col-lg-4 items-label">Template Tasks<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <div id="templateTasksPreview" class="border p-2 bg-light" style="max-height: 200px; overflow-y: auto; display: none;">
                                                <small class="text-muted">Tasks from selected template:</small>
                                                <ul id="tasksList" class="mb-0 pl-3"></ul>
                                             </div>
                                          </label>
                                       </div>
                                       
                                       <!-- Form Actions -->
                                       <div class="row mt-4">
                                          <div class="col-lg-12 text-right">
                                             <button type="reset" class="btn btn-sm btn-dark mr-2 cancel01">Reset</button>
                                             <button type="submit" class="btn btn-sm btn-primary submit01">Create Task List</button>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('modules/tasks/js/lz-string.min.js')}}"></script>
<script src="{!!asset('plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js')!!}"></script>

<script>
   $.ajaxSetup({
     headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
   });

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

      // Show/hide template name field
      $('#is_template').change(function() {
         if ($(this).is(':checked')) {
            $('#template_name_row').show();
            $('input[name="template_name"]').prop('required', true);
         } else {
            $('#template_name_row').hide();
            $('input[name="template_name"]').prop('required', false);
         }
      }).trigger('change');

      // Template selection handler
      $('#template_id').change(function() {
         var selectedOption = $(this).find('option:selected');
         var tasks = selectedOption.data('tasks');
         var preview = $('#templateTasksPreview');
         var tasksList = $('#tasksList');
         
         tasksList.empty();
         
         if (tasks && tasks.length > 0) {
            tasks.forEach(function(task) {
               tasksList.append('<li>' + task.title + '</li>');
            });
            preview.show();
         } else {
            preview.hide();
         }
      });

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

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

         $.ajax({
            url: "{{ route('task-lists.store') }}",
            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');
               }
            }
         });
      });

      // Reset
      $('.cancel01').on('click', function() {
         $('#taskListForm')[0].reset();
         $('#taskListForm .form-control, #taskListForm .select2-hidden-accessible').removeClass('is-invalid');
         $('#taskListForm .help-block').text('');
         $('#templateTasksPreview').hide();
         $('.select2').val('').trigger('change');
         $('#is_template').trigger('change');
      });
   });
</script>
@endpush