@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-sm-12">
        <div class="page-title-box">
            <div class="row">
                <div class="col">
                    <h4 class="page-title">Invoices</h4>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Finance</a></li>
                        <li class="breadcrumb-item active">Invoices</li>
                    </ol>
                </div><!--end col-->
                <div class="col-auto align-self-center">
                    <a href="{{ route('finance.invoices.create') }}" class="btn btn-sm btn-outline-primary">
                        <i class="ti ti-plus me-2"></i>Create Invoice
                    </a>
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end page-title-box-->
    </div><!--end col-->
</div><!--end row-->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <table class="table table-bordered dt-responsive nowrap yajra-datatable" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                    <thead>
                        <tr>
                            <th>Invoice #</th>
                            <th>Client</th>
                            <th>Date</th>
                            <th>Due Date</th>
                            <th>Type</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(function () {
        let table = $('.yajra-datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('finance.invoices.index') }}",
            columns: [
                {data: 'invoice_number', name: 'invoice_number'},
                {data: 'client', name: 'client'},
                {data: 'invoice_date', name: 'invoice_date'},
                {data: 'due_date', name: 'due_date'},
                {data: 'document_type', name: 'document_type'},
                {data: 'total_amount', name: 'total_amount'},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        });

        $(document).on('click', '.btn-delete', function () {
            let id = $(this).data('id');
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ url('finance/invoices') }}/" + id,
                        type: 'DELETE',
                        data: { _token: "{{ csrf_token() }}" },
                        success: function (response) {
                            Swal.fire('Deleted!', response.message, 'success');
                            table.ajax.reload();
                        }
                    });
                }
            });
        });

        $(document).on('click', '.btn-duplicate-invoice', function () {
            let id = $(this).data('id');
            Swal.fire({
                title: 'Duplicate Invoice',
                text: 'A new draft invoice will be created as a copy.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Duplicate'
            }).then(result => {
                if (result.isConfirmed) {
                    $.post("{{ url('finance/invoices') }}/" + id + "/duplicate", { _token: "{{ csrf_token() }}" })
                        .done(res => {
                            if (res.status) {
                                Swal.fire('Duplicated!', 'New draft invoice created.', 'success')
                                    .then(() => window.location.href = '/finance/invoices/' + res.id);
                            }
                        });
                }
            });
        });

        $(document).on('click', '.btn-send-invoice', function () {
            let id = $(this).data('id');
            Swal.fire({
                title: 'Send Invoice by Email',
                text: 'Send this invoice to the client\'s email address?',
                icon: 'info',
                showCancelButton: true,
                confirmButtonText: 'Send Email'
            }).then(result => {
                if (result.isConfirmed) {
                    $.post("{{ url('finance/invoices') }}/" + id + "/send", { _token: "{{ csrf_token() }}" })
                        .done(res => Swal.fire('Sent!', res.message, 'success'))
                        .fail(() => Swal.fire('Error', 'Could not send email.', 'error'));
                }
            });
        });
    });
</script>
@endsection
