@extends('layouts.master')

@section('title', 'Manage orders')

@push('styles')
    <link rel="stylesheet" href="{{ asset('backend/css/pages-css/import-export-orders.css') }}">
    <style>
        .nav-tabs {
            border: 1px solid #663399;
        }

        .nav-tabs .nav-item .nav-link.active {
            border: 0
        }
    </style>
@endpush

@section('content')
    <section class="tabs-section">
        <div>
            <div class="container-fluid" id="csrnow_settings">
                <div class="row flex-nowrap">
                    <!-- TAB LINKS AREA -->
                    <div class="col-lg-3 px-2">
                        <div class="card">
                            <div class="card-body">
                            <ul class="nav nav-pills flex-column fs-6 border-0 text-start" id="myTab">
                                @can('orders-imports')
                                    <li class="nav-item active">
                                        <a id="import_tab" href="#import_tab_data" class="nav-link active" data-bs-toggle="tab"
                                            data-bs-target="#import_tab_data">
                                            <i class="fas fa-upload"></i>
                                            <span class="ms-1 d-none d-md-inline">{{ __('Import')}}</span>
                                        </a>
                                    </li>
                                @endcan

                                @can('orders-export')
                                    <li class="nav-item">
                                        <a id="export_tab" href="#export_tab_data" class="nav-link" data-bs-toggle="tab"
                                            data-bs-target="#export_tab_data">
                                            <i class="fas fa-download"></i>
                                            <span class="ms-1 d-none d-md-inline">{{ __('Export')}} {{ Auth::user()->hasRole('support-manager') ? '/ Clear' : '' }}</span>
                                        </a>
                                    </li>
                                @endcan
                                @can('orders-settings')

                                        <li class="nav-item">
                                            <a id="settings_tab" href="#settings_tab_data" class="nav-link" data-bs-toggle="tab"
                                                data-bs-target="#settings_tab_data">
                                                <i class="fas fa-cog"></i>
                                                <span class="ms-1 d-none d-md-inline">{{ __('Settings')}}</span>
                                            </a>
                                        </li>

                                @endcan
                                @can('orders-column-settings')

                                        <li class="nav-item">
                                            <a id="sa_settings_tab" href="#sa_settings_tab_data" class="nav-link"
                                                data-bs-toggle="tab" data-bs-target="#sa_settings_tab_data">
                                                <i class="fas fa-cog"></i>
                                                <span class="ms-1 d-none d-md-inline">{{ __('Column Settings')}}</span>
                                            </a>
                                        </li>

                                @endcan
                            </ul>
                        </div>
                        </div>
                    </div>
                    <!-- END  -->
                    <!-- TAB CONTENT AREA -->
                    <div class="col-lg-9 tabDiv" id="scroll_data">

                        <div class="tab-content pt-0" id="renderable">
                            @can('orders-imports')
                                <div class="tab-pane fade show active" id="import_tab_data"></div>
                            @endcan

                            @can('orders-export')
                                <div class="tab-pane fade" id="export_tab_data"></div>
                            @endcan
                            @can('orders-settings')
                                <div class="tab-pane fade" id="settings_tab_data"></div>
                            @endcan
                            @can('orders-column-settings')
                                <div class="tab-pane fade" id="sa_settings_tab_data"></div>
                            @endcan
                        </div>
                    </div>
                    <!-- END -->
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script type="text/javascript" src="{{ asset('backend/js/xlsx/xlsx.full.min.js') }}"></script>
    <script src="{{asset('backend/js/jqueryui/jquery-ui.min.js')}}"></script>
    <script src="{{ asset('backend/js/internal-scripts/common-template/import-export/order/index-blade.js?v=1') }}"></script>

@endpush