@extends('staff.layout')

@section('content')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    .proposal-card {
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fafafa;
        font-family: Arial, sans-serif;
        box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
        margin-bottom: 20px;
        height: 100%;
    }
    .proposal-card h4 {
        margin-bottom: 10px;
    }
    .proposal-card p {
        margin: 5px 0;
    }
    .view-btn {
        display: inline-block;
        padding: 8px 15px;
        background-color: rgb(44, 19, 134);
        color: white;
        border-radius: 4px;
        text-decoration: none;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    .dropdown-container {
        position: relative;
        display: inline-block;
    }

    .dropdown-options {
        display: none;
        position: absolute;
        top: 35px;
        left: 0;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.15);
        border-radius: 5px;
        z-index: 100;
    }

    .dropdown-container:hover .dropdown-options {
        display: block;
    }

    .dropdown-options form {
        margin: 0;
    }

    .dropdown-options button {
        display: block;
        width: 100%;
        padding: 8px 16px;
        background: white;
        color: black;
        text-align: left;
        border: none;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
    }

    .dropdown-options button:hover {
        background-color: #f0f0f0;
    }

    .btn-convert {
        background-color: #28a745;
        color: white;
    }
</style>

<!-- Create Proposal Modal -->
<div class="modal fade" id="createProposalModal" tabindex="-1" aria-labelledby="createProposalModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createProposalModalLabel">Create Proposal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Choose how you want to create the proposal:</p>
                <a href="{{ route('staff.proposal', ['id' => $profile->id]) }}" class="btn btn-primary modal-option-btn">
                    Generate Proposal
                </a>
               <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#proposalModal">
            Upload Proposal
        </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="container mb-4">
    <a href="javascript:void(0);" class="view-btn" data-bs-toggle="modal" data-bs-target="#createProposalModal">
        Create Proposal
    </a>

    <a href="javascript:void(0);" class="view-btn" data-bs-toggle="modal" data-bs-target="#statusModal">
        Update Lead Status
    </a>

    <a href="{{ route('followup.history', ['lead_id' => base64_encode($lead_id)]) }}" class="view-btn">
        View FollowUp History
    </a>

 <a href="{{ route('staff.whatapp_chat', ['lead_id' => base64_encode($lead_id)]) }}" class="view-btn">
    Chat
</a>

</div>

<!-- Modal -->
<div class="modal fade" id="proposalModal" tabindex="-1" aria-labelledby="proposalModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h5 class="modal-title" id="proposalModalLabel">Upload Proposal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Modal Body -->
            <form id="proposalForm" action="{{ route('upload_proposal') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- Hidden Index ID -->
                <input type="hidden" name="index_data_id" value="{{ $lead_id }}">

                <div class="modal-body">
                    <!-- Proposal Name -->
                    <div class="mb-3">
                        <label class="form-label">Proposal Name</label>
                        <input type="text" name="project_type" class="form-control" required>
                    </div>

                    <!-- Date -->
                    <div class="mb-3">
                        <label class="form-label">Date</label>
                        <input type="date" name="date" class="form-control">
                    </div>

                    <!-- Open Till -->
                    <div class="mb-3">
                        <label class="form-label">Open Till</label>
                        <input type="date" name="openTill" class="form-control">
                    </div>

                    <!-- File Upload -->

                    <div id="oldAttachmentContainer" style="margin-bottom: 10px;">
                        <label>Existing Attachment:</label>
                        <a href="#" id="oldAttachmentLink" target="_blank">No file</a>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Upload File</label>
                        <input type="file" name="attachment" class="form-control">
                    </div>

                    <!-- Price -->
                    <div class="mb-3">
                        <label class="form-label">Price</label>
                        <input type="number" name="budget" class="form-control" min="0">
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Submit Proposal</button>
                </div>
            </form>

        </div>
    </div>
</div>



