@extends('layouts.app')

@section('content')
    <div class="container" id="app">
        <div class="row justify-content-center">
            <div class="col-9">
                <table class="table table-bordered table-hover table-sm table-striped">
                    <tbody>
                    <tr>
                        <th>名稱</th>
                        <td>{{ $project->title }}</td>
                    </tr>
                    <tr>
                        <th>狀態</th>
                        <td>{{ __('enums.project_status.' . $project->status) }}</td>
                    </tr>
                    <tr>
                        <th>客戶</th>
                        <td>{{ $project->client->name }}</td>
                    </tr>
                    <tr>
                        <th>描述</th>
                        <td>{!! nl2br($project->description) !!}</td>
                    </tr>
                    <tr>
                        <th>起始日</th>
                        <td>{{ $project->begin_at }}</td>
                    </tr>
                    <tr>
                        <th>結束日</th>
                        <td>{{ $project->end_at }}</td>
                    </tr>
                    <tr>
                        <th>金額</th>
                        <td>{{ $project->price }}</td>
                    </tr>
                    <tr>
                        <th>建立日期</th>
                        <td>{{ $project->created_at }}</td>
                    </tr>
                    <tr>
                        <th>更新日期</th>
                        <td>{{ $project->updated_at }}</td>
                    </tr>
                    <tr>
                        <th>未收款項</th>
                        <td>@if($project->unpaid_amount) {{ $project->unpaid_amount }} @endif</td>
                    </tr>
                    <tr>
                        <th>已收款項 <a href="{{ route('adm.payment.create', ['project_id' => $project->id]) }}"
                                    class="btn btn-sm btn-outline-success"><i class="bi bi-plus"></i></a></th>
                        <td>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>類型</th>
                                    <th>金額</th>
                                    <th>日期</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($project->payments as $payment)
                                    <tr>
                                        <td>{{ __('enums.payment_type.' . $payment->type) }}</td>
                                        <td>{{ $payment->amount }}</td>
                                        <td>{{ $payment->created_at }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-3">
                <div>Notes
                    <a href="{{ route('adm.note.create', ['project_id' => $project->id]) }}" class="btn btn-success btn-sm">
                        <i class="bi bi-plus"></i>
                    </a>
                </div>
                <div class="notes">
                    <?php foreach ($notes as $note): ?>
                        <div class="note p-2 my-2">
                            <div class="content">
                                {!! nl2br($note->content) !!}
                            </div>
                            <div class="time">
                                {{ $note->created_at }}
                            </div>
                            <div class="delete-wrapper" data-id="{{ $note->id }}">
                                <div class="bg"></div>
                                <i class="delete bi bi-trash3"></i>
                            </div>
                        </div>

                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('.delete-wrapper').on('click', (e) => {
            if(confirm('確定刪除?')) {
                let $this = $(e.currentTarget),
                    id = $this.data('id')
                axios.delete(`/adm/note/${id}`).then(resp => {
                    $this.closest('.note').remove()
                })
            }
        })
    </script>
@endsection