@extends('layouts.contentNavbarLayout')

@section('title', 'Proposal Management')

@section('content')
<div class="container">
    <h2 class="mb-4">Proposals</h2>

    <a href="{{ route('proposals.create') }}" class="btn btn-primary mb-3">Send New Proposal</a>
    
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <table class="table table-bordered">
        <thead class="table-dark">
            <tr>
                <th>Title</th>
                <th>Client</th>
                <th>Amount</th>
                <th>Sent Date</th>
                <th>Expiry Date</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($proposals as $proposal)
            <tr>
                <td>{{ $proposal->title }}</td>
                <td>{{ $proposal->client->name ?? 'Unknown' }}</td>
                <td>${{ number_format($proposal->amount, 2) }}</td>
                <td>{{ $proposal->sent_date ? $proposal->sent_date->format('d M, Y') : 'N/A' }}</td>
                <td>{{ $proposal->expiry_date ? $proposal->expiry_date->format('d M, Y') : 'N/A' }}</td>
                
                <td>
                    <span class="badge bg-{{ $proposal->status == 'pending' ? 'warning' : ($proposal->status == 'accepted' ? 'success' : 'danger') }}">
                        {{ ucfirst($proposal->status) }}
                    </span>
                </td>
                <td>
                    <a href="#" class="btn btn-warning btn-sm edit-btn" data-id="{{ $proposal->id }}" data-bs-toggle="offcanvas" data-bs-target="#editProposalCanvas">Edit</a>
                    @if($proposal->proposal_status == 1)
                    <button class="btn btn-sm btn-success" disabled>Assigned</button>
                @else
                    <button class="btn btn-sm btn-primary open-assign-modal" 
                        data-proposal-id="{{ $proposal->id }}" 
                        data-bs-toggle="modal" 
                        data-bs-target="#assignEmployeeModal">
                        Assign Employees
                    </button>
                @endif
                
                    
                    <form action="{{ route('proposals.destroy', $proposal->id) }}" method="POST" style="display:inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">Delete</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="text-center">No proposals found.</td>
            </tr>
            @endforelse
        </tbody>
    </table>

    @if($proposals->hasPages())
        {{ $proposals->links() }}
    @endif
</div>

<!-- Modal for Assigning Employees -->
<div class="modal fade" id="assignEmployeeModal" tabindex="-1" aria-labelledby="assignEmployeeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Assign Employees</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="assignEmployeeForm" method="POST" action="{{ route('proposals.assign') }}">
                    @csrf
                    <input type="hidden" name="proposal_id" id="assignProposalId">

                    <div class="mb-3">
                        <label class="form-label">Select Employees</label>
                        <div id="employeeList">
                            @forelse($employees as $employee)
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="employees[]" value="{{ $employee->id }}" id="emp{{ $employee->id }}">
                                    <label class="form-check-label" for="emp{{ $employee->id }}">{{ $employee->name }}</label>
                                </div>
                            @empty
                                <p class="text-muted">No employees available</p>
                            @endforelse
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Assign</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".open-assign-modal").forEach(button => {
        button.addEventListener("click", function () {
            let proposalId = this.getAttribute("data-proposal-id");
            document.getElementById("assignProposalId").value = proposalId;
        });
    });
});

</script>



