@extends('layouts/layoutMaster')

@section('title', 'Requests - Documents')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/flatpickr/flatpickr.css') }}" />
    <!-- Row Group CSS -->
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-rowgroup-bs5/rowgroup.bootstrap5.css') }}">
    <!-- Form Validation -->
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/@form-validation/umd/styles/index.min.css') }}" />
    {{-- MODAL --}}
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bs-stepper/bs-stepper.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-select/bootstrap-select.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/typography.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/katex.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/editor.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/dropzone/dropzone.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/flatpickr/flatpickr.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/sweetalert2/sweetalert2.css') }}" />
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/app-logistics-dashboard.css') }}" />
    <style>
        .circle-img {
            border-radius: 50%;
            overflow: hidden;
            width: 150px;
            height: 150px;
            background-color: white;
            /* Adjust width and height as needed */
        }

        .circle-img img {
            width: 100%;
            height: 100%;
            object-fit: scale-down;
            /* Ensures image fills the container */
        }

        .ctab {
            padding: 10px 25px;
            color: gray;
            border-bottom: 1px gray solid;
            font-weight: normal;
            cursor: pointer;

            a {
                color: gray;
            }
        }

        .ctaba {
            padding: 10px 25px;
            color: white;
            border-bottom: 1px white solid;
            font-weight: bold;
            cursor: pointer;

            a {
                color: white;
            }
        }
    </style>
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <!-- Flat Picker -->
    <script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
    <!-- Form Validation -->
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/bundle/popular.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js') }}"></script>
    {{-- MODAL --}}
    <script src="{{ asset('assets/vendor/libs/bs-stepper/bs-stepper.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/bootstrap-select/bootstrap-select.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/quill/katex.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/quill/quill.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/dropzone/dropzone.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
    <script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
    <script src="{{ asset('assets/vendor/libs/sweetalert2/sweetalert2.js') }}"></script>
@endsection

@section('page-script')
    <script>
        let epUrl = '{{ env('APP_URL') }}';
    </script>
    <script src="{{ asset('assets/js/document-manager-provider.js') }}"></script>
    {{-- MODAL --}}
    <script src="{{ asset('assets/js/document-manager-modals.js') }}"></script>
    <script src="{{ asset('assets/js/forms-file-upload.js') }}"></script>
@endsection

