@extends('layouts.app')
@section('title', $customer->name)

@push('css')
    @include('panel.inc.filepond.css')
    @include('panel.inc.datatable.css')
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="page-pretitle">
                    {{ ___('Customers') }}
                </div>
                <h2 class="page-title">
                    {{ $customer->name }}
                </h2>
            </div>

            <div class="col-auto ml-auto d-print-none">
                <div class="btn-list">
                    <a href="{{ route('panel.customers')}}" class="btn btn-primary">{{ __('Customers') }}</a>

                    @if(\Gate::allows('customers-manage-active'))
                        <a href="javascript:void(0)" class="btn btn-primary" onclick="fetchModal({el: this})" data-modal="#customerStatusModal" data-modal-url="{{ route('panel.customers.status.modal', $customer->id) }}">{{ __('Change Status') }}</a>
                    @endif

                    @if(\Gate::allows('customers-edit'))
                        <a href="{{ route('panel.customers.edit', $customer->id) }}" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
                            <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"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
                            Edit
                        </a>
                    @endif

                </div>
            </div>

        </div>
    </div>

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


    @if(\Gate::allows('campaigns'))
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <h2 class="page-title">
                    {{ __("Projects") }}
                </h2>
            </div>
            <!-- Page title actions -->

        </div>
    </div>

    <div class="row">
        <div class="card mb">
            {!! $campaignDatatable->table() !!}
        </div>
    </div>
    @endif
@stop

@push('script')
    @include('panel.inc.filepond.js')
    @include('panel.inc.datatable.js')

    @if(\Gate::allows('campaigns'))
        {!! $campaignDatatable->scripts() !!}
    @endif

    <script !src="">
        @can('campaigns-delete')
        $(document).on('click', '.deleteModel', function(){
            let el = this;
            deletePopup({
                el: el,
                url: '{{ route('panel.campaigns.delete') }}',
                params:{
                    moduleID: $(el).data('model-id')
                },
                datatable: $('#campaigns-table').DataTable()
            });
        });
        @endcan

        @if(\Gate::allows('campaigns'))
            $('#campaigns-table').on('preXhr.dt', function(e, settings, data){
                data.customerId = '{{ $customer->id }}';
            })
        @endif

        {{--@if(\Gate::allows('customers-manage-active'))
        $('.activeStatus').click(function(){
            let status = $(this).data('active');
            let el = this;
            $(el).btnloading();
            $.confirm({
                title: 'Are you sure?',
                content: '',
                type: 'red',
                buttons: {
                    close: function () {
                        $(el).btnreset();
                    },
                    Proceed: {
                        text: 'Proceed',
                        btnClass: 'btn-danger',
                        action: function(){
                            axios.post('{{ route('panel.customers.active', $customer->id) }}', {
                                status: status
                            }).then(function(response){
                                notify('success', response.data.message);
                                setTimeout(function(){
                                    location.reload();
                                }, 1000);
                            }).catch(function(e){
                                notify('error', e.response.data.message);
                                $(el).btnreset();
                            });
                        }
                    }
                }
            });
        });
        @endif--}}
    </script>

@endpush