@extends('adminlte::page')

@section('content')
<style>
    .note-editor .note-editing-area .note-editable {
        color: #002B10;
    }
</style>
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Edit Club</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Affiliated Clubs</li>
                    <li class="breadcrumb-item">Our Clubs</li>
                    <li class="breadcrumb-item active">Edit Club</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <form id="edit_our_club_frm" action="{{ route('admin.updateOurClub', $club->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Edit Club</h3>
                </div>

                <div class="card-body">
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input type="text" name="title" id="title" class="form-control" value="{{ $club->title }}" >
                        <p id="titleEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea name="description" id="description" class="form-control summernote" >{{ $club->description }}</textarea>
                        <p id="descriptionEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="image">Image</label>
                        <input 
                            type="file" 
                            name="image" 
                            id="image_edit" 
                            class="form-control-file image" onchange="previewImage(event)">

                        <small class="text-muted">Allowed types: jpeg, png, jpg, gif, webp</small>
                        <!-- <img src="{{ asset('storage/'.$club->image) }}" alt="Image" width="100"> -->
                        <p id="imageEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                         <div class="mt-2 d-flex gap-2">
                            @if ($club->image)
                            <img src="{{ asset('storage/distribution/images/our_clubs_image/' . $club->image) }}" 
                                alt="Existing Image" class="img-fluid" style="max-width: 250px;">
                            @endif
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <img src="" id="image_preview_edit" class="img-fluid new-preview" style="display:none; max-width: 250px; border: 1px solid #ddd; border-radius: 6px; padding: 4px;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="status">Status</label>
                        <select name="status" id="status" class="form-control" required>
                            <option value="1" {{ $club->status == '1' ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ $club->status == '0' ? 'selected' : '' }}>Inactive</option>
                        </select>
                        <p id="statusEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary"><span>Update Club</span></button>
                </div>
            </div>
        </form>
    </div>
</section>

@stop


@section('js')
<script>
    $(document).ready(function() {
        const brandTextColors = ['#002B10', '#FFFFFF', '#E1F5E1', '#FFFEE0', '#CAE9F5', '#FFC201', '#000000', '#6B6A6A', '#EFEDE3'];
        const brandTextColorNames = ['Tolly Green', 'White', 'Light Green', 'Pastel Yellow', 'Light Blue', 'Gold', 'Black', 'Grey', 'Off White'];

        const summernoteConfig = {
            fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48'],
            colors: [brandTextColors],
            colorsName: [brandTextColorNames],
            colorButton: {
                foreColor: '#002B10',
                backColor: '#FFFFFF'
            },
            height: 250,
            callbacks: {
                onPaste: function (e) {
                    var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                    e.preventDefault();
                    document.execCommand('insertText', false, bufferText);
                }
            }
        };

        $('.summernote').summernote(summernoteConfig);


        $("#edit_our_club_frm").submit(function(event) {
            event.preventDefault();

            var submitForm = $(this);
            var submitBtn = submitForm.find('button[type="submit"]');

            $.ajax({
                url: submitForm.attr('action'),
                data: new FormData(submitForm[0]),
                type: 'POST',
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    submitBtn.attr("disabled", true).find('span').text('Updating...');
                    submitForm.find('.text-danger').text(''); // Clear previous error messages
                    submitForm.find('input').removeClass('is-invalid'); // Remove error styling
                },
                success: function(response) {
                    submitBtn.attr("disabled", false).find('span').text('Update Club');

                    if (response.status == 200) {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.success(response.msg);
                        
                        submitForm.trigger('reset');

                        setTimeout(function() {
                            window.location.href = "{{ route('admin.listOurClubs') }}";
                        }, 1000);

                    } else if (response.status == 422) {
                        // Handle validation errors
                        $.each(response.errors, function(key, value) {
                            $('#' + key + 'EditErr').text(value[0]); // Display validation error
                            $('[name="' + key + '"]').addClass('is-invalid'); // Highlight the invalid field
                        });
                    } else if (response.status == 500) {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.error(response.msg);
                    }
                },
                error: function(xhr) {
                    submitBtn.attr("disabled", false).find('span').text('Save');
                    alertify.set('notifier', 'position', 'top-right');
                    // alertify.error("An error occurred: " + xhr.responseText);
                }
            });
        });
    });

    function previewImage(event) {
        const output = document.getElementById('image_preview_edit');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.style.display = 'block';
    }
</script>

<!-- <script>
    document.getElementById("image").addEventListener("change", function(event) {
        const file = event.target.files[0];
        const preview = document.getElementById("imagePreview");

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = "block";
            };
            reader.readAsDataURL(file);
        } else {
            preview.src = "#";
            preview.style.display = "none";
        }
    });
</script> -->
@stop