@extends('layouts.dashboard.superadminapp')

@section('title', 'Manufacturing Planning')


@section('content')
    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <style>
        .nav-tabs {
            /* Container styles if needed */
            border-bottom: 1px solid #dee2e6;
            /* Keep Bootstrap's bottom border */
        }

        .nav-tabs .nav-item {
            /* This ensures each tab item can control its width */
            margin-right: 5px;
            /* Optional: space between tabs */
        }

        .nav-tabs .nav-link {
            color: gray;
            min-width: 150px;
            /* Minimum width for each tab */
            text-align: center;
            /* Center text */
            padding: 10px 20px;
            /* Increased padding for larger tabs */
            transition: all 0.3s ease;
            /* Smooth hover effect */
        }

        .nav-tabs .nav-link.active {
            color: #fff;
            background-color: #4287f5;
            border-color: #4287f5;
            /* Match border to background */
        }

        .nav-tabs .nav-link:hover:not(.active) {
            color: #fff;
            background-color: #4287f5;
        }

        .display-date {
            font-size: 1rem;
            color: #6c757d;
        }

        .display-time {
            font-size: 1rem;
            color: #6c757d;
        }

        .tab-content .row>[class*="col-"] {
            margin-bottom: 1.5rem !important;
        }

        /* .card-spacing {
            margin-bottom: 1.5rem !important;
        } */

        /* Toast styles */
        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 15px;
            border-radius: 5px;
            color: white;
            z-index: 1000;
            animation: slideIn 0.3s, fadeOut 0.3s 2.7s forwards;
        }

        .toast-success {
            background: #28a745;
        }

        .toast-error {
            background: #dc3545;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
            }

            to {
                transform: translateX(0);
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
            }
        }

        .card-removal {
            animation: fadeOutScale 0.3s forwards;
        }

        @keyframes fadeOutScale {
            0% {
                opacity: 1;
                transform: scale(1);
            }

            100% {
                opacity: 0;
                transform: scale(0.9);
            }
        }

        /* Card removal animation */
        .col-md-6 {
            transition: all 0.3s ease;
        }

        .priority-dropdown {
            display: inline-block;
        }

        .priority-dropdown .priority-icon {
            font-size: 1.1rem;
            transition: all 0.2s;
            outline: none !important;
            box-shadow: none !important;
        }

        .priority-dropdown .priority-icon:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }

        .priority-dropdown .dropdown-menu {
            min-width: 160px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: none;
        }

        .priority-dropdown .dropdown-item {
            padding: 0.5rem 1rem;
            border-radius: 4px;
            margin: 0 4px;
        }

        .priority-dropdown .dropdown-item:hover {
            background-color: #f8f9fa;
        }

        .priority-dropdown .dropdown-toggle::after {
            display: none;
        }
    </style>

    <div class="bg-white p-2 d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h5 mb-0 text-gray-800">UEPL | Manufacturing Planning</h1>
        <div class="display-date">
            <span id="day">day</span>,
            <span id="daynum">00</span>
            <span id="month">month</span>
            <span id="year">0000</span>
        </div>
        <div class="display-time"></div>
    </div>

    <div class="my-4">
        <!-- Tabs (Bootstrap 4 syntax) -->
        @php
            $tab = $request->tab ?? 'r2plan'; // Default to 'r2plan' if not set
        @endphp
        <div class="d-flex justify-content-between align-items-center mb-3" >
            <span class="m-auto text-muted">Total Projects: <strong>{{ $read2PlanOrders->count() + $planningOrders->count() }}</strong></span>
            <a href="{{ route('superadmin.routecard.ganttchart') }}" class="btn btn-warning text-white fw-bold px-3"
                style="border-radius: 8px;">
                View Gantt Chart
            </a>
        </div>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link {{ $tab == 'r2plan' ? 'active' : '' }}" id="r2plan-tab" data-toggle="tab" href="#r2plan"
                    role="tab" aria-controls="r2plan" aria-selected="true">Ready To Plan</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $tab == 'planning' ? 'active' : '' }}" id="planning-tab" data-toggle="tab" href="#planning"
                    role="tab" aria-controls="planning" aria-selected="false">Planned Projects</a>
            </li>
        </ul>
        <!-- Tab Content -->
        <div class="tab-content mt-3" id="myTabContent">
            <div class="tab-pane fade {{ $tab == 'r2plan' ? 'show active' : '' }}" id="r2plan" role="tabpanel"
                aria-labelledby="r2plan-tab">
                <div class="row g-4">
                    @foreach ($read2PlanOrders as $order)
                        <div class="col-md-6 col-lg-4" id="card-{{ $order->routeCard->id ?? '' }}">
                            <div class="card shadow-sm border-0 h-100"
                                @if ($order->routeCard) data-routecard-id="{{ $order->routeCard->id }}" @endif
                                style="background-color: #e6f7ff; border-radius: 18px;">
                                <div class="card-body d-flex flex-column justify-content-between">
                                    <div>
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <small class="text-muted">
                                                SO Date:
                                                {{ \Carbon\Carbon::parse($order->sales_order_date)->format('d/m/Y') }}
                                            </small>
                                            <i class="bi bi-eye-fill text-primary" style="cursor:pointer;"></i>
                                        </div>

                                        <h5 class="fw-bold text-primary text-uppercase mb-1">{{ $order->sales_order_no }}
                                        </h5>
                                        <p class="text-muted small mb-2">{{ $order->customer->company }}</p>
                                        <p class="fw-semibold text-primary mb-0">Ready to plan</p>
                                        <hr class="mt-1 mb-2" style="border: 1px solid #007bff; width: 100%;">
                                    </div>

                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-warning fs-4" style="cursor: pointer;">+</span>
                                        <a href="{{ route('superadmin.routecard.index', ['sale_order_id' => $order->id]) }}"
                                            class="btn btn-warning text-white fw-bold px-3" style="border-radius: 8px;">
                                            Create Plan
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="tab-pane fade {{ $tab == 'planning' ? 'show active' : '' }}" id="planning" role="tabpanel"
                aria-labelledby="planning-tab">
                <div class="row g-4">
                    @foreach ($planningOrders as $order)
                        <div class="col-md-6 col-lg-4" id="card-{{ $order->routeCard->id }}"
                            data-routecard-id="{{ $order->routeCard->id }}">
                            <div class="card shadow-sm border-0 h-100"
                                style="background-color: #e1fad6; border-radius: 18px;">
                                <div class="card-body d-flex flex-column justify-content-between">
                                    <div>
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <small class="text-muted">
                                                SO Date:
                                                {{ \Carbon\Carbon::parse($order->sales_order_date)->format('d/m/Y') }}
                                            </small>
                                            <div class="d-flex flex-row action-buttons">
                                                <!-- View Button (Always Visible) -->
                                                <a class="btn btn-sm btn-link text-primary" title="View"
                                                    href="{{ url('superadmin/manufacturing/plan') }}/{{ $order->routeCard->id }}">
                                                    <i class="fas fa-eye"></i>
                                                </a>

                                                <!-- Edit Button (Always Visible) -->
                                                <a class="btn btn-sm btn-link text-primary" title="Edit"
                                                    href="{{ route('superadmin.routecard.index', ['route_card_id' => $order->routeCard->id]) }}">
                                                    <i class="fas fa-pencil-alt"></i>
                                                </a>

                                                <!-- <div
                                                    class="priority-selector d-flex justify-content-end align-items-center">

                                                    <div class="dropdown">
                                                        <button class="btn btn-sm btn-link text-muted p-0" type="button"
                                                            data-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false" title="Set Priority">
                                                            <i
                                                                class="fas fa-flag ml-1{{ $order->priority == 'High'
                                                                    ? 'text-danger'
                                                                    : ($order->priority == 'Medium'
                                                                        ? 'text-warning'
                                                                        : ($order->priority == 'Low'
                                                                            ? 'text-info'
                                                                            : 'text-muted')) }}"></i>
                                                        </button>

                                                        Dropdown Menu -->
                                                        <!-- <div class="dropdown-menu dropdown-menu-right">
                                                            <h6 class="dropdown-header">Set Priority</h6>
                                                            <a class="dropdown-item" href="#"
                                                                onclick="updatePriority({{ $order->id }}, 'High', this)">
                                                                <i class="fas fa-exclamation-circle text-danger mr-2"></i>
                                                                High Priority
                                                            </a>
                                                            <a class="dropdown-item" href="#"
                                                                onclick="updatePriority({{ $order->id }}, 'Medium', this)">
                                                                <i
                                                                    class="fas fa-exclamation-triangle text-warning mr-2"></i>
                                                                Medium Priority
                                                            </a>
                                                            <a class="dropdown-item" href="#"
                                                                onclick="updatePriority({{ $order->id }}, 'Low', this)">
                                                                <i class="fas fa-info-circle text-info mr-2"></i> Low
                                                                Priority
                                                            </a>
                                                            @if ($order->priority)
                                                                <div class="dropdown-divider"></div>
                                                                <a class="dropdown-item text-muted" href="#"
                                                                    onclick="updatePriority({{ $order->id }}, '', this)">
                                                                    <i class="fas fa-flag mr-2"></i> Clear Priority
                                                                </a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div> -->
                                                <!-- Actions Dropdown -->
                                                <div class="dropdown">
                                                    <button class="btn btn-sm btn-link text-muted ml-2" type="button"
                                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                                        title="More actions">
                                                        <i class="fas fa-ellipsis-v"></i>
                                                    </button>

                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        @if ($order->routeCard->status !== 'approved')
                                                            <!-- Show Approve option if not approved -->
                                                            <a class="dropdown-item text-success" href="#"
                                                                onclick="approveRouteCard({{ $order->routeCard->id }})">
                                                                <i class="fas fa-check-circle mr-2"></i> Approve
                                                            </a>
                                                        @else
                                                            <!-- Show Reject option if approved -->
                                                            <a class="dropdown-item text-warning" href="#"
                                                                onclick="rejectRouteCard({{ $order->routeCard->id }})">
                                                                <i class="fas fa-times-circle mr-2"></i> Reject
                                                            </a>
                                                        @endif

                                                        <!-- Delete Option (Always Visible) -->
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item text-danger" href="#"
                                                            onclick="window.confirmDelete({{ $order->routeCard->id ?? '' }}, event)">
                                                            <i class="fas fa-trash-alt mr-2"></i> Delete
                                                            <small class="text-muted d-block">(Including all
                                                                processes)</small>
                                                        </a>
                                                    </div>
                                                </div>
                                                <!-- Replace your current priority selector with this -->

                                            </div>

                                            <!-- Status Badge (Optional) -->
                                            <!-- @if ($order->routeCard->status)
    <span class="badge badge-{{ $order->routeCard->status === 'approved' ? 'success' : 'secondary' }} ml-2">
            {{ ucfirst($order->routeCard->status) }}
            @if ($order->routeCard->status === 'approved' && $order->routeCard->approved_at)
    <small class="ml-1">
                    ({{ \Carbon\Carbon::parse($order->routeCard->approved_at)->format('M d') }})
                </small>
    @endif
        </span>
    @endif -->
                                        </div>

                                        <h5 class="fw-bold text-primary text-uppercase mb-1">{{ $order->sales_order_no }}
                                        </h5>
                                        <p class="text-muted small mb-2">{{ $order->customer->company }}</p>
                                        <p class="fw-semibold text-primary mb-0">
                                            {{ $order->routeCard->processes->count() > 0 ? 'Planned' : 'Planning' }}
                                        </p>
                                        <hr class="mt-1 mb-2" style="border: 1px solid #60b85e; width: 100%;">
                                    </div>

                                    @if ($order->routeCard->processes->count() > 0)
                                        <div class="mt-2" style="font-size: .97rem;">
                                            <span style="color:#0a7d4b;font-weight:500;">Planned By:</span>
                                            <span style="color:#222;">{{ $order->routeCard->approved_by }}</span> <br>
                                            <span style="color:#0a7d4b;font-weight:500;">On:</span>
                                            <span
                                                style="color:#222;">{{ \Carbon\Carbon::parse($order->routeCard->approved_at)->format('d/m/Y') }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-warning fs-4" style="cursor: pointer;">+</span>
                                            @if ($order->routeCard->status === 'approved')
                                                <button class="btn btn-success btn-sm" style="font-weight:600;"
                                                    onclick="markReadyToProduction({{ $order->routeCard->id }})">
                                                    Ready to Production
                                                </button>
                                            @else
                                                <button class="btn btn-secondary btn-sm" style="font-weight:600;" disabled
                                                    title="Route card must be approved first (Current status: {{ ucfirst($order->routeCard->status ?? 'not approved') }})">
                                                    Ready to Production
                                                </button>
                                            @endif

                                        </div>
                                    @else
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-warning fs-4" style="cursor: pointer;">+</span>
                                            <a href="{{ route('superadmin.routecard.index', ['route_card_id' => $order->routeCard->id]) }}"
                                                class="btn btn-warning text-white fw-bold px-3"
                                                style="border-radius: 8px;">
                                                Create Plan
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')

    <script>
        function markReadyToProduction(cardId) {
    if (!confirm('Mark this project as Ready to Production and view Production Board?')) return;

    fetch(`/superadmin/routecard/${cardId}/ready-production`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json',
        }
    })
    .then(async res => {
        const text = await res.text();
        try {
            const json = JSON.parse(text);
            return json;
        } catch (e) {
            console.error('Not valid JSON:', text);
            throw new Error('Server returned HTML instead of JSON.');
        }
    })
    .then(resp => {
        if (resp.success) {
            showToast('Project marked as Ready to Production! Redirecting...');
            setTimeout(() => {
                window.location.href = "/superadmin/ready-to-production";
            }, 800);
        } else {
            showToast('Failed to update project!', 'Error');
        }
    })
    .catch(err => {
        console.error('Request failed:', err);
        showToast('Something went wrong!', 'Error');
    });
}

        

        document.addEventListener('DOMContentLoaded', function() {
            // If coming from a plan view and no tab parameter is set
            if (document.referrer.includes('/superadmin/manufacturing/plan/') &&
                !window.location.search.includes('tab=')) {

                // Update URL without reloading
                history.replaceState(null, null, '?tab=planning');

                // Activate the planning tab
                const tab = new bootstrap.Tab(document.querySelector('#planning-tab'));
                tab.show();
            }
        });

        function approveRouteCard(routeCardId) {
            if (confirm('Are you sure you want to approve this route card?')) {
                fetch(`/superadmin/routecard/${routeCardId}/approve`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            alert(data.message);
                            window.location.reload();
                        } else {
                            alert('Error: ' + (data.message || 'Approval failed'));
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Error approving route card: ' + error.message);
                    });
            }
        }

        function rejectRouteCard(routeCardId) {
            const reason = prompt('Please enter rejection reason:');
            if (reason !== null) {
                fetch(`/superadmin/routecard/${routeCardId}/reject`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            reason: reason
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert(data.message);
                            window.location.reload();
                        } else {
                            alert('Error: ' + (data.message || 'Rejection failed'));
                        }
                    })
                    .catch(error => {
                        alert('Error: ' + error.message);
                    });
            }
        }

        // function markReadyToProduction(cardId) {
        //     // Double-check status in case UI is out of sync
        //     fetch(`/superadmin/routecard/${cardId}/status`)
        //         .then(response => response.json())
        //         .then(data => {
        //             if (data.status !== 'approved') {
        //                 alert('This route card must be approved first');
        //                 return;
        //             }

        //             if (!confirm('Mark this project as Ready to Production?')) return;

        //             // Your existing ready-to-production logic
        //             fetch(`{{ url('manager/routecard/ready-production') }}/${cardId}`, {
        //                     method: 'POST',
        //                     headers: {
        //                         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //                     }
        //                 })
        //                 .then(res => res.json())
        //                 .then(resp => {
        //                     if (resp.success) {
        //                         window.location.href = `{{ url('manager/ready-to-production') }}`;
        //                     } else {
        //                         alert('Error: ' + (resp.message || 'Operation failed'));
        //                     }
        //                 });
        //         });
        // }
        // Add this toast function if missing
        //  Toast notification function
        function showToast(type, message) {
            // Remove existing toasts
            document.querySelectorAll('.toast-success, .toast-error').forEach(el => el.remove());

            const toast = document.createElement('div');
            toast.className = `toast-${type}`;
            toast.innerHTML = `
        <div class="toast-content">
            <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
            ${message}
        </div>
    `;
            document.body.appendChild(toast);

            // Auto-remove after 3 seconds
            setTimeout(() => {
                toast.style.animation = 'fadeOut 0.5s forwards';
                toast.addEventListener('animationend', () => toast.remove());
            }, 3000);
        }

        async function confirmDelete(routeCardId, event) {
            event.preventDefault();
            event.stopPropagation();

            if (!confirm('Permanently delete this route card?')) return;

            const deleteBtn = event.target.closest('a');
            const originalHtml = deleteBtn.innerHTML;
            deleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Deleting...';

            try {
                const response = await fetch(`/superadmin/routecard/${routeCardId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                });

                const data = await response.json();

                if (!response.ok) {
                    throw new Error(data.message || 'Delete failed');
                }

                // Find and remove the card - UPDATED SELECTOR
                const cardElement = document.getElementById(`card-${routeCardId}`);
                if (cardElement) {
                    // Add fade-out animation before removal
                    cardElement.style.opacity = '0';
                    cardElement.style.transform = 'scale(0.9)';
                    cardElement.style.transition = 'all 0.3s ease';

                    // Wait for animation to complete before removal
                    setTimeout(() => {
                        cardElement.remove();
                        showToast('success', 'Route card deleted successfully');
                    }, 300);
                } else {
                    showToast('error', 'Card element not found');
                }

            } catch (error) {
                console.error('Delete error:', error);
                showToast('error', error.message.includes('No query results') ?
                    'Route card not found or already deleted' :
                    error.message || 'Failed to delete');
            } finally {
                deleteBtn.innerHTML = originalHtml;
            }
        }

        // Add this to your window object
        window.confirmDelete = confirmDelete;

        function updatePriority(orderId, priority, element) {
            event.preventDefault();

            fetch(`/orders/${orderId}/update-priority`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        priority: priority
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update the flag icon color
                        const flagIcon = element.closest('.priority-dropdown').querySelector('.fa-flag');

                        // Remove all color classes
                        flagIcon.classList.remove('text-danger', 'text-warning', 'text-info', 'text-muted');

                        // Add appropriate color class
                        if (priority === 'High') {
                            flagIcon.classList.add('text-danger');
                        } else if (priority === 'Medium') {
                            flagIcon.classList.add('text-warning');
                        } else if (priority === 'Low') {
                            flagIcon.classList.add('text-info');
                        } else {
                            flagIcon.classList.add('text-muted');
                        }

                        showToast('success', `Priority set to ${priority || 'none'}`);
                    } else {
                        showToast('error', 'Failed to update priority');
                    }
                });
        }
    </script>