@extends('adminlte::page')
@section('title', __('adminlte::backend.OpportunityDetail'))
@section('content_header')
    <!-- bs-stepper CSS -->
    <link href="{{ asset('assets/css/bs-stepper/bs-stepper.min.css') }}" rel="stylesheet">

    <!-- bs-stepper JS -->
    <script src="{{ asset('assets/js/bs-stepper/bs-stepper.min.js') }}"></script>
    @include('backend.opportunities.details._header', ['threat' => $threat])
    @include('backend.opportunities.details._summary', ['threat' => $threat])

@endsection

<style>
    .form-control-sm {
        width: 100%;
        box-sizing: border-box;
    }

    .content-wrapper {
        height: inherit !important;
    }

    .small,
    small {
        font-size: 90% !important;
    }

    .content-header {
        position: sticky;
        top: 0;
        z-index: 1020;
        background-color: #f4f6f9;
    }

    .input-error {
        border: 2px solid red !important;
    }
</style>
@section('content')
@php
$disabled = '';
if ($latestApprovalRequest && $latestApprovalRequest->status == 'Pending') {
$disabled = 'disabled';
}
if($disabled == ''){
 $disabled =  (!auth()->user()->hasRole('Admin') && $threat->overall_status =='Cancelled' ) ? 'disabled' : ''; 
}
@endphp

<input type="hidden" id="is_opportunity_editable" value="{{ $ableToEdit }}">
@if ($ableToEdit)
<div class="row">
    <div class="col-md-12">
        <div class="card card-danger card-outline">
            <div class="card-header">
                <div class="card-tools">
                                     
                   @if ((Auth::user()->role == \App\Models\User::$user_types_names['Admin'] || Auth::user()->id == $threat->owner_id ) && $latestApprovalRequest && $latestApprovalRequest->status == 'Pending')
                     <button type="button" class="btn btn-secondary btn-sm" id="withdraw-threat-button"
                        data-threat-id="{{ $encodedThreatId }}">Withdraw
                        Approval Request</button>
                    @endif
                   
                    <button type="button" class="btn btn-primary btn-sm" id="edit-opportunity-button"
                        data-threat-id="{{ $encodedThreatId }}" data-phase-show="{{ $isPhaseIdEditable }}"
                        {{ $disabled }}>Edit
                        Opportunity</button>
                   @if ($showAdvanceButton)
                    <button type="button" class="btn btn-success btn-sm" id="opportunity-advanced-to-next-lgate"
                        data-threat-id="{{ $encodedThreatId }}" {{ $disabled }}>Advance to Next L-Gate</button>
                    @endif
                    <button type="button" class="btn btn-danger btn-sm" id="mark-as-cancelled"
                        data-threat-id="{{ $encodedThreatId }}">Mark as Cancelled</button>
                   
                    <input type="hidden" id="opportunity_unsaved_changes" name="opportunity_unsaved_changes" value="0">
                    <input type="hidden" id="unsaved_tab" name="unsaved_tab" value="details">
                </div>
            </div>
        </div>
    </div>
</div>
 @endif

