@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') }}" />
    <link rel="stylesheet"
        href="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.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>
    <script src="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.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: 50px;">
            @if (isset(session()->get('active_company')['logo']))
                <div class="row justify-content-center mt-3">
                    <div class="col-md-auto">
                        <div class="circle-img">
                            <img class="p-3"
                                src="{{ url('https://upload.wikimedia.org/wikipedia/ms/thumb/5/5d/LOGO-SNP.png/1024px-LOGO-SNP.png') }}"
                                alt="Image">
                        </div>
                    </div>
                </div>
            @else
                <div class="row mt-3" style="margin-bottom: 30px;">
                </div>
            @endif
            <div class="row mb-1">
                <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">{{ session()->get('active_company')['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">Details</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card p-3">
                        <div class="text-muted">Provider</div>
                        <div class="text-wrap mb-2">{{ $document_request->provider_name }}</div>

                        <div class="text-muted">Engagement</div>
                        <div class="text-wrap mb-2">{{ $document_request->job['description'] }}</div>

                        @if ($document_request->reference_id)
                            <div class="text-muted">Request Reference ID</div>
                            <div class="text-wrap mb-2">{{ $document_request->reference_id }}</div>
                        @endif

                        <div class="text-muted">Request Title</div>
                        <div class="text-wrap mb-2">{{ $document_request->title }}</div>

                        <div class="text-muted">Due Date</div>
                        <div class="text-wrap mb-2">{{ date_format(date_create($document_request->due_date), 'd.m.Y') }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="divider text-secondary">
                        <div class="divider-text">Personnel</div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-lg-12 mb-4">
                    <div class="card p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="text-muted">Requester(s)</div>
                                @foreach ($document_request->requester as $drrr)
                                    <div class="text-wrap">{{ $drrr->first_name . ' ' . $drrr->last_name }}</div>
                                @endforeach
                            </div>
                            <div class="col-6">
                                <div class="text-muted">Requestee(s)</div>
                                @foreach ($document_request->requestee as $drr)
                                    <div class="text-wrap">{{ $drr->first_name . ' ' . $drr->last_name }}</div>
                                @endforeach
                            </div>
                        </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">
                    <div class="d-flex flex-row">
                        <div class="{{ Str::contains(url()->current(), 'documents/requests') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('documents/requests') }}">Requests</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-lg-12 col-sm-12">
                    <div class="card bg-white">
                        <div class="fw-bold p-3">Description and Templates</div>
                        <hr class="p-0 m-0">
                        <div class="text-wrap p-3">{!! $document_request->description !!}</div>
                        <div class="d-flex flex-row p-3">
                            @forelse ($document_request->attachments as $dra)
                                <div class="me-4"><a
                                        href="#"><u>{{ $dra->description . '.' . $dra->file_ext }}</u></a></div>
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-lg-12 col-sm-12">
                    <div class="card text-center mb-3">
                        <div class="card-header pt-0">
                            <ul class="nav nav-tabs card-header-tabs" role="tablist">
                                <li class="nav-item">
                                    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                                        data-bs-target="#navs-within-card-active" aria-controls="navs-within-card-active"
                                        aria-selected="true">Response Documents</button>
                                </li>
                                <li class="nav-item"><button type="button" class="nav-link" role="tab"
                                        data-bs-toggle="tab" data-bs-target="#navs-within-card-link"
                                        aria-controls="navs-within-card-link" aria-selected="false">Discussions</button>
                                </li>
                                <li class="nav-item"><button type="button" class="nav-link" role="tab"
                                        data-bs-toggle="tab" data-bs-target="#navs-dr-logs" aria-controls="navs-dr-logs"
                                        aria-selected="false">Logs</button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content p-0 pt-4">
                                <div class="tab-pane fade show active" id="navs-within-card-active" role="tabpanel">
                                    <p class="card-text">No data to display</p>
                                    <a href="javascript:void(0)" class="btn btn-primary">Upload</a>
                                </div>
                                <div class="tab-pane fade" id="navs-within-card-link" role="tabpanel">
                                    <p class="card-text">No data to display</p>
                                    <a href="javascript:void(0)" class="btn btn-primary">Add</a>
                                </div>
                                <div class="tab-pane fade" id="navs-dr-logs" role="tabpanel">
                                    <p class="card-text">No data to display</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

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