@extends('layouts.contentNavbarLayout')

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
<style>
  #plannerCalendar {
    min-height: 600px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
  }
</style>
@endsection

@section('content')
<div class="container">
    <div class="d-flex justify-content-between mb-3">
        <div>
            <h4>📅 Company Planner Calendar</h4>
        </div>
        <button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#addPlannerCanvas">
            ➕ Add New Planner
        </button>
    </div>

    <!-- Offcanvas Add Planner Form -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addPlannerCanvas" aria-labelledby="addPlannerCanvasLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="addPlannerCanvasLabel">Add New Planner</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <form id="addPlannerForm">
            @csrf
            <div class="offcanvas-body overflow-auto" style="max-height: calc(100vh - 100px);">

                <div class="mb-3">
                    <label class="form-label">Planner Type</label>
                    <select name="planner_type" class="form-control" required>
                        <option value="month">Monthly</option>
                        <option value="year">Yearly</option>
                        <option value="week">Weekly</option>
                        <option value="qyearly">Quarterly</option>
                        <option value="hyearly">Half Yearly</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Start Date</label>
                    <input type="date" name="start_date" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">End Date</label>
                    <input type="date" name="end_date" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Target Amount</label>
                    <input type="number" name="target_amount" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Assigned Users</label>
                    <div class="form-check d-flex flex-wrap gap-3">
                        @foreach(\App\Models\User::all() as $user)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="assigned_to[]" value="{{ $user->id }}" id="userCheckbox{{ $user->id }}">
                                <label class="form-check-label" for="userCheckbox{{ $user->id }}">
                                    {{ $user->name }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Industries:</label>
                    <div class="row">
                        @foreach($industries as $industry)
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" name="industries[]" value="{{ $industry->id }}" class="form-check-input" id="industry_{{ $loop->index }}">
                                <label class="form-check-label" for="industry_{{ $loop->index }}">{{ $industry->page_name }}</label>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Solutions:</label>
                    <div class="row">
                        @foreach($solutions as $solution)
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" name="solutions[]" value="{{ $solution->id }}" class="form-check-input" id="solution_{{ $loop->index }}">
                                <label class="form-check-label" for="solution_{{ $loop->index }}">{{ $solution->page_name }}</label>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Channel</label>
                    <input type="text" name="channel" class="form-control" placeholder="Enter channel">
                </div>

                <div class="mb-4">
                    <h6>Target Per Status:</h6>
                    <div class="row">
                        @foreach($statuses as $status)
                        <div class="col-md-6">
                            <label>{{ $status->name }}</label>
                            <input type="number" name="targets[{{ $status->id }}]" value="0" class="form-control">
                        </div>
                        @endforeach
                    </div>
                </div>

               {{--  <div class="mb-3">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="3"></textarea>
                </div> --}}
                <input type="hidden" name="company_id" value="1">
            </div>
            <div class="offcanvas-footer text-end p-3">
                <button type="submit" class="btn btn-success">Save Planner</button>
            </div>
        </form>
    </div>

    <!-- Filter -->
    <div class="row mb-3">
        <div class="col-md-4">
            <label for="plannerType" class="form-label">Filter by Planner Type</label>
            <select id="plannerType" class="form-control">
                <option value="">All Types</option>
                <option value="month">Monthly</option>
                <option value="year">Yearly</option>
                <option value="week">Weekly</option>
                <option value="hyearly">Half Yearly</option>
                <option value="qyearly">Quarterly</option>
            </select>
        </div>
    </div>

    <!-- Calendar -->
    <div id="plannerCalendar"></div>
</div>

<!-- Planner Details Modal -->
<div class="modal fade" id="plannerModal" tabindex="-1" aria-labelledby="plannerModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="plannerModalLabel">Planner Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p><strong>Type:</strong> <span id="modalPlannerType"></span></p>
        <p><strong>Start - End:</strong> <span id="modalPlannerDates"></span></p>
        <p><strong>Target Amount:</strong> ₹<span id="modalTargetAmount"></span></p>
        <p><strong>Channel:</strong> <span id="modalChannel"></span></p>
        <p><strong>Assigned To:</strong> <span id="modalAssignedTo"></span></p>
        <p><strong>Description:</strong> <span id="modalDescription"></span></p>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('plannerCalendar');

    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        height: 'auto',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listMonth'
        },
        events: function(fetchInfo, successCallback, failureCallback) {
            const type = document.getElementById('plannerType').value;
            fetch(`/planner-events?type=${type}`)
                .then(response => response.json())
                .then(data => successCallback(data))
                .catch(error => failureCallback(error));
        },
        eventClick: function(info) {
            const planner = info.event.extendedProps;

            document.getElementById('modalPlannerType').textContent = info.event.title || 'N/A';
            document.getElementById('modalPlannerDates').textContent = info.event.startStr + ' to ' + (info.event.endStr || info.event.startStr);
            document.getElementById('modalTargetAmount').textContent = planner.target_amount || '0';
            document.getElementById('modalChannel').textContent = planner.channel || 'N/A';
            document.getElementById('modalAssignedTo').textContent = planner.assigned_to || 'N/A';
            document.getElementById('modalDescription').textContent = planner.description || 'No description';

            const plannerModal = new bootstrap.Modal(document.getElementById('plannerModal'));
            plannerModal.show();
        }
    });

    calendar.render();

    document.getElementById('plannerType').addEventListener('change', function () {
        calendar.refetchEvents();
    });
});
</script>

<script>
document.getElementById('addPlannerForm').addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch("{{ route('planner.store') }}", {
        method: "POST",
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => {
        if (!response.ok) throw new Error('Failed to save');
        return response.json();
    })
    .then(data => {
        alert('Planner Added Successfully!');
        document.querySelector('#addPlannerCanvas .btn-close').click();
        document.getElementById('addPlannerForm').reset();
        window.location.reload();
    })
    .catch(error => {
        alert('Error adding planner');
    });
});
</script>
@endsection