@extends('layouts.app')

@section('filter-section')
    <x-filters.filter-box>
        <!-- MACHINE SELECT -->
        <div class="select-box d-flex py-2 px-lg-2 px-md-2 px-0 border-right-grey border-right-grey-sm-0">
            <p class="mb-0 pr-2 f-14 text-dark-grey d-flex align-items-center">Machine</p>
            <div class="select-status">
                <select class="form-control select-picker" name="machine_id" id="filter-machine" data-live-search="true">
                    <option value="all">@lang('app.all')</option>
                    @foreach ($machines as $machine)
                        <option value="{{ $machine->id }}" @selected(request('machine_id') == $machine->id)>{{ $machine->machine_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- TYPE SELECT -->
        <div class="select-box d-flex py-2 px-lg-2 px-md-2 px-0 border-right-grey border-right-grey-sm-0">
            <p class="mb-0 pr-2 f-14 text-dark-grey d-flex align-items-center">Expense Type</p>
            <div class="select-status">
                <select class="form-control select-picker" name="type" id="filter-type">
                    <option value="all">@lang('app.all')</option>
                    <option value="fuel" @selected(request('type') == 'fuel')>Fuel</option>
                    <option value="driver_salary" @selected(request('type') == 'driver_salary')>Driver Salary</option>
                    <option value="maintenance" @selected(request('type') == 'maintenance')>Maintenance / Repair</option>
                    <option value="spare_parts" @selected(request('type') == 'spare_parts')>Spare Parts</option>
                    <option value="insurance" @selected(request('type') == 'insurance')>Insurance</option>
                    <option value="other" @selected(request('type') == 'other')>Other</option>
                </select>
            </div>
        </div>

        <!-- RESET START -->
        <div class="select-box d-flex py-1 px-lg-2 px-md-2 px-0">
            <x-forms.button-secondary class="btn-xs d-none" id="reset-filters" icon="times-circle">
                @lang('app.clearFilters')
            </x-forms.button-secondary>
        </div>
    </x-filters.filter-box>
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="d-flex justify-content-between action-bar">
            <div id="table-actions" class="flex-grow-1 align-items-center">
                <x-forms.link-primary :link="route('machine-expenses.create')" class="mr-3 float-left openRightModal" icon="plus">
                    Log Expense
                </x-forms.link-primary>
            </div>
            <div>
                <x-cards.widget :title="'Total Expenses'" :value="global_currency_format($totalExpense)" icon="money-bill-wave" />
            </div>
        </div>

        <!-- Expenses Table Start -->
        <div class="d-flex flex-column w-tables rounded mt-3 bg-white p-4">
            <div class="table-responsive">
                <table class="table table-hover border-0 w-100">
                    <thead>
                        <tr>
                            <th>Machine</th>
                            <th>Expense Date</th>
                            <th>Expense Type</th>
                            <th>Amount</th>
                            <th>Description</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($expenses as $row)
                            <tr id="expense-row-{{ $row->id }}">
                                <td>
                                    <a href="{{ route('machines.show', $row->machine_id) }}" class="text-darkest-grey font-weight-bold">{{ $row->machine?->machine_name ?? 'Deleted Machine' }}</a>
                                </td>
                                <td>{{ $row->date ? \Carbon\Carbon::parse($row->date)->format(company()->date_format) : 'N/A' }}</td>
                                <td><span class="badge badge-secondary">{{ ucwords(str_replace('_', ' ', $row->type)) }}</span></td>
                                <td><span class="font-weight-bold text-danger">{{ global_currency_format($row->amount) }}</span></td>
                                <td>{{ $row->description ?? 'N/A' }}</td>
                                <td class="text-right">
                                    <div class="task_view">
                                        <a href="{{ route('machine-expenses.edit', $row->id) }}" class="taskView openRightModal mr-2">@lang('app.edit')</a>
                                        <a href="javascript:;" class="taskView delete-expense" data-id="{{ $row->id }}">@lang('app.delete')</a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-4">
                                    <x-cards.no-record icon="coins" message="No expense records found."></x-cards.no-record>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-end mt-3">
                {{ $expenses->links() }}
            </div>
        </div>
        <!-- Expenses Table End -->
    </div>
@endsection

@push('scripts')
    <script>
        $('#filter-machine, #filter-type').change(function() {
            applyFilters();
        });

        function applyFilters() {
            let machineId = $('#filter-machine').val();
            let type = $('#filter-type').val();
            let url = "{{ route('machine-expenses.index') }}?machine_id=" + machineId + "&type=" + type;
            window.location.href = url;
        }

        $('body').on('click', '.delete-expense', function() {
            var id = $(this).data('id');
            var url = "{{ route('machine-expenses.destroy', ':id') }}";
            url = url.replace(':id', id);

            Swal.fire({
                title: "@lang('messages.sweetAlertTitle')",
                text: "You will not be able to recover this expense record!",
                icon: 'warning',
                showCancelButton: true,
                focusConfirm: false,
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "@lang('app.cancel')",
                customClass: {
                    confirmButton: 'btn btn-primary mr-3',
                    cancelButton: 'btn btn-secondary'
                },
                showClass: {
                    popup: 'swal2-noanimation',
                    backdrop: 'swal2-noanimation'
                },
                buttonsStyling: false
            }).then((result) => {
                if (result.isConfirmed) {
                    $.easyAjax({
                        type: 'POST',
                        url: url,
                        data: {
                            '_token': '{{ csrf_token() }}',
                            '_method': 'DELETE'
                        },
                        success: function(response) {
                            if (response.status == "success") {
                                $('#expense-row-' + id).remove();
                            }
                        }
                    });
                }
            });
        });
    </script>
@endpush