@extends('layouts.backend.app')


@section('title', 'Invoices')

@push('css')
@endpush

@section('content')
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">Dashboard</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">

                            <li class="breadcrumb-item">
                                <a href="dashboard">
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                Invoices
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12 ">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-2" id="bulk-action">
                    <div class="card">
                        <div class="card-header">
                            Bulk Action
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="status">status</label>
                                <select name="status" id="status" class="form-control mt-1">
                                    <option selected disabled>Select Status</option>
                                    <option value="Paid">Paid</option>
                                    <option value="Rejected">Rejected</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        Invoices
                        <a href="{{ route('admin.invoice.generate') }}" class="text-right btn btn-success btn-sm">
                            <i class="fa fa-plus-circle"></i>
                            <span>Generate</span>
                        </a>
                    </div>
                    <div class="card-body table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="select_all">
                                    </th>
                                    <th>ID</th>
                                    <th>Type</th>
                                    <th>Affiliate</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($invoices as $invoice)
                                    <tr>
                                        <td>
                                            <input type="checkbox" id="select_{{ $invoice->id }}">
                                        </td>
                                        <td>{{ $invoice->id }}</td>
                                        <td>{{ $invoice->type }}</td>
                                        <td>({{ $invoice->affiliate_id }}) - {{ $invoice->affiliate?$invoice->affiliate->name:'' }}</td>
                                        <td>{{ $invoice->start_date }}</td>
                                        <td>{{ $invoice->end_date }}</td>
                                        <td>{{ $invoice->total_amount }}</td>
                                        <td>
                                            @if ($invoice->status == 'Pending')
                                                <span class="badge bg-warning">{{ $invoice->status }}</span>
                                            @elseif($invoice->status == 'Paid')
                                                <span class="badge bg-success">{{ $invoice->status }}</span>
                                            @elseif($invoice->status == 'Rejected')
                                                <span class="badge bg-danger">{{ $invoice->status }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            <form action="{{ route('admin.invoice.changs.status', $invoice->id) }}"
                                                method="POST">
                                                @csrf
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-9">
                                                            <select name="status" id="" class="form-control">
                                                                <option
                                                                    {{ $invoice->status == 'Pending' ? 'selected' : '' }}
                                                                    value="Pending">Pending</option>
                                                                <option {{ $invoice->status == 'Paid' ? 'selected' : '' }}
                                                                    value="Paid">Paid</option>
                                                                <option
                                                                    {{ $invoice->status == 'Rejected' ? 'selected' : '' }}
                                                                    value="Rejected">Rejected</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <button class="btn btn-success btn-sm" style="float: right">
                                                                <i class="fa fa-save"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.invoice.show', $invoice->id) }}"
                                                class="btn btn-primary btn-sm">View</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <br>
                        <div style="float: right">
                            {{ $invoices->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const selectAll = document.querySelector('#select_all');
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        const bulkAction = document.querySelector('#bulk-action');
        const selectIds = [];
        const status = document.querySelector('#status');
        bulkAction.style.display = 'none';

        selectAll.addEventListener('click', () => {
            checkboxes.forEach((checkbox) => {
                checkbox.checked = selectAll.checked;
            });
        });

        status.addEventListener('change', () => {
            selectIds.length = 0;
            checkboxes.forEach((checkbox) => {
                if (checkbox.checked) {
                    selectIds.push(checkbox.id.split('_')[1]);
                }
            });
            if (selectIds.length > 0) {
                axios.post('{{ route('admin.invoice.bulk.action') }}', {
                    ids: selectIds,
                    status: status.value
                }).then((response) => {
                    if (response.data.status === 'success') {
                        toastr.success(response.data.message, 'Success');
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    }
                });
            }
        });

        selectAll.addEventListener('click', () => {
            bulkAction.style.display = 'block';
        });
    </script>
@endpush