@extends('layouts/main-layout')
@section('custom-css')
<style>
    .error {
        color: red;
    }
</style>
<link rel='stylesheet' href='https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap.min.css'>
@endsection
@section('content')



<div class='container'>
    @if(Session::has('success'))

    <div class="alert alert-success">
         {{ Session::get('success') }}

    </div>

    @endif
    <h2>Campaign Lists </h2>
    <a href="{{route('campaign.add')}}">Add campaign</a>
    <table id='campaign-tables' class='table'>
        <thead>
            <tr>
                <th>no</th>
                <th>Campaign id</th>
                <th>Campaign Name</th>
                <th>Location</th>
                <th>Department</th>
                <th class="col-2">Action</th>
            </tr>
        </thead>
                <tbody>
            @foreach($Campaignsstore as $data)
            <tr>
                <td>{{$no++}}</td>
                <td>{{isset($data->campaign_id) ? $data->campaign_id : '' }}</td>
                <td>{{isset($data->campaign_name) ? $data->campaign_name : '' }}</td>
                <td>{{isset($data->location) ? $data->location : '' }}</td>
                <td>{{isset($data->department) ? $data->department : '' }}</td>
                <td><a href="{{route('campaign.delete',$data->id)}}">Delete</a>
                    <a href="{{route('campaign.edit',$data->id)}}">Edit</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    {{$Campaignsstore->render()}}
</div>
@endsection

@section('custom-js')

<script src='https://cdn.jsdelivr.net/npm/sweetalert2@10'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js'></script>
<!-- jQuery -->
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<!-- DataTables -->
<script src='https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js'></script>
<!-- DataTables Bootstrap -->
<script src='https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap.min.js'></script>
<!-- SweetAlert2 -->
<script src='https://cdn.jsdelivr.net/npm/sweetalert2@10'></script>
<script>
    function sweetAlertAjax(deleteUrl) {
        Swal.fire({
            title: 'Are you sure?',
            text: 'You won\'t be able to delete this!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: deleteUrl,
                    type: 'DELETE',
                    data: {
                        '_token': '{{ csrf_token() }}'
                    },
                    success: (response) => {
                        if (response.success == 'error') {
                            Swal.fire({
                                text: response.message,
                                icon: 'error',
                                button: 'Ok'
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                text: response.message,
                                icon: 'success',
                                button: 'Ok'
                            }).then(() => {
                                location.reload();
                            });
                        }
                    },
                    error: (xhr, status, error) => {
                        console.error(xhr.responseText);
                        Swal.fire({
                            text: 'An error occurred while processing your request.',
                            icon: 'error',
                            button: 'Ok'
                        });
                    }
                });
            }
        });
    }
</script>
@endsection