@extends('layouts.app')

@section('title', 'Transactions')

@push('css')
@endpush

@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">All Transactions</h4>
            <div class="btn-group">
                {{-- <button type="button" class="btn btn-rounded btn-primary btn-sm" data-bs-toggle="modal"
                    data-bs-target="#addTransactionModal">
                    Add Transaction
                </button> --}}

                <a href="{{ route('transactions.create') }}" class="btn btn-rounded btn-primary btn-sm"> Add Transaction</a>

            </div>
        </x-slot:title>

        <div class="table-responsive">
            <table id="all-transaction-table" class="display" style="min-width: 845px">
                <thead>
                    <tr>
                        <th>File Name</th>
                        <th>Representation</th>
                        <th>Stage</th>
                        <th>Form</th>
                        <th>Envelops</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse (array_reverse($transactions) as $transaction)
                    <tr>
                        <td>
                            <a href="{{ route('transactions.show',['transaction' => $transaction['id'] ]) }}"
                                class="d-flex align-items-center">
                                <i class="fa fa-folder text-primary mr-3 me-2"></i>
                                <span class="folder-name folder-container" data-folder="folder1">
                                    {{ $transaction['transaction_name'] }}</span>
                            </a>
                        </td>
                        <td>
                            {{ $transaction['transaction_type'] }}
                        </td>
                        <td>
                            {{ $transaction['transaction_stage'] }}
                        </td>
                        <td>
                            <i class="fa fa-file text-primary mr-3 me-2"></i>  {{ count($transaction['transaction_files']) }}
                        </td>
                        <td>
                            <i class="fa fa-envelope text-primary mr-3 me-2"></i> {{ $transaction['envelope'] }}
                        </td>
                        <td class="text-center">
                            <a href="#" class="btn btn-warning shadow btn-xs sharp me-1" title="Archive this directory">
                                <i class="fa fa-archive"></i>
                            </a>
                            <a href="{{ route('transactions.edit', ['transaction' => $transaction['id']]) }}" class="btn btn-primary shadow btn-xs sharp me-1"
                                title="Rename this directory"><i class="fa fa-pencil"></i></a>
                            <button
                                data-url="{{ route('transactions.destroy', ['transaction' => $transaction['id']]) }}"
                                class="btn btn-danger deleteButton shadow btn-xs sharp me-1"
                                title="Delete this directory">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="btn btn-primary btn-xs shadow sharp" data-bs-toggle="modal"
                                data-bs-target="#sendModal">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    @endforelse
                </tbody>
            </table>
        </div>
    </x-row-card>
</x-content-body>



<!-- directory send  Modal -->
<div class="modal fade" id="sendModal" tabindex="-1" aria-labelledby="sendModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sendModalLabel">Send Mail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="sendMailForm" enctype="multipart/form-data">

                    <!-- to -->
                    <div class="mb-3">
                        <x-input-label for="to" :value="__('To')" />
                        <input type="email" class="form-control form-control-sm" id="ccEmails" name="" multiple
                            placeholder="Enter multiple email addresses">
                    </div>

                    <!-- CC Emails -->
                    <div class="mb-3">
                        <x-input-label for="ccEmails" :value="__('CC')" />
                        <select name="cc_emails[]" class="form-control form-control-sm multiple_cc_emails" multiple>
                        </select>
                    </div>

                    <!-- Subject -->
                    <div class="mb-3">
                        <x-input-label for="subject" :value="__('Subject')" />
                        <input type="text" class="form-control form-control-sm" id="subject" name="subject"
                            placeholder="Enter subject">
                    </div>

                    <!-- Text Area -->
                    <div class="mb-3">
                        <x-input-label for="Message" :value="__('Message')" />
                        <textarea class="form-control form-control-sm notes-editor" id="message" name="message" rows="5"
                            placeholder="Write your message here"></textarea>
                    </div>

                    <!-- File Upload -->
                    <div class="mb-3">
                        {{--
                        <x-input-label for="fileUpload" :value="__('File Upload')" /> --}}
                        <input type="file" class="form-control form-control-sm" id="fileUpload" name="fileUpload"
                            disabled>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary btn-sm" id="sendMailButton">Send</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')

{{-- {{ $dataTable->scripts(attributes: ['type' => 'module']) }} --}}

<script src="{{ asset('assets/js/custom/transaction.js') }}"></script>
@endpush