<!-- Offcanvas for Edit Proposal -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="editProposalCanvas">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Edit Proposal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <form id="editProposalForm">
            @csrf
            @method('PUT')
            <input type="hidden" id="editProposalId">

            <div class="mb-3">
                <label>Title</label>
                <input type="text" id="editTitle" class="form-control" required>
            </div>
            <div class="mb-3">
                <label>Client</label>
                <select id="editClient" class="form-control" required>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}">{{ $client->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3">
                <label>Project Type</label>
                <select id="editType" class="form-control" required>
                    @foreach($ptypes as $type)
                        <option value="{{ $type->id }}">{{ $type->category }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Industry</label>
                <select id="editIndustry" class="form-control" required>
                    <option value="" disabled selected>Select Industry</option>
                    @foreach($industries as $industry)
                        <option value="{{ $industry->id }}">
                            {{ $industry->page_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Solutions</label>
                <select id="editSolution" class="form-control" required>
                    <option value="" disabled selected>Select Solution</option>
                    @foreach($solutions as $solution)
                        <option value="{{ $solution->id }}">
                            {{ $solution->page_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3">
                <label>Amount</label>
                <input type="number" id="editAmount" class="form-control" required>
            </div>
            <div class="mb-3">
                <label>Sent Date</label>
                <input type="date" id="editSentDate" class="form-control">
            </div>
            <div class="mb-3">
                <label>Expiry Date</label>
                <input type="date" id="editExpiryDate" class="form-control">
            </div>
            <div class="mb-3">
                <label>Status</label>
                <select id="editStatus" class="form-control">
                    <option value="pending">Pending</option>
                    <option value="accepted">Accepted</option>
                    <option value="rejected">Rejected</option>
                </select>
            </div>
            <div class="mb-3">
                <label>Notes</label>
                <textarea id="editNotes" class="form-control"></textarea>
            </div>

            <button type="submit" class="btn btn-primary">Update Proposal</button>
        </form>
    </div>
</div>

<!-- JavaScript for AJAX -->
<!-- Bootstrap Confirm Modal -->
<div class="modal fade" id="confirmUpdateModal" tabindex="-1" aria-labelledby="confirmUpdateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmUpdateModalLabel">Confirm Update</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to update this proposal?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="confirmUpdateBtn" class="btn btn-primary">Yes, Update</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let selectedProposalId = null;
    let formData = null;

    document.querySelectorAll('.edit-btn').forEach(button => {
        button.addEventListener('click', function() {
            let proposalId = this.getAttribute('data-id');

            // Fetch proposal data using AJAX
            fetch(`/proposals/${proposalId}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('editProposalId').value = data.id;
                    document.getElementById('editTitle').value = data.title;
                    document.getElementById('editClient').value = data.client_id;
                    document.getElementById('editIndustry').value = data.industry;
                    document.getElementById('editType').value = data.project_type;
                    document.getElementById('editSolution').value = data.solution;
                    document.getElementById('editAmount').value = data.amount;

                    // Format date correctly before inserting into input field
                    document.getElementById('editSentDate').value = data.sent_date ? formatDate(data.sent_date) : '';
                    document.getElementById('editExpiryDate').value = data.expiry_date ? formatDate(data.expiry_date) : '';

                    document.getElementById('editStatus').value = data.status;
                    document.getElementById('editNotes').value = data.notes;
                });
        });
    });

    document.getElementById('editProposalForm').addEventListener('submit', function(event) {
        event.preventDefault();

        selectedProposalId = document.getElementById('editProposalId').value;

        formData = {
            _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            _method: 'PUT', // Laravel requires this for PUT requests
            title: document.getElementById('editTitle').value,
            client_id: document.getElementById('editClient').value,
            industry: document.getElementById('editIndustry').value,
            solutions: document.getElementById('editSolution').value,
            project_type: document.getElementById('editType').value,
            amount: document.getElementById('editAmount').value,
            sent_date: document.getElementById('editSentDate').value,
            expiry_date: document.getElementById('editExpiryDate').value,
            status: document.getElementById('editStatus').value,
            notes: document.getElementById('editNotes').value
        };

        // Show Bootstrap Modal
        let confirmModal = new bootstrap.Modal(document.getElementById('confirmUpdateModal'));
        confirmModal.show();
    });

    document.getElementById('confirmUpdateBtn').addEventListener('click', function() {
        if (selectedProposalId && formData) {
            fetch(`/proposals/${selectedProposalId}`, {
                method: 'POST',  // Use POST instead of PUT (with `_method=PUT`)
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                let confirmModal = bootstrap.Modal.getInstance(document.getElementById('confirmUpdateModal'));
                confirmModal.hide(); // Hide modal after confirmation
                location.reload(); // Reload the page to see changes
            })
            .catch(error => console.error('Error:', error));
        }
    });
});

// Function to correctly format the date
function formatDate(dateString) {
    let dateParts = dateString.split('-'); // Split YYYY-MM-DD
    return `${dateParts[0]}-${dateParts[1]}-${dateParts[2]}`; // Return unchanged date
}

</script>

@endsection