@extends('layouts.app')

@section('title', __('Project View'))

@push('pre_css')
    @include('panel.inc.filepond.css')
    @include('panel.inc.datatable.css')
    <style>
        .card-body{
            font-size: 18px;
        }
    </style>
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="page-pretitle">
                    {{ __('Projects Payments') }}
                </div>
                <h2 class="page-title">
                    {{ $campaign->title }}
                </h2>
            </div>

            <div class="col-auto ml-auto d-print-none">
                <div class="btn-list">
                    @if(\Gate::allows('campaigns-payments-add'))
                        <a href="javascript:void(0)" onclick="fetchModal({el:this})" data-modal="#paymentModal" data-modal-url="{{ route('panel.campaigns.payments.modal', $campaign->id) }}" class="btn btn-primary">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                            Add Payment
                        </a>
                    @endif
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            @include('panel.customers._customer-details', ['customer' => $campaign->customer, 'isMini' => true])
        </div>

        <div class="col-md-8">
            @include('panel.campaigns.pages._navigation', ['campaign' => $campaign])

            <div class="card">
                {!! $dataTable->table() !!}
            </div>
        </div>
    </div>

@stop

@push('script')
    @include('panel.inc.filepond.js')
    @include('panel.inc.datatable.js')
    {!! $dataTable->scripts() !!}

    <script !src="">
        @if(\Gate::allows('campaigns-payments-delete'))
        $(document).on('click', '.deleteModel', function(){
            let el = this;
            deletePopup({
                el: el,
                url: '{{ route('panel.campaigns.payments.delete', $campaign->id) }}',
                params:{
                    moduleID: $(el).data('model-id')
                },
                datatable: $('#payments-table').DataTable()
            });
        });
        @endif
    </script>
@endpush