@extends('adminlte::page')

@section('title', 'Opportunities')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Opportunity List</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active">Opportunity List</li>
            </ol>
        </div>
    </div>
@endsection



@section('content')


    <!-- Opportunities Table -->
    <div class="card">
        <div class="card-header d-flex align-items-center">
            <h3 class="card-title">Opportunity List</h3>
            <button class="btn bg-gradient-secondary ml-auto btn-m" data-toggle="modal"
                id="showAdvanceOpportunityFilterModal" data-target="#advanceOpportunityFilterModal"><i
                    class="fas fa-filter"></i></button>
            @if (request()->routeIs('opportunities.index') && $ableToEdit)
                <a class="btn bg-gradient-primary add-new-opportunity ml-2 btn-sm" title="Add New Opportunity"
                    data-toggle="modal" data-target="#modalAddOpportunities">
                    Add New Opportunity
                </a>
                <form id="addOpportunitiesForm">
                    <x-adminlte-modal id="modalAddOpportunities" title="Add New Opportunity" size="lg" theme="primary"
                        icon="fas fa-edit" v-centered static-backdrop scrollable>
                        @include('backend.opportunities.add_form')
                        <x-slot name="footerSlot">
                            <x-adminlte-button theme="default" label="Close" class="mr-auto model-btn-close"
                                data-dismiss="modal" id="closeOpportunitiesModalBtn" />

                            <x-adminlte-button theme="success" label="Save" class="modal-btn-save-changes"
                                type="submit" />
                        </x-slot>
                    </x-adminlte-modal>
                </form>
            @endif
        </div>

        <div class="card-body">
            <table id="opportunities_table" class="table table-bordered table-striped"
                data-url="{{ route('opportunities.list') }}">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Opportunity ID</th>
                        <th class="width-130">Opportunity</th>
                        <th>Owner</th>
                        <th>Workstream</th>
                        <th>Status</th>
                        <th>Due Date</th>
                        <th>Financial Impact</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    {{-- Filter --}}
    @include('backend.opportunities.advance-filter')
@endsection

@push('js')
    <script>
        var opportunityStoreRoute = "{{ route('opportunities.create') }}";
        var csrfToken = "{{ csrf_token() }}";
    </script>

    <script src="{{ asset('assets/js/backend/opportunities/opportunity_submit.js') }}"></script>

    <!-- Include AdminLTE and DataTables JS -->
    <script src="{{ asset('assets/js/backend/opportunities/opportunities.js') }}"></script>
    <script>
        const routes = {
            filter: "{{ request('filter') }}",
            threat: "{{ route('opportunities.index') }}",
            business_site: "{{ route('threats.get-business-sites') }}",
            business_unit: "{{ route('threats.get-business-units') }}",
            business_sub_unit: "{{ route('threats.get-business-sub-units') }}",
            get_filter_data: "{{ route('opportunities.get-filter-data') }}",
            currentRoute: "{{ request()->path() }}",
        };
    </script>
@endpush