@extends('layouts.app')

@section('title', 'Edit Program Frees')

@section('content')
    <nav class="mb-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">
            <li><a href="{{ url('dashboard') }}" class="hover:text-blue-600">Dashboard</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </li>
            <li><a href="{{ route('programFrees.index') }}" class="hover:text-blue-600">Program Frees</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </li>
            <li class="text-gray-900">Edit</li>
        </ol>
    </nav>

    <div class="bg-white p-4 rounded shadow mb-6"><h3 class="text-lg font-semibold mb-4">Edit Program Frees</h3>
        <form id="editRegPointForm" class="space-y-3"> @csrf @method('PUT')
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3 items-end">
                <div>
                    <label class="block text-xs font-medium text-gray-700"> Program Frees Name </label>
                    <input type="text" id="name" name="name"
                           class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500"
                           placeholder="Enter Program Frees name">
                    <div id="nameError" class="text-red-500 text-xs mt-1"></div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700">Donation Price</label>
                    <input type="number" name="price" id="price" step="0.01"
                           class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700">Donation Status</label>
                    <select name="status" id="status"
                            class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
            </div>
            <button type="submit" class="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600"> Update
            </button>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script> $(document).ready(function () {
            const regPointId = "{{ $id }}";
            $.ajax({
                url: `/programFrees/${regPointId}`, type: 'GET', success: function (res) {
                    if (res.success) {
                        $('#name').val(res.data.name);
                        $('#price').val(res.data.price);
                        $('#status').val(res.data.status);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: res.message || 'Unable to fetch Program Frees.'
                        });
                    }
                }, error: function (xhr) {
                    Swal.fire({icon: 'error', title: 'Error', text: 'Unable to fetch Program Frees data.'});
                }
            });
            $('#editRegPointForm').on('submit', function (e) {
                e.preventDefault();
                $('.text-red-500').text('');
                $('#name').removeClass('border-red-500');
                Swal.fire({
                    title: 'Updating Program Frees...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                $.ajax({
                    url: `/programFrees/${regPointId}`,
                    type: 'PUT',
                    data: $(this).serialize(),
                    success: function (res) {
                        Swal.close();
                        if (res.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: res.message || 'Program Frees updated successfully.',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                window.location.href = "{{ route('programFrees.index') }}";
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: res.message || 'Unable to update Program Frees.'
                            });
                        }
                    },
                    error: function (xhr) {
                        Swal.close();
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            if (errors) {
                                if (errors.name) {
                                    $('#name').addClass('border-red-500');
                                    $('#nameError').text(errors.name[0]);
                                }
                                let msg = Object.values(errors).map(arr => arr[0]).join('<br>');
                                Swal.fire({icon: 'warning', title: 'Validation Error', html: msg});
                            }
                            return;
                        }
                        let message = 'Something went wrong while updating the Program Frees.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        Swal.fire({icon: 'error', title: 'Error', text: message});
                    }
                });
            });
        });
    </script>
@endpush