<!-- Status Update Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="statusUpdateForm">
            @csrf
            <input type="hidden" name="lead_id" id="lead_id" value="{{ $profile->id }}">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update Lead Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select name="status" id="status" class="form-select" required>
                            <option value="">Select Status</option>
                            <option value="Call Back">Call Back</option>
                            <option value="Junk">Junk</option>
                            <option value="Not Reachable">Not Reachable</option>
                            <option value="RNR">RNR</option>
                            <option value="Rejected">Rejected</option>
                            <option value="Prospect">Prospect</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="call_date" class="form-label">Date</label>
                        <input type="date" name="call_date" id="call_date" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label for="call_time" class="form-label">Time</label>
                        <input type="time" name="call_time" id="call_time" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label for="callnote" class="form-label">Call Note</label>
                        <textarea name="callnote" id="callnote" rows="3" class="form-control" placeholder="Enter call note..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Update Status</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Success/Error Messages -->
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert" style="width: 350px;">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert" style="width: 350px;">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<!-- Profile Update Form -->
<form action="{{ route('update') }}" method="POST">
    @csrf
    <input type="hidden" name="id" value="{{ $profile->id }}">

    <div class="container">
        <div class="row">
            <div class="col-md-3 mb-3">
                <label for="name">Full Name</label>
                <input type="text" name="name" class="form-control" id="name"
                       value="{{ old('name', $profile->name) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="email">Email</label>
                <input type="email" name="email" class="form-control" id="email"
                       value="{{ old('email', $profile->email) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="phone">Phone Number</label>
                <input type="text" name="phone" class="form-control" id="phone"
                       value="{{ old('phone', $profile->phone) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="alternate_phone">Alternate Phone Number</label>
                <input type="text" name="alternate_phone" class="form-control" id="alternate_phone"
                       value="{{ old('alternate_phone', $profile->alternate_phone) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="requirement">Requirement</label>
                <input type="text" name="requirement" class="form-control" id="requirement"
                       value="{{ old('requirement', $profile->requirement) }}">
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 mb-3">
                <label for="estimate">Client Estimate to launch</label>
                <input type="text" name="estimate" class="form-control" id="estimate"
                       value="{{ old('estimate', $profile->estimate) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="budget">Budget</label>
                <input type="text" name="budget" class="form-control" id="budget"
                       value="{{ old('budget', $profile->budget) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="type">Type</label>
                <input type="text" name="type" class="form-control" id="type"
                       value="{{ old('type', $profile->type) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="requirement">Lead Source</label>
                <input type="text" name="source" class="form-control" id="source"
                       value="{{ old('source', $profile->source) }}">
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 mb-3">
                <label for="estimate">Mode</label>
                <input type="text" name="mode" class="form-control" id="mode"
                       value="{{ old('mode', $profile->mode) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="country">Country</label>
                <input type="text" name="country" class="form-control" id="country"
                       value="{{ old('country', $profile->country) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="state">State</label>
                <input type="text" name="state" class="form-control" id="state"
                       value="{{ old('state', $profile->state) }}">
            </div>

            <div class="col-md-3 mb-3">
                <label for="district">District</label>
                <input type="text" name="district" class="form-control" id="district"
                       value="{{ old('district', $profile->district) }}">
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 text-right">
                <button type="submit" class="btn btn-primary" 
                        style="background-color:rgb(44, 19, 134); border:none;">
                    Update Profile
                </button>
            </div>
        </div>
    </div>
</form>

