@extends('layouts.app')

@section('styles')
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.css' rel='stylesheet' />
@endsection

@section('content')
<div class="container">
  <h2 class="mb-3">📅 Task Calendar</h2>
  <div class="mb-2">
    @if(auth()->user()->role === 'manager' || auth()->user()->role === 'admin')
      <a href="{{ route('manager.dashboard') }}" class="btn btn-secondary">Manager Dashboard</a>
    @endif
  </div>
  <div id="calendar"></div>
</div>
@include('partials.task_modal')
@endsection

@section('scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    selectable: true,
    events: '{{ route("calendar.events") }}',
    dateClick: function(info) { openModal(info.dateStr); },
    eventClick: function(info) {
      const ev = info.event;
      openModal(ev.startStr.split('T')[0], ev.id, ev.title, ev.extendedProps);
    }
  });

  calendar.render();

  function openModal(date, id=null, title='', props={}) {
    document.getElementById('date').value = date;
    document.getElementById('task_id').value = id || '';
    document.getElementById('task_description').value = title || '';
    document.getElementById('issue_type').value = props.issue_type || '';
    document.getElementById('time_spent').value = props.time_spent || '';
    document.getElementById('remarks').value = props.remarks || '';
    document.getElementById('deleteTaskBtn').style.display = id ? 'inline-block' : 'none';
    new bootstrap.Modal(document.getElementById('taskModal')).show();
  }

  document.getElementById('taskForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const id = document.getElementById('task_id').value;
    const url = id ? `/calendar/update/${id}` : '/calendar/store';
    const method = id ? 'put' : 'post';
    const data = {
      date: document.getElementById('date').value,
      shift_id: document.getElementById('shift_id').value,
      task_description: document.getElementById('task_description').value,
      issue_type: document.getElementById('issue_type').value,
      escalation_flag: document.getElementById('escalation_flag').checked ? 1 : 0,
      time_spent: document.getElementById('time_spent').value,
      remarks: document.getElementById('remarks').value
    };

    try {
      await axios({ method, url, data, headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')} });
      Swal.fire('Saved', 'Task saved successfully', 'success');
      bootstrap.Modal.getInstance(document.getElementById('taskModal')).hide();
      calendar.refetchEvents();
    } catch(err) {
      Swal.fire('Error', err.response?.data?.message || 'Failed to save', 'error');
    }
  });

  document.getElementById('deleteTaskBtn').addEventListener('click', async function() {
    const id = document.getElementById('task_id').value;
    if(!id) return;
    const result = await Swal.fire({ title: 'Delete?', showCancelButton: true });
    if(result.isConfirmed) {
      try {
        await axios.delete(`/calendar/delete/${id}`, { headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')} });
        Swal.fire('Deleted', '', 'success');
        bootstrap.Modal.getInstance(document.getElementById('taskModal')).hide();
        calendar.refetchEvents();
      } catch(err) {
        Swal.fire('Error', 'Could not delete', 'error');
      }
    }
  });
});
</script>
@endsection