@extends('layouts/layoutMaster')

@section('title', 'Document Manager')

@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') }}" />
@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="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">
        {{-- numbers --}} <div class="col-md-6 col-xxl-4 mb-4 order-1 order-xxl-1">
            <div class="row">
                <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>
        {{-- summary --}}
        <div class="col-md-6 col-xxl-4 mb-4 order-1 order-xxl-1" style="border-left: 1px solid #dddddd">
            <div class="card-body">
                <div id="deliveryExceptionsChart" class="pt-md-1">
                </div>
            </div>
            {{-- <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div class="card-title mb-0 text-center">
                    <h5 class="m-0 me-2">Summary</h5>
                </div>
                <div class="dropdown">
                    <button class="btn p-0" type="button" id="deliveryExceptions" data-bs-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        <i class="ti ti-dots-vertical"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="deliveryExceptions">
                        <a class="dropdown-item" href="javascript:void(0);">This week</a>
                        <a class="dropdown-item" href="javascript:void(0);">This month</a>
                        <a class="dropdown-item" href="javascript:void(0);">This year</a>
                        <a class="dropdown-item" href="javascript:void(0);">All</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="deliveryExceptionsChart" class="pt-md-1"></div>
            </div> --}}
            {{-- </div> --}}
        </div>
        {{-- overview --}}
        <div class="col-md-6 col-xxl-4 mb-4 order-1 order-xxl-1">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">
                            In
                            progress
                            overview
                        </h5>
                    </div>
                    {{-- <div class="dropdown">
                        <button class="btn p-0" type="button" id="deliveryExceptions" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            <i class="ti ti-dots-vertical"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="deliveryExceptions">
                            <a class="dropdown-item" href="javascript:void(0);">All</a>
                            <a class="dropdown-item" href="javascript:void(0);">In progress</a>
                            <a class="dropdown-item" href="javascript:void(0);">On hold</a>
                            <a class="dropdown-item" href="javascript:void(0);">Completed</a>
                            <a class="dropdown-item" href="javascript:void(0);">Archived</a>
                        </div>
                    </div> --}}
                </div>
                <div class="card-body">
                    <div class="d-none d-lg-flex vehicles-progress-labels mb-4">
                        <div class="vehicles-progress-label on-the-way-text" style="width: 85.4%;">
                            On
                            time
                        </div>
                        <div class="vehicles-progress-label waiting-text text-nowrap" style="width: 14.6%;">
                            Past
                            due
                        </div>
                    </div>
                    <div class="vehicles-overview-progress progress rounded-2 my-4" style="height: 46px;">
                        <div class="progress-bar fw-medium text-start bg-body text-dark px-3 rounded-0" role="progressbar"
                            style="width: 85.4%" aria-valuenow="85.4" aria-valuemin="0" aria-valuemax="100">
                            85.4
                            %
                        </div>
                        <div class="progress-bar fw-medium text-start bg-gray-900 px-2 rounded-0 px-lg-2 px-xxl-3"
                            role="progressbar" style="width: 14.6%" aria-valuenow="14.6" aria-valuemin="0"
                            aria-valuemax="100">
                            14.6
                            %
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table card-table">
                            <tbody class="table-border-bottom-0">
                                <tr>
                                    <td class="w-50 ps-0">
                                        <div class="d-flex justify-content-start align-items-center">
                                            <div class="me-2">
                                                <i class="ti ti-truck mt-n1">
                                                </i>
                                            </div>
                                            <h6 class="mb-0 fw-normal">
                                                On
                                                time
                                            </h6>
                                        </div>
                                    </td>
                                    <td class="text-end pe-0 text-nowrap">
                                        <h6 class="mb-0">
                                            2
                                            hr
                                            10
                                            min
                                        </h6>
                                    </td>
                                    <td class="text-end pe-0">
                                        <span class="fw-medium">
                                            85.4
                                            %
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="w-50 ps-0">
                                        <div class="d-flex justify-content-start align-items-center">
                                            <div class="me-2">
                                                <i class="ti ti-clock mt-n1">
                                                </i>
                                            </div>
                                            <h6 class="mb-0 fw-normal">
                                                Past
                                                due
                                            </h6>
                                        </div>
                                    </td>
                                    <td class="text-end pe-0 text-nowrap">
                                        <h6 class="mb-0">
                                            5
                                            hr
                                            19
                                            min
                                        </h6>
                                    </td>
                                    <td class="text-end pe-0">
                                        <span class="fw-medium">
                                            14.6
                                            %
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="row">
        <div class="col-sm-6 col-lg-3 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-3 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-3 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-3 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 class="row">
        <div class="col-md-6 col-xxl-4 mb-4 order-1 order-xxl-1">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Summary</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div id="deliveryExceptionsChart" class="pt-md-1"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xxl-8 mb-4 order-5 order-xxl-3">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">In progress overview</h5>
                    </div>
                    <div class="dropdown">
                        <button class="btn p-0" type="button" id="deliveryExceptions" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            <i class="ti ti-dots-vertical"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="deliveryExceptions">
                            <a class="dropdown-item" href="javascript:void(0);">All</a>
                            <a class="dropdown-item" href="javascript:void(0);">In progress</a>
                            <a class="dropdown-item" href="javascript:void(0);">On hold</a>
                            <a class="dropdown-item" href="javascript:void(0);">Completed</a>
                            <a class="dropdown-item" href="javascript:void(0);">Archived</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-none d-lg-flex vehicles-progress-labels mb-4">
                        <div class="vehicles-progress-label on-the-way-text" style="width: 85.4%;">On time</div>
                        <div class="vehicles-progress-label waiting-text text-nowrap" style="width: 14.6%;">Past due</div>
                    </div>
                    <div class="vehicles-overview-progress progress rounded-2 my-4" style="height: 46px;">
                        <div class="progress-bar fw-medium text-start bg-body text-dark px-3 rounded-0" role="progressbar"
                            style="width: 85.4%" aria-valuenow="85.4" aria-valuemin="0" aria-valuemax="100">85.4%</div>
                        <div class="progress-bar fw-medium text-start bg-gray-900 px-2 rounded-0 px-lg-2 px-xxl-3"
                            role="progressbar" style="width: 14.6%" aria-valuenow="14.6" aria-valuemin="0"
                            aria-valuemax="100">14.6%</div>
                    </div>
                    <div class="table-responsive">
                        <table class="table card-table">
                            <tbody class="table-border-bottom-0">
                                <tr>
                                    <td class="w-50 ps-0">
                                        <div class="d-flex justify-content-start align-items-center">
                                            <div class="me-2">
                                                <i class="ti ti-truck mt-n1"></i>
                                            </div>
                                            <h6 class="mb-0 fw-normal">On time</h6>
                                        </div>
                                    </td>
                                    <td class="text-end pe-0 text-nowrap">
                                        <h6 class="mb-0">2hr 10min</h6>
                                    </td>
                                    <td class="text-end pe-0">
                                        <span class="fw-medium">85.4%</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="w-50 ps-0">
                                        <div class="d-flex justify-content-start align-items-center">
                                            <div class="me-2">
                                                <i class="ti ti-clock mt-n1"></i>
                                            </div>
                                            <h6 class="mb-0 fw-normal">Past due</h6>
                                        </div>
                                    </td>
                                    <td class="text-end pe-0 text-nowrap">
                                        <h6 class="mb-0">5hr 19min</h6>
                                    </td>
                                    <td class="text-end pe-0">
                                        <span class="fw-medium">14.6%</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

    <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 class="offcanvas offcanvas-end" id="add-new-record">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title" id="exampleModalLabel">
                New
                Record
            </h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body flex-grow-1">
            <form class="add-new-record pt-0 row g-2" id="form-add-new-record" onsubmit="return false">
                <div class="col-sm-12">
                    <label class="form-label" for="basicFullname">
                        Full
                        Name
                    </label>
                    <div class="input-group input-group-merge">
                        <span id="basicFullname2" class="input-group-text">
                            <i class="ti ti-user">
                            </i>
                        </span>
                        <input type="text" id="basicFullname" class="form-control dt-full-name" name="basicFullname"
                            placeholder="John Doe" aria-label="John Doe" aria-describedby="basicFullname2" />
                    </div>
                </div>
                <div class="col-sm-12">
                    <label class="form-label" for="basicPost">
                        Post
                    </label>
                    <div class="input-group input-group-merge">
                        <span id="basicPost2" class="input-group-text">
                            <i class='ti ti-briefcase'>
                            </i>
                        </span>
                        <input type="text" id="basicPost" name="basicPost" class="form-control dt-post"
                            placeholder="Web Developer" aria-label="Web Developer" aria-describedby="basicPost2" />
                    </div>
                </div>
                <div class="col-sm-12">
                    <label class="form-label" for="basicEmail">
                        Email
                    </label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text">
                            <i class="ti ti-mail">
                            </i>
                        </span>
                        <input type="text" id="basicEmail" name="basicEmail" class="form-control dt-email"
                            placeholder="john.doe@example.com" aria-label="john.doe@example.com" />
                    </div>
                    <div class="form-text">
                        You
                        can
                        use
                        letters,
                        numbers
                        &
                        periods
                    </div>
                </div>
                <div class="col-sm-12">
                    <label class="form-label" for="basicDate">
                        Joining
                        Date
                    </label>
                    <div class="input-group input-group-merge">
                        <span id="basicDate2" class="input-group-text">
                            <i class='ti ti-calendar'>
                            </i>
                        </span>
                        <input type="text" class="form-control dt-date" id="basicDate" name="basicDate"
                            aria-describedby="basicDate2" placeholder="MM/DD/YYYY" aria-label="MM/DD/YYYY" />
                    </div>
                </div>
                <div class="col-sm-12">
                    <label class="form-label" for="basicSalary">
                        Salary
                    </label>
                    <div class="input-group input-group-merge">
                        <span id="basicSalary2" class="input-group-text">
                            <i class='ti ti-currency-dollar'>
                            </i>
                        </span>
                        <input type="number" id="basicSalary" name="basicSalary" class="form-control dt-salary"
                            placeholder="12000" aria-label="12000" aria-describedby="basicSalary2" />
                    </div>
                </div>
                <div class="col-sm-12">
                    <button type="submit" class="btn btn-primary data-submit me-sm-3 me-1">
                        Submit
                    </button>
                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">
                        Cancel
                    </button>
                </div>
            </form>

        </div>
    </div>


@endsection

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