@extends('voyager::master')

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@stop

@section('page_title', 'Viewing Contact')

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-people"></i>
        Viewing Contact
        <a href="{{ route('custom.contacts.edit', $contact->id) }}" title="Edit" class="btn btn-sm btn-primary edit">
            <i class="voyager-edit"></i> <span class="hidden-xs hidden-sm">Edit</span>
        </a>
        <a href="javascript:;" title="Delete" class="btn btn-sm btn-danger delete" data-id="{{ $contact->id }}" id="delete-{{ $contact->id }}">
            <i class="voyager-trash"></i> <span class="hidden-xs hidden-sm">Delete</span>
        </a>
        <a href="{{ route('custom.contacts.table') }}" class="btn btn-warning">
            <span class="glyphicon glyphicon-list"></span>&nbsp;
            Return to List
        </a>
    </h1>
@stop

@section('content')
    <div class="page-content edit-add container-fluid">
        <div class="row">
            <div class="col-sm-12">

                <div class="panel panel-bordered">
                    @php
                        if($contact->type == "supplier"):
                            $supplier = \App\Models\Supplier::where("id", $contact->supplier_id)->first();
                            $logo = !empty($contact->logo) ? $contact->logo : $supplier->logo;
                        else:
                            $logo = $contact->logo;
                        endif;

                        if(empty($logo)):
                            $logo = url("/images/no_image.jpg");
                        endif;
                    @endphp
                    
                    @if(!empty($logo))
                    <div class="panel-heading" style="border-bottom:0;"><h3 class="panel-title">Logo</h3></div>
                        <div class="panel-body" style="padding-top:0;">
                            <img src="{{ $logo }}" class="logo">
                        </div>
                    <hr style="margin:0;">
                    @endif

                    @php
                        $name = $contact->type == "supplier" ? \App\Models\Supplier::where("id", $contact->supplier_id)->first()->name : $contact->name;
                    @endphp
                    <div class="panel-heading" style="border-bottom:0;"><h3 class="panel-title">Name</h3></div>
                    <div class="panel-body" style="padding-top:0;">{{ $name }}</div>
                    <hr style="margin:0;">

                    <div class="panel-heading" style="border-bottom:0;"><h3 class="panel-title">Type</h3></div>
                    <div class="panel-body" style="padding-top:0;">{{ ucfirst($contact->type) }}</div>
                    <hr style="margin:0;">

                    @if(!empty($contact->state))
                        <div class="panel-heading" style="border-bottom:0;"><h3 class="panel-title">State</h3></div>
                        <div class="panel-body" style="padding-top:0;">{{ strtoupper($contact->state) }}</div>
                        <hr style="margin:0;">
                    @endif

                    @php
                        $website_url = $contact->website;
                        if(false === strpos($website_url, "://")){
                            $website_url = "http://" . $website_url;
                        }
                    @endphp
                    <div class="panel-heading" style="border-bottom:0;"><h3 class="panel-title">Website</h3></div>
                    <div class="panel-body" style="padding-top:0;"><a href="{{ $website_url }}" target="_blank">{{ $contact->website }}</a></div>
                    <hr style="margin:0;">

                    <div class="panel-heading" style="border-bottom:0;"><h3 class="panel-title">Notes</h3></div>
                    <div class="panel-body" style="padding-top:0;">{{ $contact->notes }}</div>
                    <hr style="margin:0;">

                    <div class="panel-heading" style="border-bottom:0;"><h3 class="panel-title">Main Contact</h3></div>
                    <div class="panel-body" style="padding-top:0;">
                        <ul class="main-contact">
                            <li><span>Address</span> : {{ $contact->address }}</li>
                            <li><span>Email</span> : <a href="mailto:{{ $contact->email }}">{{ $contact->email }}</a></li>
                            <li><span>Phone</span> : {{ $contact->phone }}</li>
                        </ul>
                    </div>
                    <hr style="margin:0;">

                    <div class="panel-heading" style="border-bottom:0;"><h3 class="panel-title">Contacts</h3></div>
                    <div class="panel-body" style="padding-top:0;">
                        @if(!empty($contacts))
                        <ul class="contacts">
                            @foreach($contacts as $ct)
                            <li>
                                <div class="contact">
                                    <div class="name-position"><span>{{$ct->job_title}} : </span> {{ $ct->name }}</div>
                                    <div class="email"><span>Email : </span> <a href="mailto:{{ $ct->email }}">{{ $ct->email }}</a></div>
                                    <div class="phone"><span>Phone : </span> {{ $ct->phone }}</div>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                        @else
                        [ No data ]
                        @endif
                    </div>
                    <hr style="margin:0;">


                </div><!-- panel -->

            </div>
        </div>
    </div>
    <div class="modal modal-danger fade in" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title"><i class="voyager-trash"></i> Are you sure you want to delete this contact?</h4>
                </div>
                <div class="modal-footer">
                    <form action="{{ route('custom.contacts.remove') }}" id="delete_form" method="POST">
                        @csrf
                        <input type="hidden" name="id" value="">
                        <input type="submit" class="btn btn-danger pull-right delete-confirm" value="Yes, Delete it!">
                    </form>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Cancel</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
<style type="text/css">
.panel-body .contact {
    border-bottom: 1px dashed #cecece;
}

.panel-body ul {
    list-style: none;
}
.contact {
    padding: 15px;
}
.main-contact li > span,
.contact > div > span {
    font-weight: 500;
}

.contacts li:last-child > div.contact {
    border:none;
}
</style>
@stop

@section('javascript')
    <script>
        $(document).ready(function () {
            $("a.delete").on("click", function(){
                var contact_id = $(this).data("id");
                $('#delete_modal').find("input[name='id']").attr("id", contact_id);
                $('#delete_modal').find("input[name='id']").val(contact_id);
                $('#delete_modal').modal('show');
            });
        });
    </script>
@stop