@extends('app.app')
@section('title')
Transactions
@endsection
@section('customcss')

@endsection
@section('content')
    <div class="container-fluid">
        <div class="content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row d-flex align-items-center">
                                <div class="col">
                                    <p class="card-title text-bold mb-0">Transactions</p>
                                    <p class="card-subtitle text-muted">Transactions list</p>
                                </div>
                                <div class="col text-end">
                                    <a href="{{ route('view_transactions_add') }}" class="btn btn-sm btn-danger">Add New Transaction</a>
                                </div>
                                <div class="col-auto text-end ps-0">
                                    <button class="btn btn-sm btn-danger">Upload</button>
                                    <button class="btn btn-sm btn-danger">Download</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover dataTable w-100">
                                    <thead>
                                        <tr class="">
                                            <th class="">#</th>
                                            <th class="">Client Name</th>
                                            <th class="">Vehicle</th>
                                            <th class="">Driver</th>
                                            <th class="">From</th>
                                            <th class="">Destination</th>
                                            <th class="text-center">Status</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="">
                                            <td class="align-baseline">1</td>
                                            <td class="align-baseline">
                                                <ul class="ps-3">
                                                    <li><span class="">SiCepat</span></li>
                                                </ul>
                                            </td>
                                            <td class="align-baseline">B 2901 XYZ</td>
                                            <td class="align-baseline text-nowrap">Jerrard Izaak</td>
                                            <td class="align-baseline">
                                                <ul class="ps-3">
                                                    <li><span class="">Jakarta</span></li>
                                                </ul>
                                            </td>
                                            <td class="">
                                                <ul class="ps-3">
                                                    <li><span class="">Yogyakarta</span></li>
                                                    <li><span class="">Semarang</span></li>
                                                    <li><span class="">Surabaya</span></li>
                                                </ul>
                                            </td>
                                            <td class="text-center">
                                                <span class="btn btn-sm btn-outline-success">On Going</span>
                                            </td>
                                            <td class="align-baseline text-center">
                                                <a href="#" class="text-decoration-none me-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit">
                                                    <span class="icon ion-edit text-inherit fz-16"></span>
                                                </a>
                                                <a href="#" class="text-decoration-none text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Delete">
                                                    <span class="icon ion-trash-b fz-16"></span>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr class="">
                                            <td class="align-baseline">2</td>
                                            <td class="align-baseline">
                                                <ul class="ps-3">
                                                    <li><span class="">JNE</span></li>
                                                    <li><span class="">J&T</span></li>
                                                    <li><span class="">TIKI</span></li>
                                                </ul>
                                            </td>
                                            <td class="align-baseline">B 2901 XYZ</td>
                                            <td class="align-baseline text-nowrap">Jerrard Izaak</td>
                                            <td class="align-baseline">
                                                <ul class="ps-3">
                                                    <li><span class="">Jakarta</span></li>
                                                </ul>
                                            </td>
                                            <td class="">
                                                <ul class="ps-3">
                                                    <li><span class="">Bandung</span></li>
                                                    <li><span class="">Purwakarta</span></li>
                                                    <li><span class="">Cirebon</span></li>
                                                </ul>
                                            </td>
                                            <td class="text-center">
                                                <span class="btn btn-sm btn-outline-warning">Draft</span>
                                            </td>
                                            <td class="align-baseline text-center">
                                                <a href="#" class="text-decoration-none me-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit">
                                                    <span class="icon ion-edit text-inherit fz-16"></span>
                                                </a>
                                                <a href="#" class="text-decoration-none text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Delete">
                                                    <span class="icon ion-trash-b fz-16"></span>
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8"></div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')
    <script>
        $('.dataTable').DataTable();
    </script>
@endsection