@include('layout.header')
@include('layout.sidebar')

<style>
    .error{
        color: red;
    }    
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">GCMMF (Our cooperatives)</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('/dashboard') }}" class="text-muted text-hover-primary">Web CMS</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Pages</li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">GCMMF</li>
        </ul>
    </div>
</div>

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="accordion mt-5" id="GcmfAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#banner" aria-expanded="true">
                    Banner
                </button>
                </h2>
                <div id="banner" class="accordion-collapse collapse show" data-bs-parent="#GcmfAccordion">
                    <div class="accordion-body">
                        <form action="javascrip:void(0)" id="banner_form" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mt-3">
                                    <label for="logo" class="form-label">Logo<span class="text-danger"> * </span></label>
                                    <input type="hidden" id="logo_img_path" value="{{$banner_data->logo_img_path}}">
                                    <div class="form-group mb-5 mt-5">
                                        <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                            <div class="image-input-wrapper w-125px h-125px" style="background-image:url({{$banner_data->logo_img_path}})"></div>
                                            <label for="logo" class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" aria-label="Change topical" data-bs-original-title="Change topical" data-kt-initialized="1">
                                                <i class="ki-duotone ki-pencil fs-7">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span></i>
                                                <input type="file" name="logo" id="logo" accept=".png, .jpg, .jpeg">
                                                <input type="hidden" name="logo_remove">
                                            </label>
                                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" aria-label="Cancel topical" data-bs-original-title="Cancel topical" data-kt-initialized="1">
                                                <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i> 
                                            </span>
                                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" aria-label="Remove topical" data-bs-original-title="Remove topical" data-kt-initialized="1">
                                                <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>                
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mt-3">
                                    <label  for="banner" class="form-label">Banner Image<span class="text-danger"> * </span></label>
                                    <input type="hidden" id="banner_img_path" value="{{$banner_data->banner_img_path}}">
                                    <div class="form-group mb-5 mt-5">
                                        <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                            <div class="image-input-wrapper w-125px h-125px" style="background-image:url({{$banner_data->banner_img_path}})"></div>
                                            <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" aria-label="Change topical" data-bs-original-title="Change topical" data-kt-initialized="1">
                                                <i class="ki-duotone ki-pencil fs-7">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                                <input type="file" name="banner" accept=".png, .jpg, .jpeg">
                                                <input type="hidden" name="banner_remove">
                                            </label>
                                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" aria-label="Cancel topical" data-bs-original-title="Cancel topical" data-kt-initialized="1">
                                                <i class="ki-duotone ki-cross fs-2">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i> 
                                            </span>
                                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" aria-label="Remove topical" data-bs-original-title="Remove topical" data-kt-initialized="1">
                                                <i class="ki-duotone ki-cross fs-2">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>                
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="title">Title <span class="text-danger">*</span></label>
                                        <input type="text" name="title" value="{{$banner_data->title}}" id="title" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-12 mt-5">
                                    <div class="form-group">
                                        <label for="text">Text <span class="text-danger">*</span></label>
                                        <textarea name="text" value="" id="text" class="tiny">{!! html_entity_decode($banner_data->text, ENT_QUOTES, 'UTF-8') !!}</textarea>
                                        <span class="error tiny-err"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <button type="submit" class="save-banner btn btn-success float-end mt-5">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#turned50" aria-expanded="false">
                    2023 : GCMMF turned 50
                </button>
                </h2>
                <div id="turned50" class="accordion-collapse collapse" data-bs-parent="#GcmfAccordion">                
                    <div class="accordion-body">
                        <div class="row mb-5">                        
                            @forelse($turned_50_images as $image)
                                <div class="col-2 mb-3">
                                    <div class="card">
                                        <div class="position-relative">
                                            <img src="{{ $image->gcmmf_turned_50_image_path }}" class="card-img-top" alt="GCMMF Turned 50 Image" style="height: 150px; object-fit: cover;">
                                            <button type="button" class="btn btn-icon btn-danger btn-sm position-absolute top-0 end-0 m-2 delete-existing-image"  data-image-id="{{ $image->gcmmf_turned_50_image_id }}">
                                                <i class="ki-duotone ki-cross fs-2">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                
                            @endforelse
                        </div>
                        <form action="javascript:void(0)" id="turned50_images_form" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-12 mb-4">
                                    <div class="image-container">
                                        <div class="row" id="image-preview-container">
                                            <!-- Image previews will be added here dynamically -->
                                        </div>                            
                                    </div>
                                </div>                            
                                <div class="col-12">
                                    <button type="button" id="add-more-images" class="btn btn-primary">
                                        <i class="ki-duotone ki-plus fs-2"></i> {{ !empty($turned_50_images) && $turned_50_images->count() > 0 ? 'Add More Images' : 'Add Image' }}
                                    </button>
                                </div>
                                <div class="col-md-12">
                                    <button type="submit" id="save-turned-50-images" class="btn btn-success float-end mt-5">Save Images</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#discoverAll" aria-expanded="false">
                    Discover all about GCMMF
                </button>
                </h2>
                <div id="discoverAll" class="accordion-collapse collapse" data-bs-parent="#GcmfAccordion">
                <div class="accordion-body">
                    <form action="javascrip:void(0)" id="discover_all_form" enctype="multipart/form-data">
                            @csrf
                        <div class="row">
                            <div class="col-md-12 mt-5">
                                <div class="form-group">
                                    <label for="text">Description <span class="text-danger">*</span></label>
                                    <textarea name="description" id="description" class="tiny">{!! html_entity_decode($description_data->description) !!}</textarea>
                                    <span class="error tiny-err"></span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-success float-end mt-5 save-description">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#memberUnion" aria-expanded="false">
                        Our Member Union
                    </button>
                </h2>
                <div id="memberUnion" class="accordion-collapse collapse" data-bs-parent="#GcmfAccordion">                    
                    <div class="accordion-body">
                        <div class="row">
                            @for($i = 0; $i < 2; $i++)
                                @php
                                    $button = isset($member_union_buttons[$i]) ? $member_union_buttons[$i] : null;
                                @endphp
                                <div class="col-md-6">
                                    <form class="member-union-button-form" action="javascript:void(0)" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="gcmmf_member_union_button_id" class="button-id" value="{{ $button ? $button->gcmmf_member_union_button_id : '' }}">
                                        <div class="card card-xl-stretch mb-xl-8">                                            <div class="card-header pt-0 d-flex justify-content-center">
                                                <h3 class="card-title">Button {{$i+1}}</h3>
                                            </div>
                                            <div class="card-body pt-5">                                                <div class="mb-3 mt-3">
                                                    <label for="button_text_{{$i}}">Button Text <span class="text-danger">*</span></label>
                                                    <input type="text" name="button_text" id="button_text_{{$i}}" class="form-control" placeholder="Enter Button Text" value="{{ $button ? $button->button_text : '' }}">
                                                </div>                                                <div class="mb-3">   
                                                    <label for="button_file_{{$i}}">
                                                        Upload PDF @if(!($button && $button->gcmmf_member_union_button_id))<span class="text-danger">*</span>@endif
                                                    </label>
                                                    <div class="d-flex flex-column gap-2">
                                                        <input type="file" name="button_file" id="button_file_{{$i}}" accept=".pdf" class="form-control-file">
                                                        @if($button && $button->button_link)
                                                            <div class="pdf-preview">
                                                                <a href="{{ $button->button_link }}" class="btn btn-sm btn-light-primary" target="_blank">
                                                                    <i class="ki-duotone ki-document fs-2">
                                                                        <span class="path1"></span>
                                                                        <span class="path2"></span>
                                                                    </i>
                                                                    View Current PDF
                                                                </a>
                                                                <small class="text-muted d-block mt-1">Upload a new file to replace the current PDF</small>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="error-container"></div>
                                            </div>
                                            <div class="card-footer d-grid gap-2">
                                                <button type="submit" class="btn btn-success save-button">Save</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            @endfor
                        </div>
                        

                        <div class="row">
                            <div class="col-md-12">
                                <div class="card card-xl-stretch mb-xl-8">
                                    <div class="card-header pt-0">
                                        <div class="d-flex justify-content-center">
                                            <h3 class="card-title">Member Unions</h3>
                                        </div>
                                        <div class="card-toolbar">
                                            <button class="btn btn-success btn-sm float-end" data-bs-toggle="modal" data-bs-target="#addMemberModal">Add Member</button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-row-bordered gy-5 gs-7">
                                                <thead>
                                                    <tr>
                                                        <th>Sr No.</th>
                                                        <th>Member Union</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>                                                @if (!empty($member_union_data) && $member_union_data->count())
                                                        @foreach ($member_union_data as $key => $member)
                                                            <tr>
                                                                <td>{{ $key + 1 }}</td>
                                                                <td>{{ $member->gcmmf_member_union }}</td>
                                                                <td>
                                                                    <button title="Edit" class="btn btn-primary btn-sm edit-member-union" data-gcmmf-union-member-id="{{ $member->gcmmf_member_union_id }}" data-member-name="{{ $member->gcmmf_member_union }}">
                                                                        <i class="ki-duotone ki-notepad-edit fs-1">
                                                                            <span class="path1"></span>
                                                                            <span class="path2"></span>
                                                                        </i>
                                                                    </button>
                                                                    <button title="Delete" class="btn btn-danger btn-sm delete-member-union" data-gcmmf-union-member-id="{{ $member->gcmmf_member_union_id }}">
                                                                        <i class="ki-duotone ki-trash fs-1">
                                                                            <span class="path1"></span>
                                                                            <span class="path2"></span>
                                                                        </i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <tr>
                                                            <td colspan="3" class="text-center">No Member Unions available.</td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            
            <div class="accordion-item">
                <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#spotUs" aria-expanded="false">
                    Spot us in the news
                </button>
                </h2>
                <div id="spotUs" class="accordion-collapse collapse" data-bs-parent="#GcmfAccordion">
                <div class="accordion-body">
                    <form action="javascrip:void(0)" id="news_form" enctype="multipart/form-data">
                            @csrf
                        <div class="row">
                            <div class="col-md-12">
                                @if (!empty($news_data) && $news_data->count())
                                    <select name="news_ids[]" class="form-select" multiple data-control="select2" data-placeholder="Select News">
                                        @foreach ($news_data as $news)
                                            <option value="{{ $news->id }}">{{ $news->news_description }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <p>No news available.</p>
                                @endif
                            </div>

                            <div class="col-md-12">
                                <button type="submit" class="btn btn-success float-end mt-5 save-news">Save</button>
                            </div>
                        </div>
                    </form>                </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accolades" aria-expanded="false">
                        Accolades
                    </button>
                </h2>
                <div id="accolades" class="accordion-collapse collapse" data-bs-parent="#GcmfAccordion">
                    <div class="accordion-body">
                        <div class="card card-xl-stretch mb-xl-8">
                            <div class="card-header pt-0">
                                <div></div>
                                <div class="card-toolbar d-flex justify-content-end">
                                    <button type="button" class="btn btn-success btn-sm" id="addAccoladeBtn" data-bs-toggle="modal" data-bs-target="#accoladeModal">
                                        Add Accolade
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-row-bordered gy-5 gs-7">
                                        <thead>
                                            <tr class="fw-bold fs-6 text-gray-800">
                                                <th>Sr No.</th>
                                                <th>Image</th>
                                                <th>Title</th>
                                                <th>Description</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="accoladesTableBody">
                                            @if (!empty($accolades) && $accolades->count())
                                                @foreach ($accolades as $key => $accolade)
                                                    <tr>
                                                        <td>{{ $key + 1 }}</td>
                                                        <td>
                                                            <img src="{{ $accolade->image_path }}" alt="Accolade Image" 
                                                                class="w-50px h-50px object-fit-cover rounded">
                                                        </td>
                                                        <td>{{ $accolade->title }}</td>
                                                        <td>{!! Str::limit(strip_tags($accolade->description), 100) !!}</td>
                                                        <td>
                                                            <button title="Edit" class="btn btn-primary btn-sm edit-accolade" 
                                                                    data-accolade-id="{{ $accolade->accolade_id }}">
                                                                <i class="ki-duotone ki-notepad-edit fs-1">
                                                                    <span class="path1"></span>
                                                                    <span class="path2"></span>
                                                                </i>
                                                            </button>
                                                            <button title="Delete" class="btn btn-danger btn-sm delete-accolade" 
                                                                    data-accolade-id="{{ $accolade->accolade_id }}">
                                                                <i class="ki-duotone ki-trash fs-1">
                                                                    <span class="path1"></span>
                                                                    <span class="path2"></span>
                                                                </i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td colspan="5" class="text-center">No accolades available.</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#awards" aria-expanded="false">
                        Awards
                    </button>
                </h2>
                <div id="awards" class="accordion-collapse collapse" data-bs-parent="#GcmfAccordion">
                    <div class="accordion-body">
                        <div class="card card-xl-stretch mb-xl-8">
                            <div class="card-header pt-0">
                                <div></div>
                                <div class="card-toolbar d-flex justify-content-end">
                                    <button type="button" class="btn btn-success btn-sm" id="addAwardBtn" data-bs-toggle="modal" data-bs-target="#addAwardModal">
                                        Add Award
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-row-bordered gy-5 gs-7">
                                        <thead>
                                            <tr class="fw-bold fs-6 text-gray-800">
                                                <th>Sr No.</th>
                                                <th>Image</th>
                                                <th>Title</th>
                                                <th>Description</th>
                                                <th>Year Range</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>                                        <tbody id="awardsTableBody">
                                            @if(count($awards) > 0)
                                                @foreach($awards as $key => $award)
                                                    <tr>
                                                        <td>{{ $key + 1 }}</td>
                                                        <td>
                                                            <img src="{{ $award->image_path }}" alt="{{ $award->title }}" 
                                                                class="w-50px h-50px object-fit-cover rounded">
                                                        </td>
                                                        <td>{{ $award->title }}</td>
                                                        <td>{!! Str::limit(strip_tags($award->description), 100) !!}</td>
                                                        <td>{{ $award->award_year_range }}</td>
                                                        <td>                                                            <button title="Edit" class="btn btn-primary btn-sm edit-award" 
                                                                    data-award-id="{{ $award->award_id }}">
                                                                <i class="ki-duotone ki-notepad-edit fs-1">
                                                                    <span class="path1"></span>
                                                                    <span class="path2"></span>
                                                                </i>
                                                            </button>
                                                            <button title="Delete" class="btn btn-danger btn-sm delete-award" 
                                                                    data-award-id="{{ $award->award_id }}">
                                                                <i class="ki-duotone ki-trash fs-1">
                                                                    <span class="path1"></span>
                                                                    <span class="path2"></span>
                                                                </i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td colspan="6" class="text-center">No awards found.</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Member Union Modal -->
<div class="modal fade" id="addMemberModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Add Member Union</h2>
                <button id="closeMemberUnionModal" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </button>
            </div>
            <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                <form id="memberUnionForm" class="form" action="javascript:void(0);" novalidate>
                    @csrf
                    <div id="memberInputContainer">
                        <div class="input-field-container">
                            <div class="input-group mb-2">
                                <input type="text" name="member_unions[0]" id="member_union_0" 
                                       class="form-control member-union-input" placeholder="Enter Member Union" required
                                       data-msg="Please enter a member union name" data-msg-required="Please enter a member union name">
                                <button type="button" class="btn btn-success btn-add" title="Add">
                                    <i class="ki-duotone ki-plus fs-2"></i>
                                </button>
                            </div>
                            <div class="error-container mb-2"></div>
                        </div>
                    </div>
                    <div class="text-center pt-15">
                        <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
                        <button type="submit" class="btn btn-success save-button">
                            <span class="indicator-label">Save</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Edit Member Union Modal -->
<div class="modal fade" id="editMemberModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Edit Member Union</h2>
                <button id="closeEditMemberModal" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </button>
            </div>
            <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                <form id="editMemberUnionForm" class="form" action="javascript:void(0);" novalidate>
                    @csrf
                    <input type="hidden" id="edit_member_id" name="member_id">
                    <div class="mb-3">
                        <input type="text" name="member_union" class="form-control edit-member-union-input" placeholder="Enter Member Union" required>
                    </div>
                    <div class="error-container mb-2"></div>
                    <div class="text-center pt-15">
                        <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
                        <button type="submit" class="btn btn-success update-button">
                            <span class="indicator-label">Update</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Accolade Modal -->
<div class="modal fade" id="accoladeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <form action="javascript:void(0)" id="accolades_form" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h2 id="accoladeModalTitle">Add Accolade</h2>
                    <button type="button" id="closeAccoladeModal" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-1">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </button>
                </div>
                <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                    <input type="hidden" name="accolade_id" id="accolade_id">
                    <div class="row">
                        <div class="col-md-12 mb-5">
                            <div class="form-group">
                                <label for="accolade_image">Image <span class="text-danger image-asterisk">*</span></label>
                                <div class="form-group mb-5 mt-2">
                                    <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                        <div class="image-input-wrapper w-125px h-125px" id="accolade_image_preview"></div>
                                        <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change">
                                            <i class="ki-duotone ki-pencil fs-7">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                            </i>
                                            <input type="file" name="image" id="accolade_image" accept=".png, .jpg, .jpeg">
                                            <input type="hidden" name="image_remove">
                                        </label>
                                        <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel">
                                            <i class="ki-duotone ki-cross fs-2">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                            </i>
                                        </span>
                                        <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove">
                                            <i class="ki-duotone ki-cross fs-2">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                            </i>
                                        </span>
                                    </div>
                                    <p class="form-text text-muted">Allowed file types: png, jpg, jpeg.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="accolade_title">Title <span class="text-danger">*</span></label>
                                <input type="text" name="title" id="accolade_title" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12 mt-5">
                            <div class="form-group">
                                <label for="accolade_description">Description <span class="text-danger">*</span></label>
                                <textarea name="description" id="accolade_description" class="form-control" rows="5"></textarea>
                                <span class="error tiny-err"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success" id="save-accolade">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Award Modal -->
<div class="modal fade" id="addAwardModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Add Award</h2>
                <button id="closeAddAwardModal" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </button>
            </div>
            <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                <form id="awardForm" class="form" action="javascript:void(0);" novalidate>
                    @csrf
                    <input type="hidden" name="award_id" id="award_id">
                    <div class="mb-3">
                        <div class="form-group">
                            <label for="award_image">Image <span class="text-danger">*</span></label>
                            <div class="form-group mb-5 mt-2">
                                <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                    <div class="image-input-wrapper w-125px h-125px" id="award_image_preview"></div>
                                    <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change">
                                        <i class="ki-duotone ki-pencil fs-7">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                        <input type="file" name="image" id="award_image" accept=".png, .jpg, .jpeg">
                                        <input type="hidden" name="image_remove">
                                    </label>
                                    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel">
                                        <i class="ki-duotone ki-cross fs-2">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove">
                                        <i class="ki-duotone ki-cross fs-2">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                </div>
                                <p class="form-text text-muted">Allowed file types: png, jpg, jpeg.</p>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="award_title">Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" id="award_title" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="award_description">Description <span class="text-danger">*</span></label>
                        <textarea name="description" id="award_description" class="form-control" rows="3" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="award_year_range">Year Range <span class="text-danger">*</span></label>
                        <select name="award_year_range_master_id" id="award_year_range" class="form-select">
                            <option value="">Select Year Range</option>
                            @foreach($award_year_ranges as $year_range)
                                <option value="{{ $year_range->award_year_range_master_id }}">{{ $year_range->award_year_range }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="text-center pt-15">
                        <button type="reset" id="discard-award" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
                        <button type="submit" id="save-award" class="btn btn-success">
                            <span class="indicator-label">Save</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@include('layout.footer')

<script>
    // Add custom validation methods for file extension and size
    $.validator.addMethod('extension', function(value, element, param) {
        param = typeof param === 'string' ? param.replace(/,/g, '|') : 'pdf';
        return this.optional(element) || value.match(new RegExp('\\.(' + param + ')$', 'i'));
    }, 'Please upload file with valid extension.');

    $.validator.addMethod('filesize', function(value, element, param) {
        return this.optional(element) || (element.files[0]?.size <= param);
    }, 'File size must not exceed {0} bytes');

    $.validator.addMethod('acceptedImageExtension', function(value, element) {
        return this.optional(element) || /\.(jpg|jpeg|png)$/i.test(value);
    }, 'Please upload an image file (jpg, jpeg, or png)');

    $("#banner_form").validate({
        debug: true,
        ignore: [],
        rules: {
            title: {
                required: true
            },
            text: {
                required: true
            },
            logo: {
                required: function (element) {
                    return $('#logo_img_path').val() === '1';
                }
            },
            banner: {
                required: function (element) {
                    return $('#banner_img_path').val() === '1';
                }
            },
            button_text: {
                required: true,
                remote: {
                    url: "{{ url('check-button-text') }}",
                    type: "post",
                    data: {
                        button_text: function() {
                            return $("#button_text").val();
                        },
                        _token: "{{ csrf_token() }}"
                    }
                }
            },
            button_link: {
                required: true,
                extension: "pdf",
                filesize: 5242880 // 5MB in bytes
            }
        },
        messages: {
            button_text: {
                required: "Please enter button text",
                remote: "This button text already exists"
            },
            button_link: {
                required: "Please select a PDF file",
                extension: "Please upload a PDF file only",
                filesize: "File size must not exceed 5MB"
            }
        },
        errorPlacement: function (error, element) {
            if (element.hasClass("tiny")) {
                element.parent().find('.tiny-err').html(error)
            } else if(element.attr('name') === 'image'){
                error.insertAfter(element.closest('.image-input')).css('display', 'block');
            }
             else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form){
            const formData = new FormData(form);

            $.ajax({
                url: 'Gcmmf/save-banner',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function(){
                    $('.save-banner').html('Saving...').removeClass('btn-success').addClass('btn-secondary').attr('disabled', true);
                },
                success: function (response) {
                    Swal.fire({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    });
                },
                error: function (xhr) {
                   
                    if (xhr.responseJSON.msg == undefined) {
                        Swal.fire({
                            title: "Error",
                            text: "An Undefined error occured.",
                            icon: "error"
                        });
                    }else{
                        Swal.fire({
                            title: xhr.responseJSON.msg,
                            text: JSON.stringify(xhr.responseJSON.errors),
                            icon: "error"
                        });
                    }
                    
                },
                complete: function(){
                    $('.save-banner').html('Save').removeClass('btn-secondary').addClass('btn-success').attr('disabled', false);
                }
            });
        }
    });    
    

    $("#discover_all_form").validate({
        debug: true,
        ignore: [],
        rules: {
            description: {
                required: true
            }
        },
        errorPlacement: function (error, element) {
            if (element.hasClass("tiny")) {
                element.parent().find('.tiny-err').html(error)
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form){
            const formData = new FormData(form);

            $.ajax({
                url: 'Gcmmf/save-description',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function(){
                    $('.save-description').html('Saving...').removeClass('btn-success').addClass('btn-secondary').attr('disabled', true);
                },
                success: function (response) {
                    Swal.fire({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    });
                },
                error: function (xhr) {
                   
                    if (xhr.responseJSON.msg == undefined) {
                        Swal.fire({
                            title: "Error",
                            text: "An Undefined error occured.",
                            icon: "error"
                        });
                    }else{
                        Swal.fire({
                            title: xhr.responseJSON.msg,
                            text: JSON.stringify(xhr.responseJSON.errors),
                            icon: "error"
                        });
                    }
                    
                },
                complete: function(){
                    $('.save-description').html('Save').removeClass('btn-secondary').addClass('btn-success').attr('disabled', false);
                }
            });
        }
    });

    $("#news_form").validate({
        ignore: [],
        rules: {
            'news_ids[]': {
                required: true
            }
        },
        errorPlacement: function (error, element) {
            if (element.hasClass("select2-hidden-accessible")) {
                error.insertAfter(element.next('.select2'));
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form){
            const formData = new FormData(form);

            console.log(formData)
            $.ajax({
                url: 'Gcmmf/save-news',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function(){
                    $('.save-news').html('Saving...').removeClass('btn-success').addClass('btn-secondary').attr('disabled', true);
                },
                success: function (response) {
                    Swal.fire({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    });
                },
                error: function (xhr) {
                    if (xhr.responseJSON.msg == undefined) {
                        Swal.fire({
                            title: "Error",
                            text: "An Undefined error occured.",
                            icon: "error"
                        });
                    }else{
                        Swal.fire({
                            title: xhr.responseJSON.msg,
                            text: JSON.stringify(xhr.responseJSON.errors),
                            icon: "error"
                        });
                    }
                },
                complete: function(){
                    $('.save-news').html('Save').removeClass('btn-secondary').addClass('btn-success').attr('disabled', false);
                }
            });
        }
    });    
    
    // Handle multiple image upload for turned50 section    $(document).ready(function() {
        let imageCounter = 0;

        // Handle delete existing image
        $(document).on("click", ".delete-existing-image", function() {
            const imageId = $(this).data("image-id");
            const imageCard = $(this).closest(".col-2");

            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel!",
                reverseButtons: true            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading message
                    Swal.fire({
                        title: 'Deleting...',
                        text: 'Please wait while the image is being deleted',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        allowEnterKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: 'Gcmmf/delete-turned50-image/' + imageId,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },                        
                        success: function(response) {
                            imageCard.remove();
                            // Check if this was the last existing image
                            const remainingImages = $('.delete-existing-image').length;
                            const previewImages = $("#image-preview-container").children().length;
                            if (remainingImages === 0 && previewImages === 0) {
                                $('#add-more-images').html(`<i class="ki-duotone ki-plus fs-2"></i> Add Image`);
                            }
                            Swal.fire({
                                title: "Deleted!",
                                text: "Image has been deleted.",
                                icon: "success"
                            });
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: "Error!",
                                text: "Failed to delete image.",
                                icon: "error"
                            });
                        }
                    });
                }
            });
        });

        // Disable save button initially
        $('#save-turned-50-images').prop('disabled', true);

        // Function to check if form is valid
        function validateForm() {
            const imageCount = $("#image-preview-container").children().length;
            $('#save-turned-50-images').prop('disabled', imageCount === 0);
        }

        // Function to create image preview
        function createImagePreview(file, inputId) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const previewHtml = `
                    <div class="col-2 mb-3">
                        <div class="card">
                            <div class="position-relative">
                                <img src="${e.target.result}" class="card-img-top" alt="Preview" style="height: 150px; object-fit: cover;">
                                <button type="button" class="btn btn-icon btn-danger btn-sm position-absolute top-0 end-0 m-2 remove-image" 
                                        data-input-id="${inputId}">
                                    <i class="ki-duotone ki-cross fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                </button>
                            </div>
                            <div class="card-body p-2">
                                <input type="file" name="turned_50_images[]" id="${inputId}" class="d-none">
                                <button type="button" class="btn btn-sm btn-light w-100 change-image" data-input-id="${inputId}">
                                    Change Image
                                </button>
                            </div>
                        </div>
                    </div>`;
                
                $("#image-preview-container").append(previewHtml);
                updateAddButtonText();
                validateForm();
            }
            reader.readAsDataURL(file);
        }

        // Add more images button click handler
        $("#add-more-images").click(function() {
            const tempInput = $(`<input type="file" multiple style="display: none;">`);
            $("body").append(tempInput);
            tempInput.click();

            tempInput.on("change", function(e) {
                if (this.files && this.files.length > 0) {
                    Array.from(this.files).forEach(file => {
                        const inputId = `image-${++imageCounter}`;
                        createImagePreview(file, inputId);
                        setTimeout(() => {
                            const dataTransfer = new DataTransfer();
                            dataTransfer.items.add(file);
                            $(`#${inputId}`).prop('files', dataTransfer.files);
                        }, 100);
                    });
                }
                $(this).remove();
            });
        });

        // Function to update add button text
        function updateAddButtonText() {
            const imageCount = $("#image-preview-container").children().length;
            const $addButton = $("#add-more-images");
            const buttonText = imageCount > 0 ? "Add More Images" : "Add Image";
            $addButton.html(`<i class="ki-duotone ki-plus fs-2"></i> ${buttonText}`);
        }

        // Handle remove image
        $(document).on("click", ".remove-image", function() {
            $(this).closest(".col-2").remove();
            updateAddButtonText();
            validateForm();
        });

        // Handle change image
        $(document).on("click", ".change-image", function() {
            const inputId = $(this).data("input-id");
            $(`#${inputId}`).click();
        });        // Handle file change for existing preview cards
        $(document).on("change", "input[type='file'][name='turned_50_images[]']", function(e) {
            if (this.files && this.files[0]) {
                const inputId = $(this).attr("id");
                const card = $(this).closest(".card");
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    card.find("img").attr("src", e.target.result);
                }
                
                reader.readAsDataURL(this.files[0]);
            }
        });

        // Member Union Button Form Validation and Submission
        $(".member-union-button-form").each(function(index) {
            $(this).validate({
                ignore: [],
                rules: {
                    button_text: {
                        required: true,
                        maxlength: 200
                    },                    
                    button_file: {
                        required: function(element) {
                            // Only required if gcmmf_member_union_button_id is empty (new button)
                            return !$(element).closest('form').find('input[name="gcmmf_member_union_button_id"]').val();
                        },
                        extension: "pdf",
                        filesize: 10485760 // 10MB in bytes
                    }
                },
                messages: {
                    button_text: {
                        required: "Please enter button text",
                        maxlength: "Button text cannot exceed 200 characters"
                    },
                    button_file: {
                        required: "Please upload a PDF file",
                        extension: "Please upload only PDF files",
                        filesize: "File size must be less than 10MB"
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.closest('.card-body').find('.error-container'));
                },
                submitHandler: function(form) {
                    const $form = $(form);
                    const $submitBtn = $form.find('.save-button');
                    const formData = new FormData(form);

                    $.ajax({
                        url: 'Gcmmf/save-member-union-button',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function() {
                            $submitBtn.html('Saving...').attr('disabled', true);
                        },
                        success: function(response) {                            
                            if (response.status === 200) {
                                Swal.fire({
                                    title: "Success!",
                                    text: response.msg,
                                    icon: "success"
                                });
                                
                                // Store the button ID for future updates
                                if (response.data && response.data.id) {
                                    // Find the container and update the hidden input
                                    $form.find('input[name="gcmmf_member_union_button_id"]').val(response.data.id);
                                }
                            }
                        },
                        error: function(xhr) {
                            let errorMessage = "An error occurred while saving the button.";
                            if (xhr.responseJSON) {
                                if (xhr.responseJSON.errors) {
                                    errorMessage = Object.values(xhr.responseJSON.errors).flat().join("\n");
                                } else if (xhr.responseJSON.msg) {
                                    errorMessage = xhr.responseJSON.msg;
                                }
                            }
                            
                            Swal.fire({
                                title: "Error!",
                                text: errorMessage,
                                icon: "error"
                            });
                        },
                        complete: function() {
                            $submitBtn.html('Save').attr('disabled', false);
                        }
                    });
                }
            });
        });    

    // Reset form function
    function resetAccoladeForm() {
        $("#accolade_id").val('');
        $("#accolade_title").val('');
        $("#accolade_description").val('');
        $("#accolade_image_preview").css('background-image', '');
        $(".image-input").addClass('image-input-empty');
        $(".image-asterisk").show();
        $("#accoladeModalTitle").text('Add Accolade');
    }    // Handle Add Accolade button click
    $("#addAccoladeBtn").on('click', function() {
        resetAccoladeForm();
    });    // Handle Add Award button click
    $("#addAwardBtn").on('click', function() {
        $("#addAwardModal .modal-header h2").text('Add Award');
        resetAwardForm();
        // Reset validation state
        $("#awardForm").validate().resetForm();
        // Remove error classes from form fields
        $("#awardForm").find('.error').removeClass('error');
        $("#awardForm").find('.is-invalid').removeClass('is-invalid');
    });

    // Handle Edit Accolade button click
    $(document).on('click', '.edit-accolade', function() {
        const id = $(this).data('accolade-id');
        $("#accoladeModalTitle").text('Edit Accolade');
        
        $.ajax({
            url: "{{ url('Gcmmf/get-accolade') }}/" + id,
            type: "GET",
            success: function(response) {
                if (response.status) {
                    const data = response.data;
                    $("#accolade_id").val(data.accolade_id);
                    $("#accolade_title").val(data.title);
                    $('#accolade_description').val(data.description);
                    
                    if (data.image_path) {
                        $("#accolade_image_preview").css('background-image', 'url(' + data.image_path + ')');
                        $(".image-input").removeClass('image-input-empty');
                    }
                    
                    $(".image-asterisk").hide();
                    $("#accoladeModal").modal('show');
                } else {
                    toastr.error('Failed to load accolade data');
                }
            },
            error: function() {
                toastr.error('Something went wrong!');
            }
        });
    });    // Handle Delete Accolade button click
    $(document).on('click', '.delete-accolade', function() {
        const id = $(this).data('accolade-id');
        
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading message
                Swal.fire({
                    title: 'Deleting...',
                    text: 'Please wait while the accolade is being deleted',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    allowEnterKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: "{{ url('Gcmmf/delete-accolade') }}/" + id,
                    type: "DELETE",
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status) {
                            refreshAccoladesTable();
                            Swal.fire({
                                title: "Deleted!",
                                text: response.message,
                                icon: "success"
                            });
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: response.message,
                                icon: "error"
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            title: "Error!",
                            text: "Failed to delete accolade.",
                            icon: "error"
                        });
                    }
                });
            }
        });
    });    
    
    // Initialize form validation
    $("#accolades_form").validate({
        rules: {
            image: {
                required: function() {
                    return !$("#accolade_id").val();
                },
                acceptedImageExtension: true,
                filesize: 5242880 // 5MB
            },
            title: {
                required: true,
                maxlength: 255,
                remote: {
                    url: "{{ url('Gcmmf/check-accolade-title') }}",
                    type: "post",
                    data: {
                        title: function() {
                            return $("#accolade_title").val();
                        },
                        id: function() {
                            return $("#accolade_id").val();
                        },
                        _token: '{{ csrf_token() }}'
                    }
                }
            },
            description: {
                required: true
            }
        },
        messages: {
            image: {
                required: "Please select an image",
                acceptedImageExtension: "Please upload an image file (jpg, jpeg, or png)",
                filesize: "File size must not exceed 5MB"
            },
            title: {
                required: "Please enter the title",
                maxlength: "Title cannot be more than 255 characters",
                remote: "This title already exists"
            },
            description: {
                required: "Please enter the description"
            }
        },        
        errorPlacement: function(error, element) {
            if (element.attr('name') === 'image') {
                error.insertAfter(element.closest('.image-input')).css('display', 'block');
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            var formData = new FormData(form);
            
            $('#save-accolade').html('Saving...').addClass('btn-secondary').removeClass('btn-success').attr('disabled', true);

            $.ajax({
                url: "{{ url('Gcmmf/save-accolade') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,            
                success: function(response) {
                    if (response.status) {                    
                        Swal.fire({
                            title: "Success!",
                            text: response.message,
                            icon: "success"
                        }).then(function() {
                            $("#closeAccoladeModal").trigger('click');
                            resetAccoladeForm();
                            $("#accolades_form").validate().resetForm();
                            refreshAccoladesTable();
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: response.message,
                            icon: "error"
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        title: "Error!",
                        text: xhr.responseJSON?.message || 'Something went wrong!',
                        icon: "error"
                    });
                },
                complete: function() {
                    $('#save-accolade').html('Save').removeClass('btn-secondary').addClass('btn-success').attr('disabled', false);
                }
            });
        }
    });    // Reset form when accolade modal is closed
    $('#accoladeModal').on('hidden.bs.modal', function() {
        resetAccoladeForm();
        $("#accolades_form").validate().resetForm();
    });

    // Reset award form function
    function resetAwardForm() {
        $("#award_id").val('');
        $("#award_title").val('');
        $("#award_description").val('');
        $("#award_image_preview").css('background-image', '');
        $(".image-input").addClass('image-input-empty');
        $("#award_year_range").val('').trigger('change');
        // Show the image asterisk for new awards
        $("#addAwardModal").find("label[for='award_image'] .text-danger").show();
    }    // Add Award Form Validation and Submission
    $("#awardForm").validate({
        rules: {
            title: {
                required: true
            },
            description: {
                required: true
            },
            image: {
                required: function() {
                    return !$("#award_id").val(); // Image is required only for new awards
                },
                acceptedImageExtension: true,
                filesize: 5242880 // 5MB
            },
            award_year_range_master_id: {
                required: true
            }
        },
        messages: {
            title: {
                required: "Please enter the title"
            },
            description: {
                required: "Please enter the description"
            },
            image: {
                required: "Please select an image for new awards",
                acceptedImageExtension: "Please upload an image file (jpg, jpeg, or png)",
                filesize: "File size must not exceed 5MB"
            },
            award_year_range_master_id: {
                required: "Please select a year range"
            }
        },
        errorPlacement: function(error, element) {
            if (element.attr('name') === 'image') {
                error.insertAfter(element.closest('.image-input')).css('display', 'block');
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            const formData = new FormData(form);

            $.ajax({
                url: 'Gcmmf/save-award',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $('#save-award').html('Saving...').addClass('btn-secondary').removeClass('btn-success').attr('disabled', true);
                },
                success: function(response) {
                    if (response.status) {
                        // Show success message
                        Swal.fire({
                            title: "Success!",
                            text: response.message,
                            icon: "success"
                        }).then(function() {
                            // Clear the image preview
                            $(".image-input").addClass('image-input-empty');
                            $(".image-input-wrapper").css('background-image', '');
                            
                            // Reset the form
                            form.reset();
                            
                            // Close modal
                            $('#closeAddAwardModal').trigger('click');

                            // Refresh the table content
                            $.ajax({
                                url: window.location.href,
                                type: 'GET',
                                success: function(response) {
                                    const parser = new DOMParser();
                                    const doc = parser.parseFromString(response, 'text/html');
                                    const newTableBody = doc.querySelector('#awardsTableBody').innerHTML;
                                    $('#awardsTableBody').html(newTableBody);
                                }
                            });
                        });
                    }
                },
                error: function(xhr) {
                    let errorMessage = "An undefined error occurred.";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    
                    Swal.fire({
                        title: "Error",
                        text: errorMessage,
                        icon: "error"
                    });
                },
                complete: function() {
                    $('#save-award').html('<span class="indicator-label">Save</span>').attr('disabled', false).removeClass('btn-secondary').addClass('btn-success');
                }
            });
        }
    });    // Handle Edit Award button click
    $(document).on('click', '.edit-award', function() {
        const id = $(this).data('award-id');
        $("#addAwardModal .modal-header h2").text('Edit Award');
        
        $.ajax({
            url: "{{ url('Gcmmf/get-award') }}/" + id,
            type: "GET",
            success: function(response) {
                if (response.status) {
                    const data = response.data;
                    $("#award_id").val(data.award_id);
                    $("#award_title").val(data.title);
                    $('#award_description').val(data.description);
                    $("#award_year_range").val(data.award_year_range_master_id).trigger('change');
                    
                    if (data.image_path) {
                        $("#award_image_preview").css('background-image', 'url(' + data.image_path + ')');
                        $(".image-input").removeClass('image-input-empty');
                    }
                    
                    // Hide the image asterisk when editing
                    $("#addAwardModal").find("label[for='award_image'] .text-danger").hide();
                    
                    $("#addAwardModal").modal('show');
                } else {
                    Swal.fire({
                        title: "Error!",
                        text: "Failed to load award data",
                        icon: "error"
                    });
                }
            },
            error: function() {
                Swal.fire({
                    title: "Error!",
                    text: "Failed to load award data",
                    icon: "error"
                });
            }
        });
    });

    // Handle Delete Award button click
    $(document).on('click', '.delete-award', function() {
        const id = $(this).data('award-id');
        
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading message
                Swal.fire({
                    title: 'Deleting...',
                    text: 'Please wait while the award is being deleted',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    allowEnterKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: "{{ url('Gcmmf/delete-award') }}/" + id,
                    type: "DELETE",
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status) {
                            // Refresh only the table content
                            $.ajax({
                                url: window.location.href,
                                type: 'GET',
                                success: function(response) {
                                    const parser = new DOMParser();
                                    const doc = parser.parseFromString(response, 'text/html');
                                    const newTableBody = doc.querySelector('#awardsTableBody').innerHTML;
                                    $('#awardsTableBody').html(newTableBody);
                                    
                                    Swal.fire({
                                        title: "Deleted!",
                                        text: response.message,
                                        icon: "success"
                                    });
                                }
                            });
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: response.message,
                                icon: "error"
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            title: "Error!",
                            text: "Failed to delete award.",
                            icon: "error"
                        });
                    }
                });
            }
        });
    });

    $("#memberUnionForm").validate({
        ignore: [],
        onkeyup: false, // Disable validation on keyup for all fields
        rules: {
            'member_unions[0]': {
                required: true,
                remote: {
                    url: 'Gcmmf/validate-member-union',
                    type: 'POST',
                    data: {
                        member_unions: function() {
                            return $('input[name="member_unions[0]"]').val();
                        },
                        _token: $('meta[name="csrf-token"]').attr('content')
                    }
                }
            }
        },
        messages: {
            'member_unions[0]': {
                required: "Please enter a member union name",
                remote: "This member union already exists"
            }
        },
        errorPlacement: function (error, element) {
            const name = element.attr('name').replace(/\[/g, '\\[').replace(/\]/g, '\\]');
            // Remove any existing error for this input
            $(`label#${name}-error`).remove();
            // Create a container for this error if it doesn't exist
            let errorContainer = element.closest('.input-group').next('.error-container');
            if (!errorContainer.length) {
                errorContainer = $('<div class="error-container mb-2"></div>');
                element.closest('.input-group').after(errorContainer);
            }
            // Place the error in the container
            errorContainer.html(error);
        },
        highlight: function(element) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
            // Remove the error message when field becomes valid
            const name = $(element).attr('name').replace(/\[/g, '\\[').replace(/\]/g, '\\]');
            $(`label#${name}-error`).remove();
        },
        submitHandler: function(form){
            $.ajax({                    url: $('#member_id').length ? `Gcmmf/update-member-union/${$('#member_id').val()}` : 'Gcmmf/save-member-unions',
                type: 'POST',
                data: $(form).serialize(),
                beforeSend: function(){
                    const action = $('#member_id').length ? 'Updating' : 'Saving';
                    $('.save-button').html(`<span class="indicator-label">${action}...</span>`).removeClass('btn-success').addClass('btn-secondary').attr('disabled', true);
                },
                success: function (response) {                          
                    Swal.fire({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    }).then((result) => {                            
                        // Hide the modal and clean up
                        // $("#addMemberModal").modal("hide");
                        $('#closeMemberUnionModal').trigger('click');
                        
                        // Reset form to initial state
                        $('#memberUnionForm')[0].reset();
                        
                        // Remove all additional input fields except the first one
                        $('#memberInputContainer .input-group:not(:first)').remove();
                        
                        // Reset validation state
                        const validator = $("#memberUnionForm").validate();
                        validator.resetForm();
                        
                        // Update buttons state
                        updateButtons();
                        
                        // Update validation rules
                        updateValidationRules();
                        
                        // Remove any validation errors
                        $('.is-invalid').removeClass('is-invalid');
                        $('.error-container').empty();
                        
                        // Reset the first input's name to index 0
                        $('#memberInputContainer .input-group:first input').attr('name', 'member_unions[0]');

                        // Remove member ID if exists
                        $('#member_id').remove();

                        // Refresh the table content
                        refreshMemberUnionsTable();
                    });
                },
                error: function (xhr) {
                    if (xhr.responseJSON.msg == undefined) {
                        Swal.fire({
                            title: "Error",
                            text: "An undefined error occurred.",
                            icon: "error"
                        });
                    } else {
                        Swal.fire({
                            title: xhr.responseJSON.msg,
                            text: JSON.stringify(xhr.responseJSON.errors),
                            icon: "error"
                        });
                    }
                },
                complete: function(){
                    $('.save-button').html('<span class="indicator-label">Save</span>').removeClass('btn-secondary').addClass('btn-success').attr('disabled', false);
                }
            });
        }
    });
        
    // Function to update validation rules for member union inputs          
    function updateValidationRules() {
        const validator = $("#memberUnionForm").validate();
        
        $('.member-union-input').each(function(index, element) {
            const fieldName = `member_unions[${index}]`;
            $(element).attr('name', fieldName);
            
            $(element).rules("add", {
                required: true,
                remote: {
                    url: 'Gcmmf/validate-member-union',
                    type: 'POST',
                    data: {
                        member_union: function() {
                            return $(element).val();
                        },
                        _token: $('meta[name="csrf-token"]').attr('content')
                    }
                },
                messages: {
                    required: "Please enter a member union name",
                    remote: "This member union already exists"
                }
            });
        });
    }

    // Function to update add/remove buttons
    function updateButtons() {
        const inputGroups = $('#memberInputContainer .input-group');
        $('.btn-add, .btn-remove').remove();
        
        inputGroups.each(function(index) {
            const isLast = index === inputGroups.length - 1;
            
            // Add remove button if there's more than one input
            if (inputGroups.length > 1) {
                $(this).append(`
                    <button type="button" class="btn btn-danger btn-remove">
                        <i class="fas fa-minus"></i>
                    </button>
                `);
            }
            
            // Add the add button to the last input group
            if (isLast) {
                $(this).append(`
                    <button type="button" class="btn btn-success btn-add">
                        <i class="fas fa-plus"></i>
                    </button>
                `);
            }
        });
    }

    // Handle add input
    $(document).on('click', '.btn-add', function() {
        const inputGroup = $(this).closest('.input-group');
        const newIndex = $('#memberInputContainer .input-group').length;
        const newInputHtml = `
            <div class="input-field-container">
                <div class="input-group mb-2">
                    <input type="text" name="member_unions[${newIndex}]" 
                            id="member_union_${newIndex}"
                            class="form-control member-union-input" 
                            placeholder="Enter Member Union" required
                            data-msg="Please enter a member union name" 
                            data-msg-required="Please enter a member union name">
                </div>
                <div class="error-container mb-2"></div>
            </div>
        `;
        
        // Add new input after the current input group container
        inputGroup.closest('.input-field-container').after(newInputHtml);
        
        // Update buttons and validation
        updateButtons();
        updateValidationRules();
    });

    // Handle remove input
    $(document).on('click', '.btn-remove', function() {
        const inputGroup = $(this).closest('.input-group');
        const input = inputGroup.find('input');
        const validator = $("#memberUnionForm").validate();
        
        // Get the input name before removing anything and clean it for selectors
        const inputName = input.attr('name').replace(/\[/g, '\\[').replace(/\]/g, '\\]');
        
        // Remove validation rules and error states for just this input
        input.rules("remove");
        input.removeClass('is-invalid');
        $(`label#${inputName}-error`).remove();
        
        // Remove this specific input's container
        const container = inputGroup.closest('.input-field-container');
        container.remove();
        
        // Re-index remaining inputs and update their validation rules
        $('#memberInputContainer .member-union-input').each(function(index) {
            const $input = $(this);
            const newName = `member_unions[${index}]`;
            const newId = `member_union_${index}`;
            
            // Update input attributes
            $input.attr('name', newName)
                    .attr('id', newId);
            
            // Revalidate each input independently
            if ($input.val()) {
                validator.element($input);
            }
        });
        
        // Update buttons and validation rules
        updateButtons();
        updateValidationRules();
    });

    // Initial setup

    updateButtons();

    // Handle add member union
    $("#memberUnionForm").validate({
        ignore: [],
        onkeyup: false,
        rules: {
            'member_unions[0]': {
                required: true,
                remote: {
                    url: 'Gcmmf/validate-member-union',
                    type: 'POST',
                    data: {
                        member_union: function() {
                            return $('input[name="member_unions[0]"]').val();
                        },
                        _token: $('meta[name="csrf-token"]').attr('content')
                    }
                }
            }
        },
        messages: {
            'member_unions[0]': {
                required: "Please enter a member union name",
                remote: "This member union already exists"
            }
        },
        errorPlacement: function (error, element) {
            const name = element.attr('name').replace(/\[/g, '\\[').replace(/\]/g, '\\]');
            $(`label#${name}-error`).remove();
            let errorContainer = element.closest('.input-group').next('.error-container');
            if (!errorContainer.length) {
                errorContainer = $('<div class="error-container mb-2"></div>');
                element.closest('.input-group').after(errorContainer);
            }
            errorContainer.html(error);
        },
        highlight: function(element) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form){
            $.ajax({
                url: 'Gcmmf/save-member-unions',
                type: 'POST',
                data: $(form).serialize(),
                beforeSend: function(){
                    $('.save-button').html('<span class="indicator-label">Saving...</span>').removeClass('btn-success').addClass('btn-secondary').attr('disabled', true);
                },
                success: function (response) {                          
                    Swal.fire({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    }).then(() => {                            

                        $('#closeMemberUnionModal').trigger('click');
                        $('#memberUnionForm')[0].reset();
                        $('#memberInputContainer .input-group:not(:first)').remove();
                        
                        const validator = $("#memberUnionForm").validate();
                        validator.resetForm();
                        
                        updateButtons();
                        updateValidationRules();
                        
                        $('.is-invalid').removeClass('is-invalid');
                        $('.error-container').empty();
                        
                        $('#memberInputContainer .input-group:first input').attr('name', 'member_unions[0]');
                        refreshMemberUnionsTable();
                    });
                },
                error: function (xhr) {
                    Swal.fire({
                        title: xhr.responseJSON?.msg || "Error",
                        text: xhr.responseJSON?.errors ? JSON.stringify(xhr.responseJSON.errors) : "An error occurred",
                        icon: "error"
                    });
                },
                complete: function(){
                    $('.save-button').html('<span class="indicator-label">Save</span>').removeClass('btn-secondary').addClass('btn-success').attr('disabled', false);
                }
            });
        }
    });

    // Function to refresh member unions table
    function refreshMemberUnionsTable() {
        $.ajax({
            url: window.location.pathname,
            type: 'GET',
            success: function(response) {
                const parser = new DOMParser();
                const doc = parser.parseFromString(response, 'text/html');
                const tableBody = doc.querySelector('#memberUnion .table.table-striped.table-row-bordered tbody').innerHTML;
                $('#memberUnion .table.table-striped.table-row-bordered tbody').html(tableBody);
            },
            error: function(xhr, status, error) {
                console.error('Error refreshing table:', error);
                Swal.fire({
                    title: "Error!",
                    text: "Failed to refresh the table. Please try again.",
                    icon: "error"
                });
            }
        });
    }

    // Function to refresh accolades table
    function refreshAccoladesTable() {
        $.ajax({
            url: window.location.pathname,
            type: 'GET',
            success: function(response) {
                const parser = new DOMParser();
                const doc = parser.parseFromString(response, 'text/html');
                const tableBody = doc.querySelector('#accoladesTableBody').innerHTML;
                $('#accoladesTableBody').html(tableBody);
            },
            error: function(xhr, status, error) {
                console.error('Error refreshing accolades table:', error);
                Swal.fire({
                    title: "Error!",
                    text: "Failed to refresh the accolades table. Please try again.",
                    icon: "error"
                });
            }
        });
    }
</script>