@extends('layouts.default')

@section('title', 'Pengajuan Pemeliharaan')

@push('css')
        <link href="{{ asset('assets/plugins/datatables/css/dataTables.bootstrap4.css') }}" rel="stylesheet" />
        <link href="{{ asset('assets/plugins/datatables/css/buttons/buttons.bootstrap4.css') }}" rel="stylesheet" />
        <link href="{{ asset('assets/plugins/datatables/css/responsive/responsive.bootstrap4.css') }}" rel="stylesheet" />
        <link href="{{ asset('assets/plugins/gritter/css/jquery.gritter.css') }}" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/css/lightgallery-bundle.min.css" />

        <style>
        .custom-xl {
                max-width: 1300px; /* default BS = 1140px */
            }
        </style>
@endpush

@section('content')
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
        <li class="breadcrumb-item"><a href="javascript:;">Pemeliharaan</a></li>
        <li class="breadcrumb-item active">Pengajuan</li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <h1 class="page-header">Pengajuan Pemeliharaan <small></small></h1>
    <!-- end page-header -->

    <div id="lightgallery-container" style="display:none;"></div>

    <!-- begin row -->
    <div class="row">
        <!-- begin alert -->
        <div class="alert ">
            <span class="label label-inverse m-r-5">NOTE!</span> Data Pengajuan Pemeliharaan.
        </div>
        <!-- end alert -->
        <!-- begin col-10 -->
        <div class="col-lg-12">
            <!-- begin panel -->
            <div class="panel panel-inverse">
                <!-- begin panel-heading -->
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default"
                            data-click="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success"
                            data-click="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                            data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                            data-click="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                    <h4 class="panel-title">Data Pengajuan</h4>
                </div>
                <!-- end panel-heading -->
                <!-- begin alert -->
                <div id="alert-box"
                    class="alert fade show" " style=" display:none;">
                            <button type="button" class="close" data-dismiss="alert">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <span class="label label-inverse m-r-5">NOTE!</span> <span id="alert-massage"> Pesan </span>
                        </div>




                        <!-- end alert -->
                        <!-- begin panel-body -->
                        <div class="panel-body">

                            <table id="data-table-buttons" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th width="1%"></th>
                                        <th>Nomor Pengajuan</th>
                                        <th>Produk</th>
                                        <th>Ruangan</th>
                                        <th>Tanggal Pengajuan</th>
                                        <th>Status</th>
                                        <th>Catatan Verifikator</th>
                                        <th>Dokumen Pendukung</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>

                            <!-- #modal-form -->
                            <div class="modal fade" id="modal-form">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="modal-title"></h4>
                                            <button type="button" class="close" data-dismiss="modal" onclick="reset_form()"
                                                aria-hidden="true">×</button>
                                        </div>
                                        <div class="modal-body">
                                            <!-- <div class="alert alert-danger m-b-0">
                                                <h5><i class="fa fa-info-circle"></i> Alert Header</h5>
                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                            </div>
                                            -->
                                            <div id="modal_content" >
                                                @include('pages.pengajuan.forminput')
                                            </div>



                                        </div>


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

                            <!-- #modal-detail -->
                            <div  class="modal fade" id="modal-detail">
                                <div class="modal-dialog modal-xl custom-xl">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title"><i class="fa fa-suitcase"></i> Detail Pengajuan Pemeliharaan</h4>
                                            <button type="button" class="close" data-dismiss="modal" onclick="reset_form()"aria-hidden="
                    true">×</button>
                </div>
                <div class="modal-body">


                    @include('pages.pengajuan.detail')


                </div>


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


    <!-- #modal-detail -->
    <div class="modal fade" id="modal-progress">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fa fa-suitcase"></i> Progress Pengajuan Pemeliharaan</h4>
                    <button type="button" class="close" data-dismiss="modal"
                        onclick="reset_form()"aria-hidden="true">×</button>
                </div>
                <div class="modal-body">


                    @include('pages.pengajuan.formprogresspengajuan')


                </div>


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



    </div>
    </div>
    <!-- end panel -->
    </div>
    <!-- end panel-body -->
    </div>
    <!-- end panel -->
    </div>
    <!-- end col-12 -->
    </div>
    <!-- end row -->
@endsection

@push('scripts')
    {{-- Script Partials --}}
    @include('pages.pengajuan.scripts._libraries')
    @include('pages.pengajuan.scripts._utils')
    @include('pages.pengajuan.scripts._datatable')
    @include('pages.pengajuan.scripts._actions')
    @include('pages.pengajuan.scripts._form_handler')
    @include('pages.pengajuan.scripts._tab_handler')
@endpush