@extends('layouts.master')
@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ URL::asset('/assets/css/task-pages.css')}}" />
@endsection
@section('title', 'Edit Task')
@section('content')
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
   <h4 class="mb-sm-0 font-size-18">EDIT TASK</h4>
   <div class="page-title-right">
      <ol class="breadcrumb m-0">
         <li class="breadcrumb-item"><a href="{{ route('tasks.index') }}">Tasks</a></li>
         <li class="breadcrumb-item active">Edit Task</li>
      </ol>
   </div>
</div>
<form action="{{ route('tasks.update', $task->id) }}" method="POST" class="mt-4">
   @csrf
   @method('PUT')
   <div class="row">
      <div class="col-lg-8">
         <!-- Task Details Card -->
         <div class="form-card">
            <div class="card-header">
               <h5 class="mb-0">Task Information</h5>
            </div>
            <div class="card-body">
               <div class="section-title">Basic Details</div>
               <div class="row g-3">
                  <!-- Task Name -->
                  <div class="col-md-12">
                     <label for="title" class="form-label">Task Name *</label>
                     <input type="text" class="form-control" name="title" id="title" 
                        placeholder="Enter task name" value="{{ old('title', $task->title) }}" required>
                  </div>
                  <!-- Task Type and Status -->
                  <div class="col-md-6">
                     <label for="task_type" class="form-label">Task Type *</label>
                     <select class="form-select" name="type" id="task_type" required>
                        @php $selectedType = old('type', $task->type); @endphp
                        <option value="">Select Type</option>
                        <option value="installation" {{ $selectedType === 'installation' ? 'selected' : '' }}>Installation</option>
                        <option value="repair" {{ $selectedType === 'repair' ? 'selected' : '' }}>Repair</option>
                        <option value="maintenance" {{ $selectedType === 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                        <option value="other" {{ $selectedType === 'other' ? 'selected' : '' }}>Other</option>
                     </select>
                  </div>
                  <div class="col-md-6">
                     <label for="task_status" class="form-label">Status *</label>
                     <select class="form-select" name="status" id="task_status" required>
                     @php $selectedStatus = old('status', $task->status); @endphp
                     <option value="new" {{ $selectedStatus === 'new' ? 'selected' : '' }}>New</option>
                     <option value="in_progress" {{ $selectedStatus === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                     <option value="completed" {{ $selectedStatus === 'completed' ? 'selected' : '' }}>Completed</option>
                     <option value="failed" {{ $selectedStatus === 'failed' ? 'selected' : '' }}>Failed</option>
                     </select>
                  </div>
                  <!-- Start Date -->
                  <div class="col-md-6">
                     <label for="scheduled_at" class="form-label">Start Date *</label>
                     <div class="position-relative">
                        <input type="date" class="form-control ps-5" name="scheduled_at" id="scheduled_at" data-provider="flatpickr" data-date-format="Y-m-d" placeholder="Select date" required
                           value="{{ old('scheduled_at', isset($task->scheduled_at) ? \Carbon\Carbon::parse($task->scheduled_at)->toDateString() : '') }}">
                        <i class="ri-calendar-line position-absolute top-50 start-0 translate-middle-y ms-3 text-info"></i>
                     </div>
                  </div>
                  <!-- End Date -->
                  <div class="col-md-6">
                     <label for="ends_at" class="form-label">End Date</label>
                     <div class="position-relative">
                        <input type="date" 
                           class="form-control ps-5 @error('ends_at') is-invalid @enderror" 
                           name="ends_at" 
                           id="ends_at" 
                           data-provider="flatpickr" 
                           data-date-format="Y-m-d" 
                           placeholder="Select date"
                           value="{{ old('ends_at', isset($task->ends_at) ? \Carbon\Carbon::parse($task->ends_at)->toDateString() : '') }}">
                        <i class="ri-calendar-line position-absolute top-50 start-0 translate-middle-y ms-3 text-info"></i>
                     </div>
                     @error('ends_at')
                     <div class="invalid-feedback d-block">
                        {{ $message }}
                     </div>
                     @enderror
                  </div>
                  <!-- Description -->
                  <div class="col-md-12">
                     <label for="description" class="form-label">Description</label>
                     <textarea class="form-control" name="description" id="description" rows="4"
                        placeholder="Enter task details, requirements, or special instructions">{{ old('description', $task->description) }}</textarea>
                  </div>
               </div>
            </div>
         </div>
         <!-- Location Card -->
         <div class="form-card">
            <div class="card-header">
               <h5 class="mb-0">Location Information</h5>
            </div>
            <div class="card-body">
               <div class="section-title">Address & Map</div>
               <div class="map-instructions bg-soft-info">
                  <i class="fas fa-info-circle me-2"></i> Search for a location or drag the marker to pinpoint the exact position
               </div>
               <div class="row g-3">
                  @if(setting('map') == 'google')
                  <div class="col-md-12">
                     <label for="map" class="form-label">Search Location</label>
                     <input type="text" class="form-control" id="location" name="location"
                        placeholder="Search for an address or place" value="{{ old('location', $task->location) }}">
                  </div>
                  @endif
                  <div class="{{ setting('map') == 'google' ? 'col-md-12' : 'col-md-6' }}">
                     <label for="location" class="form-label">Address / Building *</label>
                     <input type="text" name="location" class="form-control @error('location') is-invalid @enderror"
                        placeholder="Enter full address" value="{{ old('location', $task->location_name) }}">
                     @error('location')
                     <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                     @enderror
                  </div>
                  <div class="{{ setting('map') == 'google' ? 'col-md-6' : 'col-md-3' }}">
                     <label for="latitude" class="form-label">Latitude</label>
                     <input type="text" name="latitude" class="form-control" id="location-lat" 
                        value="{{ old('latitude', $task->latitude) }}">
                  </div>
                  <div class="{{ setting('map') == 'google' ? 'col-md-6' : 'col-md-3' }}">
                     <label for="longitude" class="form-label">Longitude</label>
                     <input type="text" name="longitude" class="form-control" id="location-lng"
                        value="{{ old('longitude', $task->longitude) }}">
                  </div>
                  <div class="col-md-12 mt-2">
                     <div id="map"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-4">
         <!-- Assignment Card -->
         <div class="form-card">
            <div class="card-header">
               <h5 class="mb-0">Assignment</h5>
            </div>
            <div class="card-body">
               <div class="section-title">Team & Client</div>
               <div class="mb-3">
                  <label for="client_id" class="form-label">Client (Optional)</label>
                  <select class="form-select" name="client_id" id="client_id">
                     <option value="">Select Client</option>
                     @foreach($clients as $client)
                     <option value="{{ $client->id }}" {{ old('client_id', $task->client_id) == $client->id ? 'selected' : '' }}>
                     {{ $client->fullName() }}
                     </option>
                     @endforeach
                  </select>
               </div>
               <div class="mb-3">
                  <label for="assigned_to" class="form-label">Assigned To</label>
                  <select class="form-select" name="assigned_to" id="assigned_to">
                     <option value="">Select Team Member</option>
                     @foreach($users as $user)
                     <option value="{{ $user->id }}" {{ old('assigned_to', $task->assigned_to) == $user->id ? 'selected' : '' }}>
                     {{ $user->fullName() }}
                     </option>
                     @endforeach
                  </select>
               </div>
               <div class="d-grid mt-4">
                  <button type="submit" class="btn btn-info">
                  <i class="fas fa-save me-2"></i> Update Task
                  </button>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>
@php
$latitude = $task->latitude ?? 0;
$longitude = $task->longitude ?? 0;
@endphp
@endsection
@section('script')
<script src="{{ URL::asset('/assets/js/jquery-3.6.1.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@if(setting('map') == 'google')
<!-- Google Maps JavaScript -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ setting('google_map_api_key') }}&libraries=places"></script>
<script src="{{ asset('assets/js/google_map.js') }}" data-latitude="{{ $latitude }}" data-longitude="{{ $longitude }}"></script>
@else
<!-- Leaflet Control Geocoder -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="{{ asset('assets/js/openStreet.js') }}" data-latitude="{{ $latitude }}" data-longitude="{{ $longitude }}"></script>
@endif
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script>
   $(document).ready(function() {
       // Initialize select2
       $('.select2').select2({
           placeholder: "Select option",
           allowClear: true
       });
   
       // Set default dates
       const today = new Date().toISOString().split('T')[0];
       document.getElementById('scheduled_at').min = today;
       
       // Update end date min when start date changes
       document.getElementById('scheduled_at').addEventListener('change', function() {
           const endDateInput = document.getElementById('ends_at');
           endDateInput.min = this.value;
           if (endDateInput.value && endDateInput.value < this.value) {
               endDateInput.value = this.value;
           }
       });
   });
</script>
@endsection