@if (
$isApprover &&
$isApprovalRequestOfCurrentUser
)
<div class="row">
    <div class="col-md-12">
        <div class="card collapsed-card">
            <div class="card-header">
                <h3 class="card-title mt-1">Approver Actions</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-success btn-sm approve-btn" id="approverequest"
                        data-threat-id="{{ $encodedThreatId }}" data-toggle="modal" data-target="#modalApprove"><i
                            class="fas fa-check pr-1"></i>Approve</button>
                    <button type="button" class="btn btn-danger btn-sm reject-btn" id="rejectrequest"
                        data-threat-id="{{ $encodedThreatId }}" data-toggle="modal" data-target="#modalReject"><i
                            class="fas fa-times pr-1"></i>Reject</button>
                    <button type="button" class="btn btn-primary btn-sm reassign-btn" id="reassignrequest"
                        data-threat-id="{{ $encodedThreatId }}" data-toggle="modal" data-target="#modalReassign"><i
                            class="fas fa-user-plus pr-1"></i>Reassign</button>
                </div>
            </div>
        </div>
    @endif

    @include('backend.opportunities.details._ranking', [
        'threat' => $threat,
    ])

    <div class="row">
        <div class="col-md-12">
            <div class="card card-danger card-tabs card-outline">
                <div class="card-header p-0 pt-1">
                    <ul class="nav nav-tabs" id="opportunity-parent-tabs-one-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="opportunity-parent-tabs-one-details-tab" data-toggle="pill"
                                href="#opportunity-parent-tabs-one-details" role="tab"
                                aria-controls="opportunity-parent-tabs-one-details"
                                aria-selected="true">{{ __('adminlte::backend.OpportunityDetail') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="opportunity-parent-tabs-one-additional-tab" data-toggle="pill"
                                href="#opportunity-parent-tabs-one-additional" role="tab"
                                aria-controls="opportunity-parent-tabs-one-additional"
                                aria-selected="false">{{ __('adminlte::backend.OpportunityAdditional') }}</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="opportunity-parent-tabs-one-details" role="tabpanel"
                        aria-labelledby="opportunity-parent-tabs-one-details-tab">
                        @include('backend.opportunities.details._tab_details', [
                            'threat' => $threat,
                            'details' => $details,
                        ])
                    </div>
                    <div class="tab-pane fade" id="opportunity-parent-tabs-one-additional" role="tabpanel"
                        aria-labelledby="opportunity-parent-tabs-one-additional-tab">
                        @include('backend.opportunities.details._tab_additional', ['threat' => $threat])
                        <!-- Include the additional information view -->
                    </div>
                </div>
            </div>
            <!-- /.card -->
        </div>
        <div class="col-12 d-flex justify-content-between">
            <a href="javascript:void(0)" onclick="OpportunityLoadTabData.redirectWithActiveTab(true)"
                class="btn btn-default">Cancel</a>
            <input type="button" id="save-button" value="Save Changes" class="btn btn-success details-save-button"
                {{ $disabled }}>
        </div>
    </div>
    @include('backend.my_approvals.modals-myapprovals', ['threat' => $threat])
@endsection

@push('js')
    <script>
        const solutioning_routes = {
            solutioning_save_url: "{{ route('opportunities.savedata', ['tab' => '__TAB__', 'id' => '__ID__']) }}"
        };
    </script>
    <!-- Include jQuery, AdminLTE JS, and DataTables JS -->
    <script src="{{ asset('assets/js/backend/threats/threat-details-form.js') }}"></script>

    <script>
        $(document).ready(function() {
            // Disable all form elements by default            
            $('#opportunity-parent-tabs-one-details-tab').on('click', function() {
                $('#opportunity-parent-tabs-one-additional').removeClass('active show');
                $('#opportunity-parent-tabs-one-details').addClass('active show');
            });
            $('#opportunity-parent-tabs-one-additional-tab').on('click', function() {
                $('#parent-tabs-one-additional').addClass('active show');
                $('#parent-tabs-one-details').removeClass('active show');
            });
            $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) {
                const targetId = $(e.target).attr('href'); // parent tab content ID
                const $childNav = $(targetId).find('.nav-tabs');

                if ($childNav.length > 0) {
                    // Remove active class from all nested nav links
                    $childNav.find('.nav-link').removeClass('active');
                    // Hide all tab-panes
                    $(targetId).find('.tab-pane').removeClass('active show');

                    // Activate first tab
                    const $firstNavLink = $childNav.find('.nav-link:first');
                    $firstNavLink.addClass('active');
                    const firstPaneId = $firstNavLink.attr('href');
                    $(firstPaneId).addClass('active show');
                }
            });


        });
    </script>
@endpush