<!-- Project Proposals Section -->
<div class="container">
    <h3 class="text-center my-4">PROJECT PROPOSALS</h3>
    <div class="row">
        @foreach ($proposals as $proposal)
            <div class="col-md-4 d-flex">
                <div class="proposal-card w-100 position-relative p-3">
                    <!-- Top-right action buttons -->
                    <div style="position: absolute; top: 10px; right: 10px; display: flex; gap: 5px;">
                        <form action="{{ route('edit_proposal', $proposal->id) }}" method="GET">
                            @csrf
                            <button type="submit" title="Edit" 
                                    style="padding: 6px 10px; background-color:white; color: white; border: none; border-radius: 5px;">
                                ✏️
                            </button>
                        </form>

                        <form action="{{ route('download_pdf', $proposal->id) }}" method="POST">
                            @csrf
                            <button type="submit" title="Download"
                                    style="padding: 6px 10px; background-color: white; color: white; border: none; border-radius: 5px;">
                                ⬇️
                            </button>
                        </form>
                    </div>

                    <!-- Proposal Info -->
                    <h6>#{{ $proposal->proposal_id }}</h6>
                    <p><strong>Date:</strong> {{ \Carbon\Carbon::parse($proposal->date)->format('d-m-Y') }}</p>
                    <p><strong>Open Till:</strong> {{ \Carbon\Carbon::parse($proposal->open_till)->format('d-m-Y') }}</p>
                    <br>

                    <!-- Action Buttons -->
                    <div style="display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;">
                        <a href="{{ route('view_proposal', $proposal->id) }}" 
                           class="view-btn"
                           style="padding: 8px 16px; background-color: #333; color: white; text-decoration: none; border-radius: 5px;">
                            View Details
                        </a>

                        <form action="{{ route('send_mail_api', $proposal->id) }}" method="POST">
                            @csrf
                            <button type="submit" 
                                    style="padding: 8px 16px; background-color: darkorange; color: white; border: none; border-radius: 5px;">
                                📧 Send Email
                            </button>
                        </form>
                    </div>

                    <!-- Draft Actions -->
                    <!-- <div class="mt-3 pt-2 border-top">
                        <p style="font-weight: bold;">Draft Actions:</p>
                        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                            <a href="{{ route('view_draft', ['id' => $proposal->id]) }}"
                               style="padding: 8px 16px; background-color: rgb(30, 40, 59); color: white; border: none; border-radius: 5px; text-decoration: none;">
                                📄 View Draft
                            </a>

                            <form action="{{ route('pdf_draft_download', $proposal->id) }}" method="POST" style="display: inline-block;">
                                @csrf
                                <button type="submit" title="Download"
                                        style="padding: 8px 16px; background-color:white; border: none; border-radius: 5px;">
                                    ⬇️ 
                                </button>
                            </form>

                            <form action="{{ route('edit_draft', $proposal->id) }}" method="GET" style="display: inline-block;">
                                @csrf
                                <button type="submit" title="Edit Draft"
                                        style="padding: 8px 16px; background-color:white; border: none; border-radius: 5px;">
                                    ✏️ 
                                </button>
                            </form>

                            <button type="button"
                                    class="btn btn-convert"
                                    data-bs-toggle="modal"
                                    data-bs-target="#confirmConvertModal{{ $proposal->id }}"  
                                    style="width:150px; border:none;">
                                Convert
                            </button>
                        </div>
                    </div> -->



                    <!-- Draft Actions -->
<div class="mt-3 pt-2 border-top">
    <p style="font-weight: bold;">Draft Actions:</p>
    <div style="display: flex; gap: 10px; flex-wrap: wrap;">

        @if(is_null($proposal->scope_of_work) && !empty($proposal->attachment))
            <!-- Show Re-Upload Button -->
            <form action="" method="POST" enctype="multipart/form-data">
                @csrf
               <button type="button" 
                        class="btn btn-warning btn-sm btn-reupload" 
                        data-id="{{ $proposal->id }}"
                        data-index="{{ $proposal->index_data_id }}"
                        data-project_type="{{ $proposal->project_type }}"
                        data-date="{{ $proposal->date }}"
                        data-open_till="{{ $proposal->open_till }}"
                        data-budget="{{ $proposal->budget }}"
                        data-attachment="{{ $proposal->attachment }}"
                        data-bs-toggle="modal" 
                        data-bs-target="#proposalModal">
                    📤 Re-Upload
                </button>

            </form>

           <a href="{{ route('upload_proposal_download', $proposal->id) }}" 
                title="Download"
                style="padding: 8px 16px; background-color:white; border: none; border-radius: 5px; display: inline-block; text-decoration: none;">
                    ⬇️
                </a>


          

                        <button type="button"
                    class="btn btn-convert"
                    data-bs-toggle="modal"
                    data-bs-target="#confirmConvertModal{{ $proposal->id }}"  
                    style="width:150px; border:none;">
                Convert
            </button>
        @else
            <!-- Show normal Draft buttons -->
            <a href="{{ route('view_draft', ['id' => $proposal->id]) }}"
               style="padding: 8px 16px; background-color: rgb(30, 40, 59); color: white; border: none; border-radius: 5px; text-decoration: none;">
                📄 View Draft
            </a>

            <form action="{{ route('pdf_draft_download', $proposal->id) }}" method="POST" style="display: inline-block;">
                @csrf
                <button type="submit" title="Download"
                        style="padding: 8px 16px; background-color:white; border: none; border-radius: 5px;">
                    ⬇️
                </button>
            </form>

            <form action="{{ route('edit_draft', $proposal->id) }}" method="GET" style="display: inline-block;">
                @csrf
                <button type="submit" title="Edit Draft"
                        style="padding: 8px 16px; background-color:white; border: none; border-radius: 5px;">
                    ✏️
                </button>
            </form>

            <button type="button"
                    class="btn btn-convert"
                    data-bs-toggle="modal"
                    data-bs-target="#confirmConvertModal{{ $proposal->id }}"  
                    style="width:150px; border:none;">
                Convert
            </button>
        @endif
    </div>
