@extends('layouts.app')

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 text-right">
        <a href="#" class="btn btn-outline btn-success btn-sm" data-toggle="modal" data-target="#mdl_import_excel">Import Excell</a>
        <a href="#" class="btn btn-outline btn-primary btn-sm" data-toggle="modal" data-target="#mdl_create_contract">@lang('modules.contracts.createContract') <i class="fa fa-plus" aria-hidden="true"></i></a>


        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li class="active">{{ __($pageTitle) }}</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<style>
    .thumbnail_img{
        background-color: black;
        width: 200px !important;
        height: 140px !important;
        display: inline-block !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
</style>
@endpush

@section('content')
<div class="row dashboard-stats">
    <div class="col-md-12 m-b-30">
        <div class="white-box">
            <div class="col-sm-4 text-center">
                <h4><span class="text-dark" id="totalProjects">{{ $contractCounts }}</span> <span class="font-12 text-muted m-l-5"> @lang('modules.contracts.totalContracts')</span></h4>
            </div>
            <div class="col-sm-4 b-l text-center">
                <h4><span class="text-warning" id="daysPresent">{{ $aboutToExpireCounts }}</span> <span class="font-12 text-muted m-l-5"> @lang('modules.contracts.aboutToExpire')</span></h4>
            </div>
            <div class="col-sm-4 b-l text-center">
                <h4><span class="text-danger" id="overdueProjects">{{ $expiredCounts }}</span> <span class="font-12 text-muted m-l-5"> @lang('modules.contracts.expired')</span></h4>
            </div>

        </div>
    </div>

</div>

<div class="row">
    <div class="col-xs-12">
        <div class="white-box">

            @section('filter-section')                    
            <div class="row"  id="ticket-filters">

                <form action="" id="filter-form">
                    <input type="hidden" id="page_bast" name="page_bast" value="1">
                    <div class="col-xs-12">
                        <h5 >@lang('app.selectDateRange')</h5>
                        <div class="input-daterange input-group" id="date-range">
                            <input type="text" class="form-control" id="start-date" placeholder="@lang('app.startDate')"
                                   value=""/>
                            <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                            <input type="text" class="form-control" id="end-date" placeholder="@lang('app.endDate')"
                                   value=""/>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <h5 >@lang('modules.contracts.contractType')</h5>
                        <div class="form-group">
                            <div>
                                <select class="select2 form-control" data-placeholder="@lang('modules.contracts.contractType')" name="contractType" id="contractType">
                                    <option value="all">@lang('app.all')</option>
                                    @foreach($contractType as $type)

                                    <option value="{{ $type->id }}">{{ ucwords($type->name) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group m-t-10">
                            <label class="control-label col-xs-12">&nbsp;</label>
                            <button type="button" id="apply-filters" class="btn btn-success col-md-6"><i class="fa fa-check"></i> @lang('app.apply')</button>
                            <button type="button" id="reset-filters" class="btn btn-inverse col-md-5 col-md-offset-1"><i class="fa fa-refresh"></i> @lang('app.reset')</button>
                        </div>
                    </div>
                </form>
            </div>
            @endsection

            <div class="table-responsive" id="table_contracts">

            </div>
        </div>
    </div>
</div>
<!-- .row -->
<div class="modal fade bs-modal-md in" id="ticketModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 12000;">
    <div class="modal-dialog modal-md" id="modal-data-application">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">@lang('app.addNew') Contract Type</h4>
            </div>
            <div class="modal-body">
                <div class="portlet-body">

                    {!! Form::open(['id'=>'addContractType','class'=>'ajax-form','method'=>'POST', 'enctype'=>'multipart/form-data'])
                    !!}
                    <div class="form-body">
                        <div class="row">
                            <div class="col-xs-12 ">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" name="name" id="category_name" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" id="save-group" class="btn btn-success"> <i class="fa fa-check"></i>
                            @lang('app.save')</button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="mdl_create_contract" tabindex="-1" role="dialog" aria-labelledby="mdl_create_floor" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create Contract</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'createContract','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">Unit</label>
                            <select class="form-control select2 clear_after_save" name="unit_id" id="search_unit"
                                    required="">
                                <option value="">--Select Unit--</option>
                                @forelse($units as $unit)
                                <option value="{{$unit->id}}" data-owner="{{$unit->owner_name}}">{{ $unit->name }}</option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Owner</label>
                            <input type="text" class="form-control clear_after_save" readonly id="owner_from_unit_id">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Subject</label>
                            <input type="text" class="form-control" name="subject">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">Tenant</label>
                            <select class="form-control select2 clear_after_save" name="client" id="client_id"
                                    required="">
                                <option value="">--Select Tenant--</option>
                                @foreach($tenant as $t)
                                <option value="{{ $t->id }}">{{ ucwords($t->name) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Amount (Rp)</label>
                            <input type="text" class="form-control auto" name="amount">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label  class="control-label required">@lang('modules.contracts.contractType')
                                <a class="btn btn-xs btn-info btn-outline" href="#" id="add-unit" data-toggle="modal" data-target="#ticketModal" data-dismiss="modal"><i class="fa fa-plus"></i> Add Contract Type</a>
                            </label>
                            <select class="form-control selectpicker" name="contract_type" id="contract_type" data-style="form-control" required="">
                                @forelse($contractType as $type)
                                <option value="{{ $type->id }}">{{ ucwords($type->name) }}</option>
                                @empty
                                <option value="">No Contract Type</option>
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label required">@lang('modules.timeLogs.startDate')</label>
                            <input id="start_date" name="start_date" type="text"
                                   class="form-control"
                                   value="{{ \Carbon\Carbon::today()->format($global->date_format) }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">@lang('modules.timeLogs.endDate')</label>
                            <input id="end_date" name="end_date" type="text" class="form-control"
                                   value="{{ \Carbon\Carbon::today()->format($global->date_format) }}">
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label">@lang('modules.contracts.summary')</label>
                            <textarea class="form-control summernote" id="contract_detail" name="contract_detail" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label">@lang('modules.contracts.notes')</label>
                            <textarea class="form-control summernote" id="description" name="description" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label">Address</label>
                            <textarea class="form-control" id="alternate_address" name="alternate_address" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label>KTP</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                    <img src="http://via.placeholder.com/200x150.png?text=KTP"
                                         alt=""/>

                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <small style="display:block">Select PDF or Any Type Of Image</small>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> Upload </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_ktp" name="att_ktp"> </span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">
                        <label>KSK</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                    <img src="http://via.placeholder.com/200x150.png?text=KSK"
                                         alt=""/>

                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <small style="display:block">Select PDF or Any Type Of Image</small>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> Upload </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_ksk" name="att_ksk"> </span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">
                        <label>Contract</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                    <img src="http://via.placeholder.com/200x150.png?text=Contract"
                                         alt=""/>

                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <small style="display:block">Select PDF or Any Type Of Image</small>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> Upload </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_contract" name="att_contract"> </span>

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

                    </div>
                    <div class="col-md-6">
                        <label>Other Attachment</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                    <img src="http://via.placeholder.com/200x150.png?text=Other Attachment"
                                         alt=""/>

                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <small style="display:block">Select PDF or Any Type Of Image</small>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> Upload </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_othher" name="att_othher"> </span>

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

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<div class="modal fade" id="mdl_edit_contract" tabindex="-1" role="dialog" aria-labelledby="mdl_edit_contract" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Contract <b id="title_contract"></b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'editContract','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="row">
                    <input type="hidden" name="id" id="contract_id">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">Unit</label>
                            <select class="form-control select2 clear_after_save" name="unit_id" id="edit_unit_id"
                                    required="">
                                <option value="">--Select Unit--</option>
                                @forelse($units as $unit)
                                <option value="{{$unit->id}}" data-owner="{{$unit->owner_name}}">{{ $unit->name }}</option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Owner</label>
                            <input type="text" class="form-control clear_after_save" readonly id="edit_owner_name">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Subject</label>
                            <input type="text" class="form-control" name="subject" id="edit_subject">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">Tenant</label>
                            <select class="form-control select2 clear_after_save" name="client" id="edit_tenant"
                                    required="">
                                <option value="">--Select Tenant--</option>
                                @foreach($tenant as $t)
                                <option value="{{ $t->id }}">{{ ucwords($t->name) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Amount (Rp)</label>
                            <input type="number" class="form-control" name="amount" id="edit_amount">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label  class="control-label required">@lang('modules.contracts.contractType')</label>
                            <select class="form-control selectpicker" name="contract_type" id="edit_contract_type" data-style="form-control" required="">
                                @forelse($contractType as $type)
                                <option value="{{ $type->id }}">{{ ucwords($type->name) }}</option>
                                @empty
                                <option value="">No Contract Type</option>
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label required">@lang('modules.timeLogs.startDate')</label>
                            <input id="edit_start_date" name="start_date" type="text"
                                   class="form-control"
                                   value="{{ \Carbon\Carbon::today()->format($global->date_format) }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">@lang('modules.timeLogs.endDate')</label>
                            <input id="edit_end_date" name="end_date" type="text" class="form-control"
                                   value="{{ \Carbon\Carbon::today()->format($global->date_format) }}">
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label">@lang('modules.contracts.summary')</label>
                            <textarea class="form-control summernote" id="edit_contract_detail" name="contract_detail" rows="4"></textarea>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label">@lang('modules.contracts.notes')</label>
                            <textarea class="form-control summernote" id="edit_description" name="description" rows="4"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label>KTP</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail">
                                    <div id="edit_att_ktp">

                                    </div>
                                    <small>Select PDF or Any Type Of Image</small>
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> Upload </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_ktp" name="att_ktp"> </span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">
                        <label>KSK</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail">
                                    <div id="edit_att_ksk">

                                    </div>
                                    <small>Select PDF or Any Type Of Image</small>
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> Upload </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_ksk" name="att_ksk"> </span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">
                        <label>Contract</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail">
                                    <div id="edit_att_contract">

                                    </div>
                                    <small>Select PDF or Any Type Of Image</small>
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> Upload </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_contract" name="att_contract"> </span>

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

                    </div>
                    <div class="col-md-6">
                        <label>Other Attachment</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail">
                                    <div id="edit_att_other">

                                    </div>
                                    <small>Select PDF or Any Type Of Image</small>
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> Upload </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_othher" name="att_othher"> </span>

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

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="mdl_import_excel" tabindex="-1" role="dialog" aria-labelledby="mdl_import_excel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Import Units</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'importExcel','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="alert alert-warning">
                    <h4>Perhatian</h4>
                    <p>
                        Kami telah menyiapkan file template Microsoft Excel untuk upload Contract via Excel.
                        Pastikan Anda telah mendownload file template dan mengisi sesuai ketentuan yang ada di file tersebut.
                        Ketidak sesuaian input akan menyebabkan data tidak dapat diproses.
                    </p>  
                    <a href="/admin/export_sample_excel?type=contract" class="btn btn-default btn-xs">Download template</a>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <label>File</label>
                        <input type="file" class="form-control" id="file_import" name="uploaded_file">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
@if($global->locale == 'en')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.{{ $global->locale }}-AU.min.js"></script>
@else
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.{{ $global->locale }}.min.js"></script>
@endif
<script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('js/autonumeric.js') }}"></script>
{!! $dataTable->scripts() !!}
<script>
    $(':file').on('change', function(){
    var file = this.files[0].type;
    var type = file.split("/");
    var message = '';
    if (type[1] == 'jpeg' || type[1] == 'jpg' || type[1] == 'png' || type[1] == 'gif') {
        message = 'Image';
    }else{
        message = 'File';
    }
    toastr.success(message + ' Successfull Attached');
    })
            function getTableContract() {
            var page = $('#page_bast').val();
            var start_date = $('#start-date').val();
            var end_date = $('#end-date').val();
            $.get('/admin/contracts/getTableContract?page=' + page + '&start_date=' + start_date + '&end_date=' + end_date, function (res) {
            $('#table_contracts').html(res)
            })
            }
    getTableContract()
            jQuery('#end_date').datepicker({
    autoclose: true,
            todayHighlight: true,
            weekStart: '1',
            format: 'dd-mm-yyyy',
    });
    $("#start_date").datepicker({
    autoclose: true,
            todayHighlight: true,
            weekStart:'1',
            format: 'dd-mm-yyyy',
    }).on('changeDate', function (selected) {
    var maxDate = new Date(selected.date.valueOf());
    $('#end_date').datepicker('setStartDate', maxDate);
    });
    jQuery('#edit_end_date').datepicker({
    autoclose: true,
            todayHighlight: true,
            weekStart: '1',
            format: 'dd-mm-yyyy',
    });
    $("#edit_start_date").datepicker({
    autoclose: true,
            todayHighlight: true,
            weekStart:'1',
            format: 'dd-mm-yyyy',
    }).on('changeDate', function (selected) {
    var maxDate = new Date(selected.date.valueOf());
    $('#edit_end_date').datepicker('setStartDate', maxDate);
    });
    $('#search_unit').on('change', function(){
    var x = $(this).val();
    var owner = $(this).find(':selected').data('owner');
    console.log(x)
            console.log(owner)
            if (x != '') {
    $('#owner_from_unit_id').val(owner)
    } else{
    $('#owner_from_unit_id').val('')
    }
    })
            $(".select2").select2({
    formatNoMatches: function () {
    return "{{ __('messages.noRecordFound') }}";
    }
    });
    var table;
    $(function() {
    jQuery('#date-range').datepicker({
    toggleActive: true,
            weekStart:'{{ $global->week_start }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            format: '{{ $global->date_picker_format }}',
    });
    loadTable();
    $('body').on('click', '.sa-params', function(){
    var id = $(this).data('contract-id');
    swal({
    title: "@lang('messages.sweetAlertTitle')",
            text: "@lang('messages.confirmation.recoverNewContract')",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "@lang('messages.deleteConfirmation')",
            cancelButtonText: "@lang('messages.confirmNoArchive')",
            closeOnConfirm: true,
            closeOnCancel: true
    }, function(isConfirm){
    if (isConfirm) {

    var url = "{{ route('admin.contracts.destroy',':id') }}";
    url = url.replace(':id', id);
    var token = "{{ csrf_token() }}";
    $.easyAjax({
    type: 'POST',
            url: url,
            data: {'_token': token, '_method': 'DELETE'},
            success: function (response) {
            if (response.status == "success") {
            $.unblockUI();
            loadTable();
            }
            }
    });
    }
    });
    });
    });
    $('.toggle-filter').click(function () {
    $('#ticket-filters').toggle('slide');
    })
            $('#contracts-table').on('preXhr.dt', function (e, settings, data) {
    var startDate = $('#start-date').val();
    if (startDate == '') {
    startDate = null;
    }
    var endDate = $('#end-date').val();
    if (endDate == '') {
    endDate = null;
    }
    var clientID = $('#clientID').val();
    var contractType = $('#contractType').val();
    var status = $('#status').val();
    data['startDate'] = startDate;
    data['endDate'] = endDate;
    data['status'] = status;
    data['clientID'] = clientID;
    data['contractType'] = contractType;
    });
    $('#apply-filters').click(function () {
    getTableContract()
    });
    function loadTable(){
    window.LaravelDataTables["contracts-table"].draw();
    }

    $('#reset-filters').click(function () {
    console.log('hii from ');
    $('#filter-form')[0].reset();
    $('.select2').val('all');
    $('#filter-form').find('select').select2();
    loadTable();
    });
    $('body').on('click', '.sendButton', function(){
    var id = $(this).data('estimate-id');
    var url = "{{ route('admin.contracts.send',':id') }}";
    url = url.replace(':id', id);
    var token = "{{ csrf_token() }}";
    $.easyAjax({
    type: 'POST',
            url: url,
            data: {'_token': token},
            success: function (response) {
            if (response.status == "success") {
            loadTable();
            }
            }
    });
    });
    function exportData(){

    var startDate = $('#start-date').val();
    if (startDate == '') {
    startDate = null;
    }

    var endDate = $('#end-date').val();
    if (endDate == '') {
    endDate = null;
    }

    var status = $('#status').val();
    var url = '{{ route('admin.estimates.export', [':startDate', ':endDate', ':status']) }}';
    url = url.replace(':startDate', startDate);
    url = url.replace(':endDate', endDate);
    url = url.replace(':status', status);
    window.location.href = url;
    }

    $('#createContract').on('submit', function (e) {
    $('#mdl_create_contract').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.contracts.ajax_store')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            Swal.fire({
            icon: 'success',
                    title: 'Success',
                    text: data.message,
                    allowOutsideClick: false
            }).then((result) => {
            getTableContract();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    $('#att_ksk').bind('change', function() {
    var cek_size = this.files[0].size;
    if (cek_size >= 2048000) {

    }
    });
    function setValueInForm(id, data){
    $('#' + id).html(data);
    $('#' + id).selectpicker('refresh');
    }
    $('#addContractType').submit(function (e) {
    e.preventDefault();
    var dataForm = new FormData(this);
    console.log(dataForm)
            $.ajax({
            url: '{{route('admin.contracts.ajaxCreateContractType')}}',
                    // container: '#addCategories',
                    type: "POST",
                    data: dataForm,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                    if (response.status == 'success'){
                    setValueInForm('contract_type', response.optionData);
                    $.unblockUI();
                    $('#ticketModal').modal('hide');
                    $('#mdl_create_contract').modal('show');
                    }
                    }
            })
    });
    $("#mdl_edit_contract").on('show.bs.modal', function(e) {
    var x = $(e.relatedTarget);
    var id = x.data('id');
    console.log(id);
    $.get('/admin/contracts/getAjaxContract/' + id, function(res){
    $('#contract_id').val(res.id)
            $('#edit_unit_id').val(res.unit_id).trigger('change');
    $('#edit_subject').val(res.subject);
    $('#edit_tenant').val(res.user_id).trigger('change');
    $('#edit_amount').val(res.amount)
            $('#edit_contract_type').val(res.contract_type_id).trigger('change')
            $('#edit_start_date').val(res.start_date)
            $('#edit_end_date').val(res.end_date)
            $('#edit_contract_detail').val(res.contract_detail)
            $('#edit_description').val(res.description)
            if (res.attachment_ktp != '') {
    var ktp = res.attachment_ktp;
    var arr_ktp = ktp.split(".");
    if (arr_ktp[1] == 'jpg' || arr_ktp[1] == 'jpeg' || arr_ktp[1] == 'png' || arr_ktp[1] == 'gif') {
    $('#edit_att_ktp').html('<a href="/user-uploads/attachment/' + ktp + '" target="_blank"><img src="/user-uploads/attachment/' + ktp + '" class="thumbnail_img"></a>');
    $('#edit_att_ktp').css({"width": "200px", "height": "150px"});
    } else{
    var icon_ktp = '';
    if (arr_ktp[1] == 'pdf') {
    icon_ktp = '<i class="fa fa-file-pdf-o"></i>';
    } else if (arr_ktp[1] == 'docx') {
    icon_ktp = '<i class="fa fa-file-word-o"></i>';
    } else if (arr_ktp[1] == 'doc') {
    icon_ktp = '<i class="fa fa-file-text-o"></i>';
    } else if (arr_ktp[1] == 'xls' || arr_ktp[1] == 'xlsx') {
    icon_ktp = '<i class="fa fa-file-excel-o"></i>';
    } else{
    icon_ktp = '<i class="fa fa-file-o"></i>';
    }
    $('#edit_att_ktp').html('<a href="/user-uploads/attachment/' + ktp + '" target="_blank">' + icon_ktp + ' ' + ktp + '</a>');
    $('#edit_att_ktp').css({"height": "30px"});
    }
    }

    if (res.attachment_ksk != '') {
    var ksk = res.attachment_ksk;
    var arr_ksk = ksk.split(".");
    if (arr_ksk[1] == 'jpg' || arr_ksk[1] == 'jpeg' || arr_ksk[1] == 'png' || arr_ksk[1] == 'gif') {
    $('#edit_att_ksk').html('<a href="/user-uploads/attachment/' + ksk + '" target="_blank"><img src="/user-uploads/attachment/' + ksk + '" class="thumbnail_img"></a>');
    $('#edit_att_ksk').css({"width": "200px", "height": "150px"});
    } else{
    var icon_ksk = '';
    if (arr_ksk[1] == 'pdf') {
    icon_ksk = '<i class="fa fa-file-pdf-o"></i>';
    } else if (arr_ksk[1] == 'docx') {
    icon_ksk = '<i class="fa fa-file-word-o"></i>';
    } else if (arr_ksk[1] == 'doc') {
    icon_ksk = '<i class="fa fa-file-text-o"></i>';
    } else if (arr_ksk[1] == 'xls' || arr_ksk[1] == 'xlsx') {
    icon_ksk = '<i class="fa fa-file-excel-o"></i>';
    } else{
    icon_ksk = '<i class="fa fa-file-o"></i>';
    }
    $('#edit_att_ksk').html('<a href="/user-uploads/attachment/' + ksk + '" target="_blank">' + icon_ksk + ' ' + ksk + '</a>');
    $('#edit_att_ksk').css({"height": "30px"});
    }
    }

    if (res.attachment_kontrak != '') {
    var contract = res.attachment_kontrak;
    var arr_contract = contract.split(".");
    if (arr_contract[1] == 'jpg' || arr_contract[1] == 'jpeg' || arr_contract[1] == 'png' || arr_contract[1] == 'gif') {
    $('#edit_att_contract').html('<a href="/user-uploads/attachment/' + contract + '" target="_blank"><img src="/user-uploads/attachment/' + contract + '" class="thumbnail_img"></a>');
    $('#edit_att_contract').css({"width": "200px", "height": "150px"});
    } else{
    var icon_contract = '';
    if (arr_contract[1] == 'pdf') {
    icon_contract = '<i class="fa fa-file-pdf-o"></i>';
    } else if (arr_contract[1] == 'docx') {
    icon_contract = '<i class="fa fa-file-word-o"></i>';
    } else if (arr_contract[1] == 'doc') {
    icon_contract = '<i class="fa fa-file-text-o"></i>';
    } else if (arr_contract[1] == 'xls' || arr_contract[1] == 'xlsx') {
    icon_contract = '<i class="fa fa-file-excel-o"></i>';
    } else{
    icon_contract = '<i class="fa fa-file-o"></i>';
    }
    $('#edit_att_contract').html('<a href="/user-uploads/attachment/' + contract + '" target="_blank">' + icon_contract + ' ' + contract + '</a>');
    $('#edit_att_contract').css({"height": "30px"});
    }
    }

    if (res.other_attachment != '') {
    var other = res.other_attachment;
    var arr_other = other.split(".");
    if (arr_other[1] == 'jpg' || arr_other[1] == 'jpeg' || arr_other[1] == 'png' || arr_other[1] == 'gif') {
    $('#edit_att_other').html('<a href="/user-uploads/attachment/' + other + '" target="_blank"><img src="/user-uploads/attachment/' + other + '" class="thumbnail_img"></a>');
    $('#edit_att_other').css({"width": "200px", "height": "150px"});
    } else{
    var icon_other = '';
    if (arr_other[1] == 'pdf') {
    icon_other = '<i class="fa fa-file-pdf-o"></i>';
    } else if (arr_other[1] == 'docx') {
    icon_other = '<i class="fa fa-file-word-o"></i>';
    } else if (arr_other[1] == 'doc') {
    icon_other = '<i class="fa fa-file-text-o"></i>';
    } else if (arr_other[1] == 'xls' || arr_other[1] == 'xlsx') {
    icon_other = '<i class="fa fa-file-excel-o"></i>';
    } else{
    icon_other = '<i class="fa fa-file-o"></i>';
    }
    $('#edit_att_other').html('<a href="/user-uploads/attachment/' + other + '" target="_blank">' + icon_other + ' ' + other + '</a>');
    $('#edit_att_other').css({"height": "30px"});
    }
    }
    }, 'json')
    })

            $('#edit_unit_id').on('change', function(){
    var x = $(this).val();
    var owner = $(this).find(':selected').data('owner');
    console.log(x)
            console.log(owner)
            if (x != '') {
    $('#edit_owner_name').val(owner)
    } else{
    $('#edit_owner_name').val('')
    }
    })

            $('#editContract').on('submit', function (e) {
    $('#mdl_edit_contract').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.contracts.ajax_edit_store')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            Swal.fire({
            icon: 'success',
                    title: 'Success',
                    text: data.message,
                    allowOutsideClick: false
            }).then((result) => {
            getTableContract();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    $('#importExcel').on('submit', function (e) {
    $('#mdl_import_excel').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.contracts.import_excel_contract')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            $('.clear_after_save').val('')
                    Swal.fire({
                    icon: 'success',
                            title: 'Success',
                            text: data.message,
                            allowOutsideClick: false
                    }).then((result) => {
            getTableBast()
            })
            } else{
            $('.clear_after_save').val('')
                    Swal.fire({
                    icon: 'success',
                            title: 'Success',
                            text: 'Bast Berhasil Disimpan',
                            allowOutsideClick: false
                    }).then((result) => {
            getTableBast();
            getUnits(); ;
            })
            }
            },
            error: function (data) {
            $('.clear_after_save').val('')
                    Swal.fire({
                    icon: 'success',
                            title: 'Success',
                            text: 'Bast Berhasil Disimpan',
                            allowOutsideClick: false
                    }).then((result) => {
            getTableBast();
            getUnits(); ;
            })
            }
    }, 'json');
    });
    $(".auto").autoNumeric({
    aSign: 'Rp ',
            aSep: '.',
            aDec: ',',
    });
</script>
@endpush