@extends('layouts/contentNavbarLayout')
@section('title', 'Zillion - CRM')
@section('content')
<h3>Add Follow-up for {{ $contact->name }}</h3>
<div class="d-flex">
    <p class="me-4">
        <span class="mdi mdi-map-marker-account-outline"></span>
        State: {{ $contact->stateModel->name ?? 'N/A' }}
    </p>
    <p>
        <span class="mdi mdi-map-check-outline"></span>
        District: {{ $contact->districtModel->name ?? 'N/A' }}
    </p>
</div>
<h6>Industry: {{ $contact->industryModel->page_name ?? 'N/A' }}</h6>
<h6>Solution: {{ $contact->solutionModel->page_name ?? 'N/A' }}</h6>

<div class="row">
    <div class="col-md-12"><a href="/crm"><p class="text-right backbtn">
        <span class="mdi mdi-arrow-left-top"></span>
      </p></a></div>
    <div class="col-md-4">
        <div class="card mb-4">
      {{--       <h5 class="card-header">Add New</h5> --}}
            <div class="card-body">  
                    <form method="POST" action="{{ route('crm.storeFollowUp', $contact->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf    
                    @foreach ($columns as $column)
                    @if ($column === 'file')
                    <div class="mb-4">
                    <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                    <input type="file" id="{{ $column }}" class="form-control"
                    name="{{ $column }}">
                    </div>
                    @elseif ($column === 'created_at' || $column === 'updated_at' || $column === 'id' || $column === 'contact_id')
                    @elseif ($column === 'next_follow_up_date')
                    <!-- Dropdown for the status field -->
                    <div class="mb-4">
                        <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                        <input type="date" id="{{ $column }}" class="form-control"
                            name="{{ $column }}">
                        
                    </div>
                    @elseif ($column === 'status')
                    <div class="mb-4">
                    <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                    <select id="{{ $column }}" class="form-control" name="{{ $column }}">
                    <option value="">Select Status</option>
                    @foreach ($crmstatus as $status)
                    <option value="{{ $status->id }}">{{ $status->name }}</option>
                    @endforeach
                    </select>
                    </div>
                    @elseif ($column === 'notes')  
                    <div class="mb-4">
                        <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                        <textarea name="{{ $column }}" id="{{ $column }}" class="form-control"></textarea>
                    </div>  
                        
                    @else
                    <div class="form-floating form-floating-outline mb-4">
                    <input type="text" id="{{ $column }}" class="form-control"
                    name="{{ $column }}" placeholder="Enter your {{ $column }}">
                    <label for="{{ $column }}">{{ ucfirst($column) }}</label>
                    </div>
                    @endif
                    @endforeach

                    <div class="demo-inline-spacing">
                    <button type="submit" class="btn btn-primary">
                    <span class="tf-icons mdi mdi-checkbox-marked-circle-outline me-1"></span>Save Follow-up
                    </button>
                    </div>
                    </form>    
                <!-- File input -->
            </div>
            <div class="col-xl-2"></div>
        </div>
    </div>
    <div class="col-md-8">   
          <div class="card h-100">
            <div class="card-header">
                <div class="d-flex justify-content-between">
                    <h5 class="mb-0">Activity Timeline</h5>
                </div>
            </div>
            <div class="card-body pt-4">
                <ul class="timeline card-timeline mb-0">
                    @foreach($contact->followUps->sortBy('next_follow_up_date') as $followUp)
                        @php
                            // Check if the follow-up date is in the past
                            $isPastDue = \Carbon\Carbon::parse($followUp->next_follow_up_date)->isPast();
                        @endphp
                         
                        <li class="timeline-item timeline-item-transparent {{ $isPastDue ? 'opacity-50' : '' }}">
                            <span class="timeline-point timeline-point-primary"></span>
                            <div class="timeline-event">
                                <div class="timeline-header mb-3">
                                    <h6 class="mb-2">{{ $followUp->title }}</h6>
                                    <small class="text-muted">{{ $followUp->next_follow_up_date }}</small>
                                </div>
                                <p>Status : <small>{{ $followUp->crmstatusmodal->name }}</small></p>
                                <p class="mb-2">
                                    {{ $followUp->notes }}
                                </p>
                                <!-- Example additional content, adjust as needed -->
                                @if($followUp->file)
                                <div class="d-flex align-items-center mb-1">
                                    <div class="badge bg-lightest">
                                       <a href="{{ asset('storage/' . $followUp->file) }}" target="_blank"> <img src="{{ asset('assets/img/download.png') }}" alt="File" width="25" class="me-2">
                                        <span class="h6 mb-0">File Preview</span></a>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
            
            
        </div>        
    </div>
</div>
@endsection