@extends('layouts.master')

@section('title', 'Programs Management')
@section('meta-tag')
    <meta name="description" content="Admin Backoffice for Program Management">
@endsection

@section('content')
    <div class="container">
        <!-- Buttons Add and Restore -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addProgram">Add Program</button>
            <button class="btn btn-primary" id="restoreBtn">Restore</button>
        </div>

        <!-- Filter Form -->
        <form action="{{ route('admin.program.index') }}" method="GET" class="mb-4">
            <div class="input-group">
                <input type="text" name="search" class="form-control" placeholder="Search by name or code"
                       value="{{ request('search') }}">
                <button class="btn btn-primary" type="submit">Filter</button>
            </div>
        </form>

        <!-- Card Container -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Programs List</h5>
            </div>
            <div class="card-body">
                <!-- Table Data -->
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle text-center">
                        <thead class="table-dark">
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($programs as $program)
                            <tr data-code-id="{{ $program->id }}">
                                <td>{{ $loop->iteration + $programs->firstItem() - 1 }}</td>
                                <td>{{ $program->name }}</td>
                                <td>{{ $program->kode }}</td>
                                <td>
                                    <button class="btn btn-sm btn-danger btn-delete">Delete</button>
                                    <button class="btn btn-sm btn-warning btn-edit" data-id="{{ $program->id }}">Edit</button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center">No programs found.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


        <!-- Pagination -->
        <div class="d-flex justify-content-center">
            {{ $programs->appends(['search' => request('search')])->links() }}
        </div>

        <!-- Add Program Modal -->
        <div class="modal fade" id="addProgram" tabindex="-1" aria-labelledby="addProgramModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addProgramModalLabel">Add New Program</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addProgramForm">
                            @csrf
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input type="text" name="name" id="name" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label for="kode" class="form-label">Code</label>
                                <input type="text" name="kode" id="kode" class="form-control" required>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-success" id="submitAddProgram">Submit</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Program Modal -->
        <div class="modal fade" id="editProgram" tabindex="-1" aria-labelledby="editProgramModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editProgramModalLabel">Edit Program</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="editProgramForm">
                            @csrf
                            <input type="hidden" name="id" id="edit-id">
                            <div class="mb-3">
                                <label for="edit-name" class="form-label">Name</label>
                                <input type="text" name="name" id="edit-name" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label for="edit-kode" class="form-label">Code</label>
                                <input type="text" name="kode" id="edit-kode" class="form-control" required>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-success" id="submitEditProgram">Update</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            // Add Program
            $('#submitAddProgram').on('click', function () {
                const formData = $('#addProgramForm').serialize();
                const url = "{{ route('admin.program.store') }}";

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            confirmButtonText: 'OK',
                            customClass: {
                                confirmButton: 'btn btn-success'
                            }
                        }).then(() => {
                            $('#addProgram').modal('hide');
                            location.reload();
                        });
                    },
                    error: function (xhr) {
                        const errorMessage = xhr.responseJSON?.message || 'Something went wrong';
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: errorMessage,
                            confirmButtonText: 'OK',
                            customClass: {
                                confirmButton: 'btn btn-danger'
                            }
                        });
                    }
                });
            });

            // Fetch Program Data for Edit
            $('.btn-edit').on('click', function () {
                const id = $(this).data('id');
                const url = `/sudut-panel/admin/program/${id}`;

                $.get(url, function (data) {
                    $('#edit-id').val(data.data.id);
                    $('#edit-name').val(data.data.name);
                    $('#edit-kode').val(data.data.kode);

                    $('#editProgram').modal('show');
                });
            });

            // Update Program
            $('#submitEditProgram').on('click', function () {
                const id = $('#edit-id').val();
                const formData = $('#editProgramForm').serialize();
                const url = `/sudut-panel/admin/program/${id}`;

                $.ajax({
                    url: url,
                    method: 'PUT',
                    data: formData,
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: response.message,
                            confirmButtonText: 'OK',
                            customClass: {
                                confirmButton: 'btn btn-success'
                            }
                        }).then(() => {
                            $('#editProgram').modal('hide');
                            location.reload();
                        });
                    },
                    error: function (xhr) {
                        const errorMessage = xhr.responseJSON?.message || 'Something went wrong';
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: errorMessage,
                            confirmButtonText: 'OK',
                            customClass: {
                                confirmButton: 'btn btn-danger'
                            }
                        });
                    }
                });
            });

            // Delete Program
            $('.btn-delete').on('click', function () {
                const codeId = $(this).closest('tr').data('code-id');
                const url = `/sudut-panel/admin/program/${codeId}`;

                Swal.fire({
                    title: 'Are you sure?',
                    text: 'This code will be deleted permanently.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel!',
                    customClass: {
                        confirmButton: 'btn btn-danger',
                        cancelButton: 'btn btn-secondary'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function (response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Deleted!',
                                    text: response.message,
                                    confirmButtonText: 'OK',
                                    customClass: {
                                        confirmButton: 'btn btn-success'
                                    }
                                }).then(() => {
                                    location.reload();
                                });
                            },
                            error: function (xhr) {
                                const errorMessage = xhr.responseJSON?.message || 'Something went wrong';
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: errorMessage,
                                    confirmButtonText: 'OK',
                                    customClass: {
                                        confirmButton: 'btn btn-danger'
                                    }
                                });
                            }
                        });
                    }
                });
            });

            $('#restoreBtn').on('click', function () {
                Swal.fire({
                    title: 'Are you sure?',
                    text: 'This action will restore all deleted data. Do you want to proceed?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, restore it!',
                    cancelButtonText: 'No, cancel!',
                    customClass: {
                        confirmButton: 'btn btn-primary',
                        cancelButton: 'btn btn-secondary'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Perform AJAX request to restore
                        const url = "{{ route('admin.program.restore') }}"; // Replace with your restore route
                        $.ajax({
                            url: url,
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function (response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Restored!',
                                    text: response.message,
                                    confirmButtonText: 'OK',
                                    customClass: {
                                        confirmButton: 'btn btn-success'
                                    }
                                }).then(() => {
                                    location.reload();
                                });
                            },
                            error: function (xhr) {
                                const errorMessage = xhr.responseJSON?.message || 'Something went wrong';
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: errorMessage,
                                    confirmButtonText: 'OK',
                                    customClass: {
                                        confirmButton: 'btn btn-danger'
                                    }
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush