@extends('layouts.contentNavbarLayout')

@section('content')
<div class="container mt-4">
    @if(auth()->user()->user_type == 1)
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Company Planners</h4>
        <button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#plannerCanvas">Create Planner</button>
    </div>
    @endif
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif


     
    
    
<div class="row">
    @if(auth()->user()->user_type == 1)
      @foreach($planners as $planner)
        @php
          $assignedUsers = explode(',', $planner->assigned_to);
        @endphp
        <div class="col-xl-4 col-md-6 mb-4">
          <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
              <h5 class="card-title m-0 me-2 text-capitalize">{{ $planner->planner_type }} - {{ $planner->plan_period }}</h5>
  
              <button 
                class="btn btn-sm btn-outline-primary assign-btn" 
                data-bs-toggle="modal" 
                data-bs-target="#assignModal" 
                data-planner-id="{{ $planner->id }}"
                data-assigned-users="{{ $planner->assigned_to }}"
              >
                Assign Users
              </button>
  
              <button 
                class="btn btn-sm btn-outline-secondary edit-btn" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#editPlannerCanvas" 
                data-planner='@json($planner)'
              >
                Edit
              </button>
            </div>
  
            <div class="card-body pt-lg-8">
              <div class="mb-4">
                <div class="d-flex align-items-center">
                  <h3 class="mb-0">₹{{ number_format($planner->target_amount, 2) }}</h3>
                </div>
                <p class="mb-0">Target for this period</p>
              </div>
  
              <ul class="p-0 m-0 list-unstyled">
                @foreach($planner->targets as $target)
                  <li class="d-flex mb-3 align-items-center">
                    <div class="avatar flex-shrink-0 bg-lightest rounded me-3">
                      <img src="{{ asset('assets/img/icons/misc/aviato.png') }}" alt="{{ $target->status->name }}">
                    </div>
                    <div class="d-flex w-100 justify-content-between align-items-center">
                      <div>
                        <h6 class="mb-0">{{ $target->status->name }}</h6>
                      </div>
                      <span class="bg-label-secondary rounded-pill">{{ $target->target_count }}</span>
                    </div>
                  </li>
                @endforeach
              </ul>
  
              <ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
                @foreach($planner->assignedUsers as $user)
                  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="bottom"
                      class="avatar avatar-sm pull-up d-flex align-items-center justify-content-center"
                      aria-label="{{ $user->name }}"
                      data-bs-original-title="{{ $user->name }}">
                    <a href="#">
                      <img class="rounded-circle" 
                           src="{{ asset('storage/' . $user->profile_image) }}" 
                           alt="{{ $user->name }}">
                    </a>
                  </li>
                @endforeach
                <a href="{{ url('/company-planners/details/' . $planner->id) }}" class="text-end">View Details</a>

              </ul>

            </div>
          </div>
        </div>
      @endforeach
    @else
    {{-- assigned to user --}}
    <h4 class="mb-4">Company Planners</h4>
    @foreach($planners as $planner)
    @php
      $assignedUserIds = explode(',', $planner->assigned_to);
    @endphp
  
    @if(in_array(auth()->id(), $assignedUserIds))
      <div class="col-xl-4 col-md-6 mb-4">
        <div class="card">
          <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title m-0 me-2 text-capitalize">{{ $planner->planner_type }} - {{ $planner->plan_period }}</h5>
  
           
          </div>
  
          <div class="card-body pt-lg-8">
            <div class="mb-4">
              <div class="d-flex align-items-center">
                <h3 class="mb-0">₹{{ number_format($planner->target_amount, 2) }}</h3>
              </div>
              <p class="mb-0">Target for this period</p>
            </div>
  
            <ul class="p-0 m-0 list-unstyled">
              @foreach($planner->targets as $target)
                <li class="d-flex mb-3 align-items-center">
                  <div class="avatar flex-shrink-0 bg-lightest rounded me-3">
                    <img src="{{ asset('assets/img/icons/misc/aviato.png') }}" alt="{{ $target->status->name }}">
                  </div>
                  <div class="d-flex w-100 justify-content-between align-items-center">
                    <div>
                      <h6 class="mb-0">{{ $target->status->name }}</h6>
                    </div>
                    <span class="bg-label-secondary rounded-pill">{{ $target->target_count }}</span>
                  </div>
                </li>
              @endforeach
            </ul>
  
            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
              @foreach($planner->assignedUsers as $user)
                <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="bottom"
                    class="avatar avatar-sm pull-up d-flex align-items-center justify-content-center"
                    aria-label="{{ $user->name }}"
                    data-bs-original-title="{{ $user->name }}">
                  <a href="#">
                    <img class="rounded-circle" 
                         src="{{ asset('storage/' . $user->profile_image) }}" 
                         alt="{{ $user->name }}">
                  </a>
                </li>
              @endforeach
            </ul>
          </div>
        </div>
      </div>
    @endif
  @endforeach
  
    {{-- /end if --}}
    @endif
  </div>
  
          


    <div class="offcanvas offcanvas-end" tabindex="-1" id="plannerCanvas" aria-labelledby="plannerCanvasLabel">
        <div class="offcanvas-header">
            <h5 id="plannerCanvasLabel">Create Planner</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form action="{{ route('company-planners.store') }}" method="POST">
                @csrf

                <select name="planner_type" class="form-control" id="plannerType" required>
                  <option value="">Select Type</option>
                  <option value="month">Month</option>
                  <option value="year">Year</option>
                  <option value="week">Week</option>
                  <option value="hyearly">Half Yearly</option>
                  <option value="qyearly">Quarter Yearly</option>
              </select>
              

              <div class="mb-3">
                <label class="form-label">Plan Period:</label>
                <div id="planPeriodContainer">
                    <input type="text" name="plan_period" class="form-control" placeholder="e.g. Jan" required>
                </div>
            </div>
            

                <div class="mb-3">
                    <label class="form-label">Target Amount:</label>
                    <input type="number" step="0.01" name="target_amount" class="form-control">
                </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>

                <button type="submit" class="btn btn-success w-100">Save Planner</button>
            </form>
        </div>
    </div>
    <!-- Modal -->
