@extends('admin.layout')

@section('content')

<!-- DataTable CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">

<style>
    .table-no-border {
        border: none;
    }

    .table-no-border th,
    .table-no-border td {
        border: none;
    }

    .table-responsive .dataTables_wrapper .dataTables_length select {
        padding: 8px 48px 8px 16px !important;
    }

    .btn-primary.submit-btn {
    background-color: #1e3a8a; /* A deep blue */
    border-color: #1e3a8a;
    color: #ffffff;
}

.btn-primary.submit-btn:hover {
    background-color: #1c357d;
    border-color: #1c357d;
}

</style>


<div class="container-fluid content-inner pb-0">
    <div class="page-header d-flex justify-content-between">
        <h1 class="page-title mb-0">Notification</h2>
    </div>
   
    <!-- Create Notification Form -->
    <div class="row justify-content-center mt-3">
        <div class="col-lg-6">
            <div class="card p-3">
                <h6 class="card-title">Create Notification</h6>
                <hr>
                <form action="{{ route('notification_post') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                        <div class="row">
                            <div class="col-lg-12">
                               <div class="form-group mb-3">
                                        <label for="banner_img" class="form-label">Choose Image</label>
                                        <input type="file" name="image" class="form-control custom-file-input"
                                            id="banner_img">
                                    </div>
                               <div class="form-group mb-3">
                                    <label for="notification_title" class="form-label">Notification Title</label>
                                    <input type="text" name="notification_title" class="form-control" id="notification_title" value="{{ old('notification_title') }}">
                                    @error('notification_title')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group mb-3">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea name="description" class="form-control" id="description" rows="3">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                               <div class="form-group mb-3">
    <label class="form-label">Notify Type</label>

    <select name="notify_type" id="notify_type" class="form-control">
        <option value="">Select Notify Type</option>
        <!-- <option value="category">Category</option> -->
        <option value="offer">Offer</option>
        <option value="task">Task</option>
    </select>
</div>

<div class="form-group mb-3" id="target_div" style="display:none;">
    <label class="form-label" id="target_label">Select</label>

    <select name="target_id" id="target_id" class="form-control">
        <option value="">Select</option>
    </select>
</div>

                                <div class="button-container mt-4">
                                    <button type="submit" class="btn btn-primary submit-btn"><i class="fa-regular fa-circle-check me-2"></i>Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
            </div>
        </div>
    </div>
    
    <!-- Notification Table -->
    <div class="row mt-3">
        <div class="col-lg-12">
            <h5>Notifications</h5>
            <div class="card p-2 mt-2">
                <div class="table-responsive mt-3">
                    <table class="table table-no-border" id="notificationTable">
                        <thead>
                            <tr>
                                <th scope="col">S/N</th>
                                <th scope="col">TITLE</th>
                                <th scope="col">DESCRIPTION</th>
                                 <th scope="col">IMAGE</th>
                                <th scope="col">CREATED DATE</th>
                                <th scope="col">ACTION</th>
                            </tr>
                        </thead>
                        @php
                        $sn = 1; // Initialize serial number
                      @endphp
                      <tbody>
                        @foreach ($notification as $notifi)
                          <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $notifi->title }}</td>
                            <td>{{ $notifi->description }}</td>
                             <td>
    @php
        $notificationImageUrl = null;

        $digitalOceanBaseUrl =
            'https://dstone.sfo3.digitaloceanspaces.com';

        if (!empty($notifi->image)) {

            $storedImage = ltrim(
                trim($notifi->image),
                '/'
            );

            /*
            |--------------------------------------------------------------------------
            | Already full URL
            |--------------------------------------------------------------------------
            */
            if (
                str_starts_with(
                    $storedImage,
                    'http://'
                ) ||
                str_starts_with(
                    $storedImage,
                    'https://'
                )
            ) {
                $notificationImageUrl =
                    $storedImage;

            /*
            |--------------------------------------------------------------------------
            | DigitalOcean paths
            |--------------------------------------------------------------------------
            */
            } elseif (
                str_starts_with(
                    $storedImage,
                    'advertisement/'
                ) ||
                str_starts_with(
                    $storedImage,
                    'icons/'
                )
            ) {
                /*
                |--------------------------------------------------------------------------
                | Encode spaces and special characters in filename
                |--------------------------------------------------------------------------
                */
                $encodedPath = collect(
                    explode('/', $storedImage)
                )->map(
                    fn ($part) => rawurlencode($part)
                )->implode('/');

                $notificationImageUrl =
                    rtrim(
                        $digitalOceanBaseUrl,
                        '/'
                    ) .
                    '/' .
                    $encodedPath;

            /*
            |--------------------------------------------------------------------------
            | Old local path
            |--------------------------------------------------------------------------
            */
            } else {
                $notificationImageUrl =
                    asset($storedImage);
            }
        }
    @endphp

    @if($notificationImageUrl)

        <img src="{{ $notificationImageUrl }}"
             class="preview-td-img"
             alt="Notification image"
             loading="lazy"
             onerror="
                this.style.display='none';
                this.nextElementSibling.style.display='inline';
             ">

        <span class="text-danger"
              style="display:none;">

            Image not found

        </span>

    @else

        <span class="text-muted">
            Null
        </span>

    @endif
