@extends('voyager::master')

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

@section('page_title', 'Contacts')

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-people"></i>
        All Contacts
    </h1>
@stop

@section('content')
    <div class="page-content edit-add container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="add-contact-wrapper">
                    <a href="{{ route('custom.contacts.add') }}" class="btn btn-secondary add-contact"><span class="icon voyager-plus"></span>Add New Contact</a>
                </div>

                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <div class="table-responsive">
                            <div id="dataTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                <table id="dataTable" class="table table-hover dataTable no-footer" role="grid">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Type</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if(!empty($contacts))
                                            @foreach($contacts as $contact)
                                            @php
                                                $name = $contact->type == "supplier" ? \App\Models\Supplier::where("id", $contact->supplier_id)->first()->name : $contact->name;
                                            @endphp
                                            <tr>
                                                <td>{{ $name }}</td>
                                                <td><a href="mailto:{{ $contact->email }}">{{ $contact->email }}</a></td>
                                                <td>{{ $contact->phone }}</td>
                                                <td>{{ ucfirst($contact->type) }}</td>
                                                <td width="250">
                                                    <a href="javascript:;" title="Delete" class="btn btn-sm btn-danger pull-right 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.edit', $contact->id) }}" title="Edit" class="btn btn-sm btn-primary pull-right edit">
                                                        <i class="voyager-edit"></i> <span class="hidden-xs hidden-sm">Edit</span>
                                                    </a>
                                                    <a href="{{ route('custom.contacts.view', $contact->id) }}" title="View" class="btn btn-sm btn-warning pull-right view">
                                                        <i class="voyager-eye"></i> <span class="hidden-xs hidden-sm">View</span>
                                                    </a>
                                                </td>
                                                
                                            </tr>
                                            @endforeach
                                        @endif;
                                    </tbody>
                                </table>
                        </div>
                    </div><!-- panel-body -->
                </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">
    .add-contact-wrapper .icon.voyager-plus:before {
        color: #89c33f;
        font-size: 24px;
    }
    .add-contact-wrapper .icon.voyager-plus {
        height: 24px;
        width: 24px;
        vertical-align: middle;
    }
    a.btn.btn-secondary.add-contact {
        border: 1px solid #89c33f;
        color: #89c33f;
        transition: all 0.2s;
    }
    a.btn.btn-secondary.add-contact:hover {
        background-color: #89c33f;
        color: #fff;
    }
    a.btn.btn-secondary.add-contact:hover .icon.voyager-plus:before {
        color:#fff;
    }
</style>
@stop

@section('javascript')
    <script>
        $(document).ready(function () {
            $('#dataTable').DataTable();

            $("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