@section('content')
    <div class="row">
        <img class="object-fit-cover" src="{{ asset('assets/images/bnnr-5.jpg') }}"
            style="height: 230px; position: absolute; top: 0; left: 0; padding: 0; margin: 0; z-index: -1">

        {{-- secondary --}}
        <div class="col-lg-3" style="margin-top: 90px;">
            <div class="row mb-1 mt-4">
                <div class="col-lg-12">
                    <div class="card mb-3 py-3 px-2 bg-white"
                        style="border-left-width: 8px; border-left-color:{{ config('custom.custom.primaryColor') }}; border-left-style: solid;">
                        <div class="mx-2">
                            <div class="text-wrap fw-bold">
                                <a href="#" class="text-black">{{ strtoupper($provider->display_name) }}</a>
                            </div>
                            <div class="text-wrap text-muted">{{ session()->get('active_company')['roc_no'] }}
                            </div>
                            {{-- <div class="text-wrap">{{ session()->get('active_company')['group_company'] }}</div> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="divider text-secondary">
                        <div class="divider-text">Overview</div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-sm-6 col-lg-6 mb-4">
                    <div class="card card-border-shadow-primary">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-label-primary">
                                        <i class="ti ti-brand-juejin ti-md">
                                        </i></span>
                                </div>
                                <h4 class="ms-1 mb-0">
                                    42 </h4>
                            </div>
                            <p class="mb-1">
                                New
                                requests
                            </p>
                            <p class="mb-0">
                                <span class="fw-medium me-1">
                                    +18.2
                                    %
                                </span>
                                <small class="text-muted">
                                    than
                                    last
                                    week
                                </small>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-6 mb-4">
                    <div class="card card-border-shadow-warning">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-label-danger">
                                        <i class='ti ti-clock ti-md'>
                                        </i>
                                    </span>
                                </div>
                                <h4 class="ms-1 mb-0">
                                    8
                                </h4>
                            </div>
                            <p class="mb-1">
                                Overdued
                                requests
                            </p>
                            <p class="mb-0">
                                <span class="fw-medium me-1">
                                    -8.7
                                    %
                                </span>
                                <small class="text-muted">
                                    than
                                    last
                                    week
                                </small>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-6 mb-4">
                    <div class="card card-border-shadow-danger">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-label-success">
                                        <i class='ti ti-checks ti-md'>
                                        </i>
                                    </span>
                                </div>
                                <h4 class="ms-1 mb-0">
                                    27
                                </h4>
                            </div>
                            <p class="mb-1">
                                Completed
                                requests
                            </p>
                            <p class="mb-0">
                                <span class="fw-medium me-1">
                                    +4.3
                                    %
                                </span>
                                <small class="text-muted">
                                    than
                                    last
                                    week
                                </small>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-6 mb-4">
                    <div class="card card-border-shadow-info">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-label-info">
                                        <i class='ti ti-file-upload ti-md'>
                                        </i>
                                    </span>
                                </div>
                                <h4 class="ms-1 mb-0">
                                    13
                                </h4>
                            </div>
                            <p class="mb-1">
                                Uploaded
                                documents
                            </p>
                            <p class="mb-0">
                                <span class="fw-medium me-1">
                                    -2.5
                                    %
                                </span>
                                <small class="text-muted">
                                    than
                                    last
                                    week
                                </small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- primary --}}
        <div class="col-lg-9" style="margin-top: 30px;">
            <div class="row mb-4">
                <div class="col d-flex justify-content-between">
                    @include('finances.partials.submenu')
                    <div class="align-self-end d-flex flex-row my-auto">
                        <div class="text-muted small my-auto me-2" id="batch-sel-count"></div>
                        <div style="width: 200px">
                            <select class="form-select">
                                <option value="">Actions</option>
                                <option value="1" data-bs-toggle="modal" data-bs-target="#dm-add-request-modal">Add
                                    New Request
                                </option>
                            </select>
                            {{-- <button class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#dm-add-request-modal">
                                <i class="ti ti-plus me-sm-1">
                                </i> <span class="d-none d-sm-inline-block">Add New Request</span>
                            </button> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-3 mb-3 mt-4" id="filter-container">
                <div class="col-md-2">
                    <select id="status-sel" class="form-select filter-selects">
                    </select>
                </div>
                <div class="col-md-2" id="payment-status-container">
                    <select id="payment-sel" class="form-select filter-selects">
                    </select>
                </div>
                <div class="col-md-2">
                    <select id="date-sel" class="form-select filter-selects">
                    </select>
                </div>
                <div class="col-md-2" id="custom-date-container">
                    <input type="text" class="form-control" placeholder="Select dates..." id="custom-date-inp" />
                </div>
            </div>
            {{-- <div class="row d-flex justify-content-between py-3 mb-3">
                <h4>
                    <span class="text-muted fw-light"><a class="text-muted" href="{{ route('documents') }}">Document
                            Manager</a> /
                    </span>Request
                </h4>
                <div class="align-items-right">
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dm-add-request-modal">
                        <i class="ti ti-plus me-sm-1">
                        </i> <span class="d-none d-sm-inline-block">Add New Request</span>
                    </button>
                </div>
            </div> --}}
            <div class="row">
                <div class="col-lg-12 col-sm-12 mb-4">
                    <div class="card">
                        <div class="card-datatable table-responsive pt-0">
                            <table class="datatables-basic table">
                                <thead>
                                    <tr>
                                        <th>
                                        </th>
                                        <th>
                                            request_id
                                        </th>
                                        <th>
                                            Company
                                            Name
                                        </th>
                                        <th>
                                            Engagement
                                            /
                                            Request
                                        </th>
                                        <th>
                                            Due
                                            Date
                                        </th>
                                        <th>
                                            Last
                                            Activity
                                        </th>
                                        <th>
                                            Status
                                        </th>
                                        <th>
                                        </th>
                                        <th>
                                            Action
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@include('documents.modals.add-request-provider')