</div>


                    <!-- Convert Modal -->
                    <div class="modal fade" id="confirmConvertModal{{ $proposal->id }}" tabindex="-1" aria-labelledby="confirmConvertModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Confirm Conversion</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    Are you sure you want to convert this project?
                                </div>
                                <div class="modal-footer">
                                    <form action="{{ route('project_convert') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="index_data_id" value="{{ $proposal->index_data_id }}">
                                        <input type="hidden" name="project_type" value="{{ $proposal->project_type }}">
                                        <input type="hidden" name="proposal_id" value="{{ $proposal->id }}">
                                        <button type="submit" class="btn btn-success">Yes, Convert</button>
                                    </form>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        // Status Update Form Submission
        $('#statusUpdateForm').submit(function(e) {
            e.preventDefault();
            
            $.ajax({
                url: "{{ route('staff.create_follow_up') }}",
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    alert(response.message);
                    $('#statusModal').modal('hide');
                    $('#statusUpdateForm')[0].reset();
                    location.reload();
                },
                error: function(xhr) {
                    alert('Something went wrong!');
                    console.error(xhr.responseText);
                }
            });
        });

        // Set current date and time in status modal
        $('#statusModal').on('show.bs.modal', function() {
            let now = new Date();
            let date = now.toISOString().substr(0, 10);
            let time = now.toTimeString().substr(0, 5);
            
            $('#call_date').val(date);
            $('#call_time').val(time);
        });
    });
</script>

   
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Set today's date in the date input
    const today = new Date();
    const todayStr = today.toISOString().split('T')[0];
    document.getElementById('dateInput').value = todayStr;

    // Calculate 3 months later
    const threeMonthsLater = new Date(today);
    threeMonthsLater.setMonth(today.getMonth() + 3);

    // Handle month-end edge case
    if (threeMonthsLater.getDate() !== today.getDate()) {
        threeMonthsLater.setDate(0);
    }

    const tillDateStr = threeMonthsLater.toISOString().split('T')[0];
    document.getElementById('openTillInput').value = tillDateStr;
    document.getElementById('openTillDisplay').textContent = tillDateStr;
});

// Toggle between display and input for date fields
function toggleEdit(field) {
    const input = document.getElementById(field + 'Input');
    input.classList.toggle('hidden');
    if (!input.classList.contains('hidden')) {
        input.focus();
    }
}

// Update displayed date when input changes
function updateDate(field) {
    const display = document.getElementById(field + 'Display');
    const input = document.getElementById(field + 'Input');
    display.textContent = input.value;
    input.classList.add('hidden');
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const modal = document.querySelector('#proposalModal');
    const form = modal.querySelector('#proposalForm');

    document.querySelectorAll('.btn-add-proposal').forEach(btn => {
        btn.addEventListener('click', function () {
            form.reset();
            form.action = "{{ route('upload_proposal') }}";
            form.querySelector('[name=index_data_id]').value = "{{ $lead_id }}";
        });
    });

    document.querySelectorAll('.btn-reupload').forEach(btn => {
        btn.addEventListener('click', function () {
form.action = "{{ route('reupload_proposal', ['id' => 'ID_PLACEHOLDER']) }}".replace('ID_PLACEHOLDER', this.dataset.id);

            form.querySelector('[name=index_data_id]').value = this.dataset.index;
            form.querySelector('[name=project_type]').value = this.dataset.project_type;

            // Make sure dates are in YYYY-MM-DD format
            form.querySelector('[name=date]').value = this.dataset.date?.split(' ')[0] || '';
            form.querySelector('[name=openTill]').value = this.dataset.open_till?.split(' ')[0] || '';

            form.querySelector('[name=budget]').value = this.dataset.budget;
            // Show old attachment
        const oldAttachmentLink = document.getElementById('oldAttachmentLink');
        const oldAttachmentContainer = document.getElementById('oldAttachmentContainer');

        if (this.dataset.attachment) {
            // Assuming files are accessible via URL like /assets/files/proposals/filename
            oldAttachmentLink.href = `/assets/files/proposals/${this.dataset.attachment}`;
            oldAttachmentLink.textContent = this.dataset.attachment;
            oldAttachmentContainer.style.display = 'block';
        } else {
            oldAttachmentLink.href = '#';
            oldAttachmentLink.textContent = 'No file';
            oldAttachmentContainer.style.display = 'none';
        }
        });
    });
});

</script>





@endsection