@extends('layouts.app')

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <div class="container">
        <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-3">
            <div>
                <h1 class="page-title fw-bold fs-20 mb-0">Manage Campaign Accounts</h1>
            </div>

            <!-- Filter Form -->
            <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-end gap-3 flex-wrap">
                <div class="form-group">
                    <label for="start_date" class="fw-medium">Start Date:</label>
                    <input type="text" id="start_date_picker" name="start_date" class="form-control" placeholder="Select Start Date">
                </div>
                <div class="form-group">
                    <label for="end_date" class="fw-medium">End Date:</label>
                    <input type="text" id="end_date_picker" name="end_date" class="form-control" placeholder="Select End Date">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" id="filterButton">Filter</button>
                </div>
            </form>
        </div>
        <script>
            flatpickr("#start_date_picker", {
                defaultDate: "{{ request('start_date') ?? now()->format('Y-m-d') }}",
                dateFormat: "Y-m-d",
            });

            flatpickr("#end_date_picker", {
                defaultDate: "{{ request('end_date') ?? now()->format('Y-m-d') }}",
                dateFormat: "Y-m-d",
            });
        </script>

        <div class="d-flex justify-content-end my-4">
            <form action="{{ route('meta_ad_accounts.updateAdAccountCampaign', $a) }}" method="POST" id="updateForm">
                @csrf
                <button type="submit" class="btn btn-primary" id="updateButton">
                    Update Campaign Accounts
                </button>
            </form>
        </div>


        @if ($campaignAccounts->isNotEmpty())
            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card">
                        <div class="card-header">
                            <h5 class="card-title">Campaign Overview</h5>
                        </div>
                        <div class="card-body">
                            <!-- Chart Container (if needed) -->
                            <div id="chart" style="margin-bottom: 20px;"></div>

                            <!-- Table Container -->
                            <div class="table-responsive">
                                <table class="table text-nowrap">
                                    <thead>
                                        <tr>
                                            <th scope="col">Business Name</th>
                                            <th scope="col">Account Name</th>
                                            <th scope="col">Campaign Name</th>
                                            <th scope="col">Campaign Status</th>
                                            <th scope="col">Spend</th>
                                            <th scope="col">CPC</th>
                                            <th scope="col">CPM</th>
                                            <th scope="col">CTR</th>
                                            <th scope="col">Impressions</th>
                                            <th scope="col">Reach</th>
                                            <th scope="col">ATC Count</th>
                                            <th scope="col">ATC Spend</th>
                                            <th scope="col" width="120">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($campaignAccounts as $ca)
                                            <tr>
                                                <td>{{ $ca->metaBusiness->business_name }}</td>
                                                <td>{{ $ca->metaAdAccount->account_name }}</td>
                                                <td>{{ $ca->campaign_name }}</td>
                                                <td>
                                                    @if ($ca->campaign_status == 1)
                                                        <span class="badge bg-success">Active</span>
                                                    @else
                                                        <span class="badge bg-danger">Inactive</span>
                                                    @endif
                                                </td>
                                                <td>{{ $ca->total_spend }}</td>
                                                <td>{{ $ca->total_cpc }}</td>
                                                <td>{{ $ca->total_cpm }}</td>
                                                <td>{{ $ca->total_ctr }}</td>
                                                <td>{{ $ca->total_impressions }}</td>
                                                <td>{{ $ca->total_reach }}</td>
                                                <td>{{ $ca->total_add_to_cart_count }}</td>
                                                <td>{{ $ca->total_add_to_cart_spent }}</td>
                                                <td>
                                                    <form action="{{ route('meta_ad_accounts.destroy', $ca->id) }}"
                                                        method="POST" style="display:inline-block;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit"
                                                            class="btn btn-danger delete-account">Delete</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <!-- No Data Found Card -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card">
                        <div class="card-body">
                            <div class="alert alert-warning mb-0 text-center">
                                Tidak ada data didalam sini
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    @if (session('success'))
        <script>
            Swal.fire({
                title: 'Success!',
                text: '{{ session('success') }}',
                icon: 'success',
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    <!-- Modal for loading -->
    <div class="modal fade" id="loadingModal" tabindex="-1" aria-labelledby="loadingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <h5 class="mb-3">Please wait, data is updating...</h5>
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <script>
            document.getElementById('updateForm').addEventListener('submit', function(event) {
                event.preventDefault(); // Prevent the default form submission
                const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
                loadingModal.show(); // Show the loading modal

                // Use Fetch API for form submission
                fetch(this.action, {
                        method: 'POST',
                        body: new FormData(this)
                    })
                    .then(response => response.json())
                    .then(data => {
                        loadingModal.hide(); // Hide the loading modal
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Update Completed',
                                text: 'Campaign accounts have been successfully updated!',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Update Failed',
                                text: 'There was an issue updating the campaign accounts.',
                                confirmButtonText: 'OK'
                            });
                        }
                    })
                    .catch(error => {
                        loadingModal.hide(); // Hide the loading modal
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'An error occurred while updating the campaign accounts.',
                            confirmButtonText: 'OK'
                        });
                    });
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const startDateInput = document.getElementById('start_date');
                const endDateInput = document.getElementById('end_date');
                const filterButton = document.getElementById('filterButton');

                function validateDateRange() {
                    const startDate = new Date(startDateInput.value);
                    const endDate = new Date(endDateInput.value);

                    if (startDateInput.value && endDateInput.value && startDate <= endDate) {
                        filterButton.disabled = false;
                    } else {
                        filterButton.disabled = true;
                    }
                }

                startDateInput.addEventListener('change', validateDateRange);
                endDateInput.addEventListener('change', validateDateRange);
            });
        </script>
        <script>
            function editAccount(id, account_id, account_name, account_status) {
                const form = document.getElementById('editAccountForm');
                form.action = `/meta/business/update/${id}`;
                document.getElementById('edit_business_id').value = account_id;
                document.getElementById('edit_business_name').value = account_name;
                document.getElementById('edit_business_vertical').value = account_status;
                $('#editAccountModal').modal('show');
            }

            document.querySelectorAll('.delete-account').forEach(button => {
                button.addEventListener('click', function(event) {
                    event.preventDefault();
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "This account will be deleted!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            this.closest('form').submit();
                        }
                    });
                });
            });
        </script>
    @endpush


@endsection