Files
backend/resources/views/rmto-preview/pages/abrar-project-list.blade.php
2024-02-01 09:53:53 +00:00

697 lines
28 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title> پروژه‌های ساخت راه روستایی </title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Persian Datepicker -->
<link rel="stylesheet" href="../dist/css/persian-datepicker.min.css">
<!-- bootstrap slider -->
<link rel="stylesheet" href="../plugins/bootstrap-slider/css/bootstrap-slider.min.css">
<!-- Leaflet -->
<link rel="stylesheet" href="../dist/css/leaflet.css">
<!-- IRANSans Font -->
<link rel="stylesheet" href="../dist/css/fontiran.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/adminlte.css">
<style>
.card-header {
padding: 0.75rem 1.25rem .2rem;
}
th {
font-size: 13px;
}
td {
font-size: 14px;
}
button.btn {
font-size: 12px;
}
i {
font-size: 10px;
}
label {
font-size: .8rem;
font-weight: 500 !important;
color: rgba(0, 0, 0, 0.5);
}
.icheck-primary label {
font-weight: 400 !important;
}
.form-control {
font-size: 13px;
}
.required-label::after {
content: "*";
position: relative;
right: 2px;
color: #dc3545;
}
.card-body .radio-header {
font-size: .8rem;
font-weight: 500;
color: rgba(0, 0, 0, 0.5);
display: inline-block;
margin-bottom: 0.5rem;
}
.abrar-project-slider .tooltip {
font-family: 'IRANSansFaNum' !important;
}
.abrar-project-slider .slider-selection,
.abrar-project-slider .slider-handle,
.abrar-project-slider .slider-tick.in-selection {
background: #007bff;
}
[class*=icheck-] {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.abrar-map-layout {
position: relative;
height: 400px;
}
.abrar-map-layout>#abrar-map {
height: 100%;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
}
.abrar-map-layout>.pin-container {
position: absolute;
top: 34%;
right: 44%;
z-index: 1009;
}
.input-cord {
font-family: 'IRANSans' !important;
text-align: center !important;
direction: ltr !important;
}
.abrar-main {
margin-top: 95px;
padding: 0 10px
}
.card-footer {
text-align: left;
}
.map-btn {
border-radius: 0.25rem !important;
}
.is-invalid-input {
color: #dc3545 !important;
border-color: #dc3545;
}
.is-invalid-text {
color: #dc3545 !important;
}
.is-invalid-box {
border-color: #dc3545;
}
.menu_top {
z-index: 2000 !important;
}
.leaflet-div-icon {
background: transparent !important;
border: none !important;
}
.pin-marker {
position: relative;
width: 45px;
height: 71px;
font-family: 'IRANSans';
}
.pin-marker.pin-move>.map-pin-marker {
transform: scale(.75);
}
.pin-marker.pin-set>.map-pin-marker>.pin-title-circle {
background-color: #009900;
}
.pin-marker.pin-move>.pin-main-shadow {
transform: scale(1.35);
}
.map-pin-marker {
position: relative;
width: 45px;
height: 65px;
z-index: 10;
transform-origin: 22.5px 0;
transition: transform .2s;
}
.map-pin-marker>.pin-main-circle {
position: absolute;
width: 45px;
height: 45px;
left: 0;
background-color: rgba(22, 67, 88, 1);
border-radius: 50%;
z-index: 12;
}
.map-pin-marker>.pin-white-circle {
position: absolute;
width: 39px;
height: 39px;
left: 3px;
top: 3px;
background-color: #ffffff;
border-radius: 50%;
z-index: 13;
}
.map-pin-marker>.pin-title-circle {
position: absolute;
width: 35px;
height: 35px;
left: 5px;
top: 5px;
background-color: rgba(22, 67, 88, 1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 14;
transition: background-color .3s;
}
.map-pin-marker>.pin-title-circle>.title-circle-text {
line-height: 1;
font-size: 10px;
color: #ffffff;
font-weight: 600;
z-index: 15;
}
.map-pin-marker>.pin-main-line {
position: absolute;
width: 5px;
height: 25px;
z-index: 11;
background-color: #000000;
top: 40px;
left: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.pin-marker>.pin-main-shadow {
position: absolute;
width: 11px;
height: 11px;
left: 17px;
top: 58px;
background-color: rgba(0, 0, 0, .2);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
transition: transform .2s;
}
.pin-marker>.pin-main-shadow>.shadow-dot {
position: relative;
width: 1px;
height: 1px;
left: 0;
top: 0;
background-color: #000000;
border-radius: 50%;
z-index: 10;
}
.map-latlng-input-row {
position: absolute;
bottom: -11px;
z-index: 1000;
width: 240px;
left: 5px;
}
.map-latlng-form {
margin-bottom: 0;
}
.map-latlng-input {
background-color: rgba(255, 255, 255, .8);
}
.map-latlng-label {
background-color: rgba(255, 255, 255, .8);
border-radius: 0.25rem;
padding: 3px 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border: 1px solid #ced4da;
color: #000000;
border-bottom: 0;
margin: 0;
}
.map-latlng-first-input {
border-radius: 0;
font-size: 12px;
color: #009900;
}
.map-latlng-first-input::placeholder {
font-size: 10px;
}
.map-latlng-sec-input {
border-top-right-radius: 0;
border-top-left-radius: 0;
font-size: 12px;
color: #009900;
}
.map-latlng-sec-input::placeholder {
font-size: 10px;
}
.abrar-map-title {
position: absolute;
top: 5px;
right: 5px;
z-index: 2000;
padding: 4px 7px;
color: #000;
font-size: 13px;
font-weight: 500;
border-radius: .25rem;
background-color: rgba(255, 193, 7, 0.8);
}
.starter-loader-container {
z-index: 3000 !important;
}
</style>
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed starter-project-page">
<div class="wrapper">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- TOP MENU -->
<header>
<div class="menu_top" id="navbarmenu_top">
<div class="rahdariLogo">
<a href="#"><img src="../dist/images/icons/alertInstallAppLogo.png" alt=""
title="سازمان راهداری و حمل و نقل جاده ای"></a>
</div>
<button class="responsiveTopMenuBtn routinghover" onclick="window.open('/rmto', '_self');">
<img src="../dist/images/icons/home.svg">صفحه اصلی</button>
<button class=" hoveronline responsiveTopMenuBtn" onclick="window.open('/rmto', '_self');">
<img src="../dist/images/icons/add.svg">ثبت پروژه جدید</button>
<button class="responsiveTopMenuBtn hovermapgerafic " onclick="window.open('/rmto', '_self');">
<img src="../dist/images/icons/analytics.svg">گزارشات نموداری</button>
<div class="clearfix"></div>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</header>
<!-- END TOP MENU -->
<!-- Main content -->
<div class="content">
<div class="starter-loader-container">
<div class="starter-loader"></div>
</div>
<div class="container-fluid">
<div class="row m-0">
<div class="col-sm-12">
<div class="abrar-main">
<!-- Default box -->
<div id="abrar-list-card" class="card">
<div class="card-header">
<h3 class="card-title"> فهرست پروژه‌های ساخت راه روستایی </h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip"
title="Collapse">
<i class="fas fa-minus"></i></button>
</div>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped projects">
<thead>
<tr>
<th style="width: 10%"> شماره پروژه </th>
<th style="width: 10%"> اداره کل </th>
<th style="width: 15%"> شهرستان </th>
<th style="width: 35%"> نام پروژه - نام محور </th>
<th style="width: 10%"> تاریخ ایجاد </th>
<th style="width: 10%"> تاریخ ویرایش </th>
<th style="width: 10%; text-align: center"> عملیات </th>
</tr>
</thead>
<tbody>
@forelse ($projects as $project)
<tr>
<td>
{{ $project->id }}
</td>
<td>
{{ $project->province_name }}
</td>
<td>
{{ $project->city_name }}
</td>
<td>
{{ $project->axis_name }}
</td>
<td>
{{ verta($project->created_at)->format('Y/m/d') }}
</td>
<td>
@if ($project->project_status != null)
{{ verta($project->updated_at)->format('Y/m/d') }}
@else
-
@endif
</td>
<td class="project-actions text-center">
<button class="btn btn-info btn-sm" data-id="{{ $project->id }}">
<i class="fas fa-pencil-alt"></i>
ویرایش
</button>
</td>
</tr>
@empty
<tr>
رکوردی یافت نشد!
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<!-- Default box -->
<div id="abrar-edit-card" class="card card-primary card-outline collapsed-card" style="display: none;">
<div class="card-header">
<h3 class="card-title"></h3>
<div class="card-tools" style="display: none;">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip"
title="Collapse">
<i class="fas fa-plus"></i></button>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12 mb-3">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label> اداره کل </label>
<input type="text" class="form-control" name="abrar-province-name" disabled>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label> شهرستان </label>
<input type="text" class="form-control" name="abrar-city-name" disabled>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<label> نام پروژه - نام محور </label>
<input type="text" class="form-control" name="abrar-axis-name" disabled>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label> طول محور <small>(کیلومتر)</small></label>
<input type="text" class="form-control" name="abrar-axis-length" disabled>
</div>
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-group">
<label class="required-label project-type-label mb-2"> ماهیت پروژه: </label>
<div class="row mb-2">
<div class="col-6">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" id="abrar-project-type-1" name="abrar-project-type">
<label for="abrar-project-type-1"> تعریض </label>
</div>
</div>
<div class="col-6">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" id="abrar-project-type-2" name="abrar-project-type">
<label for="abrar-project-type-2"> عملیات خاکی و تثبیت </label>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" id="abrar-project-type-3" name="abrar-project-type">
<label for="abrar-project-type-3"> ابنیه فنی </label>
</div>
</div>
<div class="col-6">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" id="abrar-project-type-4" name="abrar-project-type">
<label for="abrar-project-type-4"> آسفالت </label>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="radio-header project-status-label required-label"> آخرین وضعیت پروژه: </div>
<div class="row">
<div class="col-sm-6">
<div class="form-group radio-body clearfix">
<div class="icheck-primary">
<input type="radio" id="abrar-project-status-1" name="abrar-project-status">
<label for="abrar-project-status-1"> در دست بررسی‌های مقدماتی </label>
</div>
<div class="icheck-primary">
<input type="radio" id="abrar-project-status-2" name="abrar-project-status">
<label for="abrar-project-status-2"> در دست مطالعه </label>
</div>
<div class="icheck-primary">
<input type="radio" id="abrar-project-status-3" name="abrar-project-status">
<label for="abrar-project-status-3"> در دست مناقصه </label>
</div>
<div class="icheck-primary">
<input type="radio" id="abrar-project-status-4" name="abrar-project-status">
<label for="abrar-project-status-4"> در حال مبادله و انعقاد قرارداد </label>
</div>
<div class="icheck-primary">
<input type="radio" id="abrar-project-status-5" name="abrar-project-status">
<label for="abrar-project-status-5"> در حال اجرا - فعال </label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group radio-body clearfix">
<div class="icheck-primary">
<input type="radio" id="abrar-project-status-6" name="abrar-project-status">
<label for="abrar-project-status-6"> در حال اجرا - متوقف </label>
</div>
<div class="icheck-primary">
<input type="radio" id="abrar-project-status-7" name="abrar-project-status">
<label for="abrar-project-status-7"> در مراحل تکمیل و آماده‌سازی افتتاح </label>
</div>
<div class="icheck-primary">
<input type="radio" id="abrar-project-status-8" name="abrar-project-status">
<label for="abrar-project-status-8"> آماده افتتاح و بهره‌برداری </label>
</div>
<div class="icheck-primary">
<input type="radio" id="abrar-project-status-9" name="abrar-project-status">
<label for="abrar-project-status-9"> افتتاح شده </label>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="row">
<div class="col-sm-12 abrar-project-slider mb-4" style="display: none;">
<div class="radio-header required-label d-block"> درصد پیشرفت را تعیین کنید: </div>
<div class="pr-3 pl-3 mb-2">
<input id="abrar-project-status-progress" type="text"
data-slider-id="abrar-project-status-progress" data-slider-ticks="[0, 100]"
data-slider-ticks-snap-bounds="1">
</div>
</div>
<div class="col-sm-12 abrar-project-description" style="display: none;">
<div class="form-group">
<label class="required-label"> دلایل توقف پروژه: </label>
<textarea class="form-control" name="abrar-project-status-description" rows="5"
placeholder="دلایل توقف پروژه را وارد کنید..." style="resize: none;"></textarea>
</div>
</div>
<div class="col-sm-6 abrar-project-date" style="display: none;">
<div class="form-group">
<label class="required-label"> تاریخ افتتاح پروژه: </label>
<input type="text" class="form-control" name="abrar-project-status-date"
placeholder="برای انتخاب تاریخ کلیک کنید">
</div>
</div>
<div class="col-sm-6 abrar-project-file">
<div class="form-group">
<label> آپلود عکس و مستندات: </label>
<input type="file" class="form-control" name="abrar-project-file" multiple>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 mb-3">
<div class="abrar-map-layout">
<span class="abrar-map-title d-inline">ثبت موقعیت پروژه روی نقشه</span>
<div id="abrar-map"></div>
<div class="row map-latlng-input-row">
<div class="col-md-12">
<div class="form-group map-latlng-form">
<label class="required-label d-block text-center map-latlng-label"> ثبت دستی مختصات
</label>
<input name="abrar-project-latlng-start" type="text"
class="form-control input-cord map-latlng-input map-latlng-first-input"
data-inputmask="'mask': '(99.9999999999) - (99.9999999999)'" data-mask
placeholder="(شروع) => (طول جغرافیایی) - (عرض جغرافیایی)">
</div>
<div class="form-group">
<input name="abrar-project-latlng-end" type="text"
class="form-control input-cord map-latlng-input map-latlng-sec-input"
data-inputmask="'mask': '(99.9999999999) - (99.9999999999)'" data-mask
placeholder="(پایان) => (طول جغرافیایی) - (عرض جغرافیایی)">
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-12">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="required-label"> نقطه شروع پروژه: </label>
<input name="abrar-project-latlng-start" type="text" class="form-control input-cord"
data-inputmask="'mask': '(99.9999999999) - (99.9999999999)'" data-mask
placeholder="(طول جغرافیایی) - (عرض جغرافیایی)">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="required-label"> نقطه پایان پروژه: </label>
<input name="abrar-project-latlng-end" type="text" class="form-control input-cord"
data-inputmask="'mask': '(99.9999999999) - (99.9999999999)'" data-mask
placeholder="(طول جغرافیایی) - (عرض جغرافیایی)">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="required-label"> طول پروژه (کیلومتر): </label>
<input name="abrar-project-length" type="number" class="form-control"
placeholder="کیلومتر" disabled min="0">
</div>
</div>
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-success map-btn"> ثبت نقاط روی نقشه </button>
<button type="button" class="btn btn-warning map-btn" disabled> بازگشت به نقطه شروع
</button>
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="button" class="btn btn-danger"> انصراف </button>
<button type="button" class="btn btn-success"> ثبت تغییرات </button>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
</div>
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- InputMask -->
<script src="../plugins/inputmask/min/jquery.inputmask.bundle.min.js"></script>
<!-- Leaflet -->
<script src="../dist/js/leaflet.js"></script>
<!-- Leaflet Routing Machine js -->
<script src="../dist/js/leaflet-routing-machine.js"></script>
<!-- Persian Datepicker -->
<script src="../dist/js/persian-date.min.js"></script>
<script src="../dist/js/persian-datepicker.min.js"></script>
<!-- Bootstrap slider -->
<script src="../plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
<!-- Page Script -->
<script src="../dist/js/abrar-project-list.js"></script>
</body>
</html>