<div class="modal fade" id="assignModal" tabindex="-1" aria-labelledby="assignModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <form method="POST" action="{{ route('company-planners.assign') }}">
        @csrf
        <input type="hidden" name="planner_id" id="assignPlannerId">
  
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Assign Users</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
  
          <div class="modal-body">
            @foreach($users as $user)
            <div class="form-check">
                <input type="checkbox" name="assigned_to[]" value="{{ $user->id }}"
                       class="form-check-input"
                       id="user_{{ $user->id }}"
                       {{ isset($planner) && $planner->assignedUsers->contains($user->id) ? 'checked' : '' }}>
                <label class="form-check-label" for="user_{{ $user->id }}">{{ $user->name }}</label>
            </div>
        @endforeach
        
        
          </div>
  
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Assign</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="editPlannerCanvas" aria-labelledby="editPlannerCanvasLabel">
    <div class="offcanvas-header">
        <h5 id="editPlannerCanvasLabel">Edit Planner</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <form method="POST" id="editPlannerForm" action="">
            @csrf
            @method('PUT')
            <input type="hidden" name="planner_id" id="editPlannerId">

            <div class="mb-3">
                <label class="form-label">Planner Type:</label>
                <select name="planner_type" id="editPlannerType" class="form-control" required>
                    <option value="month">Month</option>
                    <option value="year">Year</option>
                    <option value="week">Week</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Plan Period:</label>
                <input type="text" name="plan_period" id="editPlanPeriod" class="form-control" required>
            </div>

            <div class="mb-3">
                <label class="form-label">Target Amount:</label>
                <input type="number" name="target_amount" id="editTargetAmount" step="0.01" class="form-control">
            </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 edit-industry" id="edit_industry_{{ $industry->id }}">
                            <label class="form-check-label" for="edit_industry_{{ $industry->id }}">{{ $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 edit-solution" id="edit_solution_{{ $solution->id }}">
                            <label class="form-check-label" for="edit_solution_{{ $solution->id }}">{{ $solution->page_name }}</label>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            
            

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

            {{-- Optionally add status target fields if needed --}}

            <button type="submit" class="btn btn-success w-100">Update Planner</button>
        </form>
    </div>
</div>

<script>
    document.querySelectorAll('.edit-btn').forEach(button => {
        button.addEventListener('click', function () {
            const planner = JSON.parse(this.getAttribute('data-planner'));

            // Set form values
            document.getElementById('editPlannerId').value = planner.id;
            document.getElementById('editPlannerType').value = planner.planner_type;
            document.getElementById('editPlanPeriod').value = planner.plan_period;
            document.getElementById('editTargetAmount').value = planner.target_amount;
            document.getElementById('editChannel').value = planner.channel;

            // Set form action dynamically
            const form = document.getElementById('editPlannerForm');
            form.action = `/admin/company-planners/${planner.id}`;

            // Clear all checkboxes
            document.querySelectorAll('.edit-industry').forEach(cb => cb.checked = false);
            document.querySelectorAll('.edit-solution').forEach(cb => cb.checked = false);

            // Check existing industries
            if (planner.industry) {
                planner.industry.split(',').forEach(id => {
                    const checkbox = document.getElementById('edit_industry_' + id.trim());
                    if (checkbox) checkbox.checked = true;
                });
            }

            // Check existing solutions
            if (planner.solutions) {
                planner.solutions.split(',').forEach(id => {
                    const checkbox = document.getElementById('edit_solution_' + id.trim());
                    if (checkbox) checkbox.checked = true;
                });
            }
        });
    });
</script>




<script>
    var assignModal = document.getElementById('assignModal');
    assignModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var plannerId = button.getAttribute('data-planner-id');
        var assignedUsers = button.getAttribute('data-assigned-users')?.split(',') || [];
  
        document.getElementById('assignPlannerId').value = plannerId;
  
        // Uncheck all first
        document.querySelectorAll('#assignModal input[name="assigned_to[]"]').forEach(checkbox => {
            checkbox.checked = false;
        });
  
        // Re-check only assigned ones
        assignedUsers.forEach(id => {
            let checkbox = document.getElementById('user_' + id.trim());
            if (checkbox) checkbox.checked = true;
        });
    });
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
        const plannerType = document.getElementById('plannerType');
        const planPeriodContainer = document.getElementById('planPeriodContainer');

        plannerType.addEventListener('change', function () {
            const type = this.value;
            let html = '';

            if (type === 'month') {
                html = `
                    <select name="plan_period" class="form-control" required>
                        <option value="">Select Month</option>
                        <option value="Jan">January</option>
                        <option value="Feb">February</option>
                        <option value="Mar">March</option>
                        <option value="Apr">April</option>
                        <option value="May">May</option>
                        <option value="Jun">June</option>
                        <option value="Jul">July</option>
                        <option value="Aug">August</option>
                        <option value="Sep">September</option>
                        <option value="Oct">October</option>
                        <option value="Nov">November</option>
                        <option value="Dec">December</option>
                    </select>
                `;
            } else if (type === 'year') {
                const currentYear = new Date().getFullYear();
                html = `<select name="plan_period" class="form-control" required>
                            <option value="">Select Year</option>`;
                for (let i = currentYear - 5; i <= currentYear + 5; i++) {
                    html += `<option value="${i}">${i}</option>`;
                }
                html += `</select>`;
            } else if (type === 'week') {
                html = `
                    <input type="week" name="plan_period" class="form-control" required>
                `;
            } else if (type === 'hyearly') {
                html = `
                    <select name="plan_period" class="form-control" required>
                        <option value="">Select Half</option>
                        <option value="H1">First Half (Jan - Jun)</option>
                        <option value="H2">Second Half (Jul - Dec)</option>
                    </select>
                `;
            } else if (type === 'qyearly') {
                html = `
                    <select name="plan_period" class="form-control" required>
                        <option value="">Select Quarter</option>
                        <option value="Q1">Q1 (Jan - Mar)</option>
                        <option value="Q2">Q2 (Apr - Jun)</option>
                        <option value="Q3">Q3 (Jul - Sep)</option>
                        <option value="Q4">Q4 (Oct - Dec)</option>
                    </select>
                `;
            } else {
                html = `<input type="text" name="plan_period" class="form-control" placeholder="e.g. Jan" required>`;
            }

            planPeriodContainer.innerHTML = html;
        });
    });
</script>

  

@endsection