@extends('layouts.app')
@push('head-script')
<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('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-6 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-6 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('admin.units.index') }}">{{ __($pageTitle) }}</a></li>
            <li class="active">Contract Detail</li>
        </ol>
    </div>
    <div class="col-lg-6 col-sm-8 col-md-8 col-xs-12 text-right">

        <a href="#" class="btn btn-outline btn-success btn-sm">@lang('modules.lead.edit')
            <i class="fa fa-edit" aria-hidden="true"></i></a>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection


@section('content')

<div class="row">

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

            <div class="row m-t-20">
                <div class="col-xs-12">
                    <div class="panel">
                        <div class="panel-wrapper collapse in">
                            <div class="panel-body b-all border-radius">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-xs-3" style="text-align: center;">
                                                <i class="fa fa-building-o" aria-hidden="true"
                                                   style="font-size: 25px;"></i>
                                                {{-- <img src="#" width="75" height="75" class="img-circle" alt=""> --}}
                                            </div>
                                            <div class="col-xs-9">
                                                <p>
                                                    <span class="font-medium text-info font-semi-bold" id="contract_name">Contract Name</span>
                                                    <br>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="col-xs-12">
        <div class="content-wrap">
            <section id="section-line-1" class="show">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="white-box">
                            <div class="row">
                                <div class="col-md-4 col-xs-6 b-r"> <strong>Unit</strong> <br>
                                    <p class="text-muted" id="unit"></p>

                                </div>
                                <div class="col-md-4 col-xs-6 b-r"> <strong>Owner</strong> <br>
                                    <p class="text-muted" id="owner"></p>
                                </div>
                                <div class="col-md-4 col-xs-6"> <strong>Tenant</strong> <br>
                                    <p class="text-muted" id="tenant"></p>
                                </div>
                                <div class="col-md-4 col-xs-6 b-r"> <strong>Amount</strong> <br>
                                    <p class="text-muted" id="amount"></p>
                                </div>
                                <div class="col-md-4 col-xs-6 b-r "> <strong>Start Date</strong> <br>
                                    <p class="text-muted" id="start_date"></p>
                                </div>
                                <div class="col-md-4 col-xs-6 "> <strong>End Date</strong> <br>
                                    <p class="text-muted" id="end_date"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 col-xs-4 b-r"> <strong>Summary</strong> <br>
                                    <p class="text-muted" id="summary"></p>

                                </div>
                                <div class="col-md-4 col-xs-4 b-r"> <strong>Notes</strong> <br>
                                    <p class="text-muted" id="notes"></p>
                                </div>
                                <div class="col-md-4 col-xs-4"> <strong>Address</strong> <br>
                                    <p class="text-muted" id="alternate_address"></p>
                                </div>
                                <div class="col-md-3 col-xs-6 b-r"> <strong>KTP</strong> <br>
                                    <div class="fileinput-new thumbnail" id="ktp_attachment">

                                    </div>

                                </div>
                                <div class="col-md-3 col-xs-6"> <strong>KSK</strong> <br>
                                    <div class="fileinput-new thumbnail" id="ksk_attachment" >

                                    </div>
                                </div>
                                <div class="col-md-3 col-xs-6 b-r"> <strong>Contract</strong> <br>
                                    <div class="fileinput-new thumbnail" id="contract_attachment" >

                                    </div>
                                </div>
                                <div class="col-md-3 col-xs-6"> <strong>Other Attachment</strong> <br>
                                    <div class="fileinput-new thumbnail" id="other_attachment" >

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

                </div>

            </section>
        </div>
    </div>
</div>
<!-- .row -->

@endsection

@push('footer-script')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    var id = '';
    $.get('/admin/contracts/getAjaxContract/' + id, function (res) {
        $('#contract_name').text(res.subject)
        $('#unit').text(res.unit_name)
        $('#owner').text(res.owner_name)
        $('#tenant').text(res.user_name)
        $('#amount').text(res.amount)
        $('#start_date').text(res.start_date)
        $('#end_date').text(res.end_date)
        $('#summary').text(res.contract_detail)
        $('#notes').text(res.description)
        $('#alternate_address').text(res.alternate_address)
        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') {
                $('#ktp_attachment').html('<a href="/user-uploads/attachment/' + res.attachment_ktp + '"><img src="/user-uploads/attachment/' + res.attachment_ktp + '" class="thumbnail_img"></a>');
                $('#ktp_attachment').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>';
                }
                $('#ktp_attachment').html('<a href="/user-uploads/attachment/' + res.attachment_ktp + '">' + icon_ktp + ' ' + res.attachment_ktp + '</a>');
                $('#ktp_attachment').css({"height": "30px"});
            }
        } else {
            $('#ktp_attachment').html('<img src="https://via.placeholder.com/200x150.png?text=KTP">');
        }

        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') {
                $('#ksk_attachment').html('<a href="/user-uploads/attachment/' + res.attachment_ksk + '"><img src="/user-uploads/attachment/' + res.attachment_ksk + '" class="thumbnail_img"></a>');
                $('#ksk_attachment').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>';
                }
                $('#ksk_attachment').html('<a href="/user-uploads/attachment/' + res.attachment_ksk + '">' + icon_ksk + ' ' + res.attachment_ksk + '</a>');
                $('#ksk_attachment').css({"height": "30px"});
            }
        } else {
            $('#ksk_attachment').html('<img src="https://via.placeholder.com/200x150.png?text=KSK">');
        }

        if (res.attachment_kontrak != '') {
            var kontrak = res.attachment_kontrak;
            var arr_kontrak = kontrak.split(".");
            if (arr_kontrak[1] == 'jpg' || arr_kontrak[1] == 'jpeg' || arr_kontrak[1] == 'png' || arr_kontrak[1] == 'gif') {
                $('#contract_attachment').html('<a href="/user-uploads/attachment/' + res.attachment_kontrak + '"><img src="/user-uploads/attachment/' + res.attachment_kontrak + '" class="thumbnail_img"></a>');
                $('#contract_attachment').css({"width": "200px", "height": "150px"});
            } else {
                var icon_kontrak = '';
                if (arr_kontrak[1] == 'pdf') {
                    icon_kontrak = '<i class="fa fa-file-pdf-o"></i>';
                }else if (arr_kontrak[1] == 'docx') {
                    icon_kontrak = '<i class="fa fa-file-word-o"></i>';
                }else if (arr_kontrak[1] == 'doc') {
                    icon_kontrak = '<i class="fa fa-file-text-o"></i>';
                }else if (arr_kontrak[1] == 'xls' || arr_kontrak[1] == 'xlsx') {
                    icon_kontrak = '<i class="fa fa-file-excel-o"></i>';
                }else{
                    icon_kontrak = '<i class="fa fa-file-o"></i>';
                }
                $('#contract_attachment').html('<a href="/user-uploads/attachment/' + res.attachment_kontrak + '">' + icon_kontrak + ' ' + res.attachment_kontrak + '</a>');
                $('#contract_attachment').css({"height": "30px"});
            }
        } else {
            $('#contract_attachment').html('<img src="https://via.placeholder.com/200x150.png?text=Kontrak">')
        }

        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') {
                $('#other_attachment').html('<a href="/user-uploads/attachment/' + res.other_attachment + '"><img src="/user-uploads/attachment/' + res.other_attachment + '" class="thumbnail_img"></a>');
                $('#other_attachment').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_kontrak[1] == 'xlsx') {
                    icon_other = '<i class="fa fa-file-excel-o"></i>';
                }else{
                    icon_other = '<i class="fa fa-file-o"></i>';
                }
                $('#other_attachment').html('<a href="/user-uploads/attachment/' + res.other_attachment + '">' + icon_other + ' ' + res.other_attachment + '</a>');
                $('#other_attachment').css({"height": "30px"});
            }
        } else {
            $('#other_attachment').html('<img src="https://via.placeholder.com/200x150.png?text=Other Attachment">')
        }
    }, 'json')
</script>
@endpush