@extends('layout.master') @section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />

<style>
    .table-responsive {
        overflow-x: visible !important;
    }

    .table-responsive>nav>.flex {
        display: flex !important;
        justify-content: center !important;
        /* Center align the pagination */
        margin-bottom: 20px !important;
        /* Add bottom margin */
    }

    .table-responsive>nav>.flex>span,
    .table-responsive>nav>.flex>a {
        background: #007bff !important;
        display: none !important;
    }

    .hidden>div>p {
        color: black !important;
    }

    .leading-5>svg {
        width: 20px !important;
        color: #007bff !important;
    }

    .leading-5 {
        color: #007bff !important;
    }

    th,
    td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    th {
        background-color: #f2f2f2;
        color: #333;
        text-align: left;
    }

    #delete-button {
        display: none;
        /* Initially hide the delete button */
    }

    nav>.flex {
        display: none !important;
    }
</style>

<div class="section-body">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header row">
                    <div class="d-flex justify-content-between align-items-center col-md-12 w-100">
                        <div>
                            <h4 class="m-0 p-0">All Notes</h4>
                        </div>

                        @can('note create')

                            <div>
                                <a href="{{ route('note.create') }}" class="btn btn-primary" style="
                                        display: inline-block;
                                        text-wrap: nowrap;
                                        padding: 10px 20px;
                                        background-color: #007bff;
                                        color: #fff;
                                        text-decoration: none;
                                        border-radius: 4px;
                                        font-size: 16px;
                                        font-weight: bold;
                                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); ">
                                    <i class="fas fa-plus" style="margin-right: 5px"></i>
                                    Create Note
                                </a>
                            </div>

                        @endcan

                    </div>
                    @if(Auth::user()->user_type == 'admin')
                        <form method="POST" action="{{ route('updateTime') }}" style="
                                width: 350px;
                                padding: 20px;
                                border: 1px solid #ddd;
                                border-radius: 8px;
                                background-color: #f9f9f9;
                                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                            ">
                            @csrf

                            <p style="
                                    font-size: 14px;
                                    color: #555;
                                    margin-bottom: 10px;
                                    text-align: center;
                                ">
                                Use 24-hour format
                            </p>

                            <div class="form-group" style="margin-bottom: 15px">
                                <label for="start" style="
                                        display: block;
                                        font-size: 14px;
                                        color: #333;
                                        margin-bottom: 5px;
                                    ">
                                    Start Time
                                </label>
                                <input type="number" name="start" id="start" class="form-control"
                                    value="{{ $noteTime->start ?? '' }}" style="
                                        width: 100%;
                                        padding: 10px;
                                        border: 1px solid #ccc;
                                        border-radius: 4px;
                                        font-size: 14px;
                                    " required />
                            </div>
                            <div class="form-group">
                                <label for="end" style="
                                        display: block;
                                        font-size: 14px;
                                        color: #333;
                                        margin-bottom: 5px;
                                    ">
                                    End Time
                                </label>
                                <input type="number" name="end" id="end" class="form-control"
                                    value="{{ $noteTime->end ?? '' }}" style="
                                        width: 100%;
                                        padding: 10px;
                                        border: 1px solid #ccc;
                                        border-radius: 4px;
                                        font-size: 14px;
                                    " required />
                            </div>
                            <button type="submit" class="btn btn-primary mt-3" style="
                                    width: 100%;
                                    padding: 10px;
                                    background-color: #007bff;
                                    color: #fff;
                                    border: none;
                                    border-radius: 4px;
                                    font-size: 14px;
                                    cursor: pointer;
                                ">
                                Save
                            </button>
                        </form>
                    @endif
                    <br />

                    <!-- <div class="col-md-6 d-flex align-items-center justify-content-end">
                        <input type="checkbox" id="expire" onchange="javascript:getExpire();">
                        <label for="expire" style="margin-left: 10px;margin-top:10px;"><b>Expired</b></label>
                    </div> -->
                </div>
                <div class="card-body">
                    <div class="table-responsive mb-5" id="">

                        <table class="table table-striped border border-collapse" style="width: 100%">
                            <thead>
                                <tr>
                                    <th class="wd-20p">
                                        <input type="checkbox" name="checkall" id="checkall" />
                                    </th>
                                    <th witdh="10%">ID</th>
                                    <th witdh="10%">User Name</th>
                                    <th witdh="10%">Date</th>
                                    <th witdh="20%">Action</th>
                                </tr>
                            </thead>
                            @forelse ($notes as $key => $note)
                                <tr>
                                    <td>
                                        <input type="checkbox" value="{{ $note->id }}" name="id[]" class="checkbox-item" />
                                    </td>
                                    <td>{{ $note->id }}</td>
                                    <td>
                                        {{ $note->user->fname ?? Null }}
                                        {{ $note->user->lname ?? Null }}
                                    </td>
                                    <td>{{ $note->created_at }}</td>
                                    <td>
                                        <div class="row">

                                            <!-- @can('note show')
                                                    <div class="col-md-3">
                                                        <a href="{{ route('note.show',$note->id) }}" class="btn btn-primary"><i class="fas fa-edit"></i></a>
                                                    </div>
                                                @endcan -->

                                            @can('note delete')
                                                <div class="col-md-3">
                                                    <form action="{{ route('note.destroy', $note->id) }}" method="POST"
                                                        id="delete-form-{{ $note->id }}">

                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="button" class="btn btn-sm btn-danger"
                                                            onclick="confirmDelete({{ $note->id }})">
                                                            Delete
                                                        </button>
                                                    </form>
                                                </div>
                                            @endcan

                                            @can('note edit')
                                                @if($note->expireNote == 0 || Auth::user()->user_type == 'admin')
                                                    <div class="col-md-3">
                                                        <a href="{{ route('note.edit', $note->id) }}" class="btn btn-primary"><i
                                                                class="fas fa-eye"></i></a>
                                                    </div>
                                                @endif
                                            @endcan


                                            @can('note expirelock')
                                                @if($note->expireNote == 1)
                                                    <div class="col-md-3">
                                                        <a href="" class="btn btn-warning">Expired<i class="fas fa-"></i></a>
                                                    </div>
                                                @endif
                                            @endcan




                                        </div>
                                    </td>
                                </tr>
                            @empty @endforelse
                        </table>

                        <div class="d-flex justify-content-center">
                            @if(
                                    isset($note) && $note instanceof
                                    \Illuminate\Pagination\LengthAwarePaginator &&
                                    $note->count() > 0
                                )
                                                            {{ $note->links() }}
                            @else @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function confirmDelete(noteId) {
            const form = document.getElementById("delete-form-" + noteId);
            if (!form) {
                console.error("Form not found for noteId:", noteId);
                return;
            }
            Swal.fire({
                title: "Are you sure?",
                text: "This action cannot be undone!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "Cancel",
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        }
    </script>
@endpush