</td>
                            <td>{{ $notifi->created_at->format('Y-m-d') }}</td>
        
                            <td>
                              <button type="button" data-bs-toggle="modal" data-bs-target="#deleteModal"
                                class="btn transparent-btn" data-user-id="{{ $notifi->id }}" onclick="setDeleteId(this)"><i
                                  class="fa-regular fa-trash-can delete-icon" data-bs-toggle="tooltip" data-bs-placement="top"
                                  data-bs-title="Delete"></i></button>
                            </td>
                          </tr>
                        @endforeach
                      </tbody>
                        <!--Delete Modal start-->

              <div class="modal fade zoom-in" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel"
              aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-body">
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="p-3">
                          <div class="text-center">
                            <img class="mb-3" src="{{ asset('/assets') }}/images/icons/delete-icon.svg">
                            <p class="my-4 are-you-sure"></p>
                            <p class="text-muted my-2 are-you-sure-subtext">Are you sure
                              want to Delete this?</p>
                          </div>
                          <form action="{{ route('delete_notification') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="delete_id" name="delete_id">
                            <div class="d-flex align-items-center mt-5 mb-3">
                              <button type="button" class="btn btn-light cancel-btn me-3"
                                data-bs-dismiss="modal">Cancel</button>
                              <button type="submit" class="btn btn-primary yes-btn">
                                <i class="fa-regular fa-circle-check me-2"></i>Yes,
                                Delete
                              </button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--Delete Modal Ends-->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<script>
$(document).ready(function () {

    // DataTable
    $('#notificationTable').DataTable();

    // Delete Modal
    window.setDeleteId = function(button) {
        let notificationId = $(button).data('user-id');
        $('#delete_id').val(notificationId);
    };

    // Notify Type Change
    $('#notify_type').on('change', function () {

    let type = $(this).val();

    // Empty
    if(type == ''){
        $('#target_div').hide();
        $('#target_id').html('<option value="">Select</option>');
        return;
    }

    // Task -> No Dropdown
    if(type == 'task'){
        $('#target_div').hide();
        $('#target_id').html('<option value="">Select</option>');
        return;
    }

    // Category / Offer only
    if(type == 'category'){
        $('#target_label').text('Select Category');
    }
    else if(type == 'offer'){
        $('#target_label').text('Select Business');
    }

    $.ajax({
        url: "{{ url('/get-notify-data') }}/" + type,
        type: "GET",
        dataType: "json",
        success: function(response){

            let html = '<option value="">Select</option>';

            $.each(response, function(index, item){

                if(type == 'category'){
                    html += '<option value="'+item.id+'">'+item.category_name+'</option>';
                }
                else if(type == 'offer'){
                    html += '<option value="'+item.id+'">'+item.business_name+'</option>';
                }

            });

            $('#target_id').html(html);
            $('#target_div').show();
        }
    });

});

});
</script>

@endsection